آموزش طراحی سایت

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

طراحی اسلایدر بسیار زیبا و جذاب در طراحی سایت

در آموزش ­های قبل با ساخت اسلایدر خام در روولوشن اسلایدر و ساخت تصاویر جذاب برای سایت آشنا شدید. در این قسمت یک اسلایدر جذاب را با آموخته ­های قبل طراحی می­ کنیم.

اسلایدر خام

در شروع طراحی می­بایست یک اسلایدر خام ایجاد کنیم. برای این کار در پیشخوان وردپرس، منو Slider Revolution  را انتخاب کرده و سپس گزینه “ساخت اسلایدر جدید” را کلیک کنید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

صفحه پیش­رو، صفحه ساخت اسلایدر خام است. از منو “تنظیمات عمومی ماژول”، برای اسلایدر “عنوان” و “نام مستعار” در نظر گرفته و ذخیره کنید.(بهتر است نام­ گذاری ماژول اسلایدر با حروف انگلیسی انجام شود.)

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

حال برای انتخاب تصویر برای اسلاید، از سایت freepik.com استفاده می ­کنیم. موضوع تصویر را جستجو کنید. از بین تصاویری که مشاهده می­ کنید، تصویر دلخواه را دانلود کنید. در فایل تصویر که با فرمت .zipدانلود شده است، فایل­ هایی با فرمت .eps یا .ai را کلیک کنید تا فایل در نرم افزار Illustrator باز شود.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

نوشته های مشابه

با استفاده از انتخاب­ گرهای نرم ­افزار Illustrator ، هر کدام از لایه ­های تصویر که برای طراحی اسلایدر نیاز دارید را انتخاب کنید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

در نرم ­افزار Photoshop یک سند با ابعاد دلخواه ایجادکنید. لایه­ های تصویر را با دراگ و دراپ(Drog&Drop) از نرم ­افزار Illustrator به نرم­ افزار Photoshop منتقل کرده و ابعاد آن را تنظیم نمایید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

به یاد داشته باشید از نوار سمت راست، لایه Background سفید را حذف کرده تا پس ­زمینه تصویر شفاف باشد. لایه ­ای که در نرم­  افزار Photoshop ایجاد کردید را با فرمت .png ذخیره کنید.

کم کردن حجم تصاویر 

بهتر است برای زمان لود مناسب اسلایدر در سایت، حجم تصاویر کم شود. سایت tinypng.com به طور آنلاین با فشرده کردن تصویر باعث کم شدن حجم تصویر می­ شود. تصویری که با فرمت .png ذخیره کردید را در سایت tinypng  آپلود کرده و پس از فشره شدن دوباره آن را دانلود کنید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

پس از فشرده­ سازی تصویر، در افزونه روولوشن اسلایدر، منو “تنظیمات اسلاید ß پس ­زمینه” را انتخاب کرده و نوع پس ­زمینه را تصویر قرار داده و سپس از کتابخانه رسانه تصویر فشرده را که بارگذاری و انتخاب کنید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

برای تنظیم ارتفاع اسلایدر، از منو “تنظیمات عمومیßطرح­ بندی”، ارتفاع مناسب اسلایدر را برای دستگاه­ های مختلف(مانیتور، لپ­تاپ، موبایل و…) تنظیم کنید.

تا اینجا پس ­زمینه اسلایدر ایجاد شده است.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

هر کدام از لایه­ های دیگر تصویر که می­خواهید در اسلایدر نمایش داده شود را از نرم افزار Illustrator انتخاب کرده و پس از انتقال به Photoshop و حذف لایه   ­های اضافی آن با فرمت .png ذخیره کنید. یادآوری می­ شود از سایت tinypng برای فشرده­ سازی تصویر اقدام کنید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

برای اضافه کردن تصویر به اسلاید، از منو بالایی افزونه روولوشن اسلایدر “افزودن لایهßتصویر” را انتخاب کنید. با کلیک روی لایه تصویر اضافه شده، تصویر مورد نظر را در کتابخانه پرونده ­های چند رسانه ­ای وردپرس بارگذاری و انتخاب کنید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

درصورت لزوم ابعاد تصویر را تغییر داده و در اسلایدر جایگذاری نمایید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

لایه­ های دیگر اسلایدر را نیز با روش گفته شده در بالا ایجاد کنید.

همچنین می­توانید برای هر کدام از لایه ­های اسلایدر افکت اضافه کنید. برای این کار پس از انتخاب لایه، از منو “تنظیمات لایهßحلقه لایه” را انتخاب کنید. سپس قسمت افکت را فعال کرده و از جعبه باز شونده “بارگذاری قالب حلقه”، افکت دلخواه را به لایه اضافه کنید. همچنین می­توانید سرعت حرکت افکت را نیز تنظیم نمایید..

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

محتوای لایه های متن

برای اضافه کردن متن به اسلایدر، از منو بالایی افزونه روولوشن اسلایدر “افزودن لایهßمتن” را انتخاب کنید. در جعبه “محتوای لایه­  های متن”، متن دلخواه را بنویسید. همچنین می­توانید از منو “تنظیمات لایهßاستایل”، رنگ متن، فونت، اندازه و… را تغییر دهید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

اگر بخواهید متن با انیمیشن نمایش داده شود پس از انتخاب لایه متنی، از منو “تنظیمات لایهß انیمیشن” و جعبه باز شونده “IN” مدل دلخواه برای انیمیشن متن را کلیک کنید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

اضافه کردن متن،تصویر

برای هر یک از لایه ­های دیگر مثل متن، تصویر ، دکمه و… نیز می­توانید انیمیشن اضافه کنید.

در صورتی­ که بخواهید به اسلاید دکمه اضافه کنید، از منو بالایی گزینه “افزودن لایهßدکمه” را کلیک و مدل دکمه دلخواهتان را انتخاب کرده و متن دکمه را نیز تغییر دهید. همچنین مانند متن می­توانید فونت، رنگ پس­زمینه و… دکمه را نیز تغییر دهید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

بخش فراخوانی

حال برای نمایش اسلایدر، در برگه یا هر پست ­تایپی که می­خواهید، باید اسلاید فراخوانی شود.

اگر از صفحه ­ساز ویژوال کامپوزر استفاده می­کنید، المان “Slider Revolution ” را به ردیف صفحه­ ساز اضافه کنید.  از بین اسلایدرهایی که وجود دارد، اسلایدی که طراحی کرده­ اید را انتخاب کرده تا اسلایدر در برگه قرار گرفته و در وب­سایت نمایش داده شود. همچنین برای نمایش اسلایدر می­توانید “کد کوتاه” آن را از قسمت “تنظیمات عمومی” اسلایدر کپی کرده و در هر پست­ تایپی که می­  خواهید قرار دهید.

آموزش نمایش اسلاید و شروع مقدماتی

در انتها و پس از طراحی اسلایدر و فراخوانی آن، برگه­ ای که اسلایدر در آن فراخوانی شده است . آن را در مرورگر باز کرده و اسلایدر را در سایتتان مشاهده نمایید.

ساخت اسلایدر خلاقانه در روولوشن اسلایدر

 

 

بازگشت به صفحه دوره آموزش طراحی سایت

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید
بستن
دکمه بازگشت به بالا