تصاویر حاشیه و پس زمینه همچنان عناصر طراحی محبوب در هنگام ساخت وب سایت هستند. استفاده از تصاویر پس‌زمینه مناسب می‌تواند بدون صرف زمان و هزینه برای گرافیک‌های سفارشی، به سایت شما شخصیت و سبک اضافه کند. و حاشیه ها برای اضافه کردن ساختار به شما مفید هستند محتویات.
امروز قصد داریم با طراحی تصاویر پس زمینه به عنوان حاشیه، این دو را در کنار هم قرار دهیم. DIVI دارای مجموعه ای از گزینه های مفید برای سفارشی کردن تصاویر پس زمینه است که طراحی تصاویر پس زمینه را برای طرح های منحصر به فرد حاشیه آسان می کند. این به ما امکان می دهد رنگ ها، گرادیان ها، سایه های جعبه و حالت های ترکیبی را به انواع روش های خلاقانه ترکیب کنیم.
بیایید شروع.
آنچه شما باید برای شروع کار
برای شروع کار به موارد زیر نیاز دارید:
- Le تم دیوی نصب شده و فعال
- صفحه جدید ایجاد شده برای ساختن از ابتدا در قسمت جلویی (سازنده بصری)
- تصاویر برای استفاده محتویات ساختگی
پس از آن شما یک بوم خالی برای شروع طراحی خواهید داشت DIVI.
نکات کلی برای ایجاد الگوهای حاشیه تصویر پس زمینه
قبل از شروع ساخت ، چند نکته کلی برای یادآوری در هنگام ایجاد الگوهای حاشیه تصویر پس زمینه آورده شده است.
# 1 تصاویر با بافت زیادی را انتخاب کنید
بیشتر اوقات ، شما می خواهید مرزهای شما باریک تر شوند. این بدان معناست که شما قادر به دیدن قسمت زیادی از تصویر نخواهید بود. بنابراین استفاده از تصاویری که بافت زیادی دارند مفید است. به عنوان مثال ، می توانید از عکس منظره ، دسته گل یا برج بلند استفاده کنید. در اینجا برخی از تصاویر من برای این آموزش استفاده می شود.
شماره 2 از شیب و شفافیت با مرزهای تصویر پس زمینه استفاده می کند
تصاویر پس زمینه گاهی اوقات می توانند به تنهایی یک حاشیه عالی برای شما باشند محتویات. اما بیشتر اوقات شما می خواهید برای دستیابی به رنگ یا تیره تر یا روشن تر کردن پس زمینه به تصویر پس زمینه خود همپوشانی اضافه کنید. گرادیان پس‌زمینه راهی عالی برای افزودن لایه‌بندی به تصاویر پس‌زمینه و ایجاد طرح‌های حاشیه منحصربه‌فرد است.
# 3 از حالتهای ادغام استفاده کنید
استفاده از حالت های ترکیبی روی تصاویر پس زمینه می تواند رنگ ها و بافت های منحصر به فردی را برای الگوهای حاشیه ای اعمال کند. تمام کاری که شما باید انجام دهید این است که یک رنگ پس زمینه یا یک شیب با تصویر پس زمینه خود اضافه کنید و سپس یک حالت ترکیبی را برای تصویر پس زمینه انتخاب کنید. رنگ ، روشنایی ، ضرب و صفحه چند حالت عالی برای مرزهای تصویر پس زمینه هستند.
برای شکل های منحصر به فرد از گزینه های گوشه گرد استفاده کنید
لازم نیست همه حاشیه ها لبه های مستقیم داشته باشند. کمی قاطی کن! گزینه های گوشه گرد DIVI به شما اجازه می دهد این گوشه ها را خلاقانه شکل دهید.
از تصاویر پس زمینه اختلاف منظر به عنوان حاشیه استفاده کنید
نکته قابل توجه در مورد اختلاف منظر این است که با حرکت ، طراحی را زنده می کند. علاوه بر این ، اگر برای طراحی حاشیه خود از تصاویر پس زمینه با اختلاف منظر استفاده می کنید ، می توانید حرکتی ظریف ایجاد کنید که برجسته باشد و محتوای شما را برجسته کند.
طراحی مرز تصویر در دیوی
حالا که ایده کلی زیر ایجاد الگوهای حاشیه تصویر پس زمینه را درک می کنیم ، بیایید چند مورد را با هم تصور کنیم. ما مدل های مختلف 2 را خواهیم ساخت. هر یک یک ماژول ارائه اولیه برای ارائه به عنوان محتوای داستانی خواهد داشت. و ما از پارامترهای ستون برای اضافه کردن حاشیه تصویر پس زمینه ماژول استفاده خواهیم کرد.
بیایید با اولین طراحی خود شروع کنیم.
تصویر پس زمینه مرزی # 1
این طرح اول حاشیه باریکی تصویر پس زمینه با یک سایه منطقه دارد تا بیشتر به یک قاب برای محتوا شباهت داشته باشد.
در اینجا نحوه طراحی آن آورده شده است.
ابتدا یک ردیف از دو ستون را به یک بخش عادی اضافه کنید.
ماژول خلاصه را اضافه کنید
سپس ماژول blurb را در ستون سمت چپ اضافه کنید.
پس از ایجاد لکه ، تنظیمات blurb را باز کرده و تصویر پیش فرض را استخراج کنید تا فقط عنوان و محتوای بدنه قابل مشاهده باشد.
سپس متن خود را به یک پس زمینه سفید بدهید.
سپس پارامترهای طراحی ارائه را به شرح زیر به روز کنید:
- عنوان متن: اسوالد
- پلیس بدن: لاتو
- حاشیه 5٪ در بالا ، 5٪ در پایین ، 5٪ در سمت چپ ، 5٪ در سمت راست
- اثاثه یا لوازم داخلی: 7٪ در بالا ، 7٪ در پایین ، 10٪ در سمت چپ ، 10٪ در سمت راست
- گوشه های گرد: 20px در بالا سمت راست ، 20px در سمت چپ پایین
- Box Shadow: تصویر را ببینید
تصویر پس زمینه را به ستون اضافه کنید
این از ماژول ارائه ما مراقبت می کند. حالا بیایید مرز تصویر پس زمینه خود را اضافه کنیم. برای این کار یک تصویر پس زمینه به ستون حاوی ماژول Blurb اضافه خواهیم کرد. تنظیمات ردیف ، سپس تنظیمات ستون 1 را باز کنید و پس زمینه زیر را اضافه کنید:
- تصویر زمینه: [تصویر دلخواه خود را بارگذاری کنید]
- رنگ پس زمینه: #303a7a
- تصویر پس زمینه مخلوط: روشنایی
سپس گوشه های گرد و سایه جعبه را به صورت زیر به روز کنید:
- گوشه های گرد: 20px در بالا سمت راست ، 20px در سمت چپ پایین
- Box Shadow: تصویر را ببینید
نتیجه نهایی
حال طرح نهایی را بررسی کنید.
تصویر پس زمینه مرزی # 2
این طرح بعدی این واقعیت را برجسته می کند که استفاده از تصاویر با بافت بسیار بالا می تواند مرزهای زیبایی ایجاد کند ، به خصوص هنگامی که آنها را با حالت های ترکیب تصویر ترکیب کنید.
در اینجا نحوه طراحی آن آورده شده است.
ماژول Blurb را اضافه کنید
برای ایجاد طرح ، متن blurb را به ستون 2 همان ردیف که حاوی طرح شماره 1 است اضافه می کنیم. ادامه دهید و ماژول طرح طراحی شماره 1 را کپی کرده و در ستون 2 جای گذاری کنید ، سپس ، تنظیمات ماژول ارائه را به صورت زیر به روز کنید:
- گوشه های گرد: تنظیمات پیش فرض را بازیابی کنید
- حاشیه: 10٪ در بالا ، 10٪ در پایین ، 10٪ در سمت چپ ، 10٪ در سمت راست
- اثاثه یا لوازم داخلی: 15٪ در بالا ، 15٪ در پایین ، 10٪ در سمت چپ ، 10٪ در سمت راست
- عرض مرز: 1px
- رنگ مرز: #ffffff
تصویر پس زمینه را به ستون اضافه کنید
با نصب ماژول ، تنظیمات خط را باز کرده و یک گرادیان پس زمینه را به ستون 2 اضافه کنید.
- شیب پس زمینه سمت چپ: #f7e0a5
- رنگ شیب پس زمینه سمت راست: rgba (237,240,0,0.79)
- جهت گرادیان: 90deg
- موقعیت شروع: 50٪
- موقعیت نهایی: 0٪
سپس یک تصویر پس زمینه با یک اثر گرادیان خوب اضافه کنید.
- تصویر زمینه: [بارگیری تصویر]
- ترکیب تصویر پس زمینه: رنگ
همانطور که مشاهده می کنید ، حالت ترکیبی رنگ ، روشنایی دو شیب رنگ پشت تصویر را حفظ می کند تا یک الگوی حاشیه تصویر خوب با رنگ های ملایم ایجاد کند.
نتیجه نهایی
نتیجه نهایی طراحی را کشف کنید.
آخرین افکار
ایجاد حاشیه با تصاویر راهی آسان برای افزودن زیبایی و شخصیت به طرح شماست. طرحی که در این آموزش برجسته شده است برای برجسته کردن امکانات موجود با Divi در طراحی حاشیه های منحصر به فرد ساخته شده است. بنابراین ، با ترکیب رنگ های مختلف ، طراحی ها بی حد و حصر است. بنابراین ، برخی از تصاویر را دریافت کنید و بیشتر در طراحی مرزها با تصاویر در Divi کاوش کنید.
به سلامتی شما
