مدرس دوره

مدرس دوره

نبی عبدی

مدت زمان ویدیو

زمان ویدیو

18:59 دقیقه

دیگر جلسات دوره

برو به دیگر جلسات

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

دانلود ویدیو

برای دانلود ویدیو

وارد شوید

آموزش طراحی یک اسلایدر ساده با روولوشن اسلایدر

منتشر شده در تاریخ : 14, اسفند, 1399

با جلسه پنجم از دوره آموزش روولوشن اسلایدر از آکادمی وبکیما در خدمت شما همراهان عزیز هستیم، توی این جلسه می‌خواهیم اولین اسلایدر خود را با روولوشن اسلایدر طراحی کنیم، پس اگر می‌خواهید مراحل طراحی یک اسلایدر ساده و جذاب را یاد بگیرید، پیشنهاد می‌کنیم حتما این جلسه را با دقت مشاهده کنید.

طراحی اولین اسلایدر در روولوشن اسلایدر

برای شروع طراحی یک اسلایدر جذاب و زیبا شما باید انتخاب کنید که می‌خواهید پس زمینه اسلایدرتان به چه صورت باشد، یعنی می‌خواهید یک رنگ را به عنوان بگراند انتخاب کنید، یا یک عکس؟ یا حتی یک ویدیوی بهینه شده و جذاب؟ در هر صورت شما برای شروع طراحی یک اسلایدر باید ابتدا نوع پس زمینه را انتخاب کنید،‌ ما در این جلسه می‌خواهیم از پس زمینه عکس استفاده کنیم. بنابراین باید چند تصویر با کیفیت را پیدا کرده و سپس آن‌ها را برای وب‌سایت و فضای وب بهینه کنیم، سپس وارد افزونه روولوشن اسلایدر شده و اسلایدر خود را طراحی می‌کنیم، پس با ادامه این آموزش همراه ما باشید.

مرحله اول: دانلود تصاویر مرتبط و باکیفیت

پس برای اینکه بتوانیم یک تصویر با کیفیت و مرتبط با موضوع خودمان پیدا کنیم، وارد وب‌سایت unsplash.com می‌شویم، توجه داشته باشید که برای استفاده از این وب‌سایت باید حتما از آی‌پی کشورهای خارجی استفاده کنید و اگر با آی‌پی ایران وارد سایت شوید، تصاویر برای شما بارگذاری نمی‌شود. بعد از باز کردن وب‌سایت، از دسته‌بندی تصاویر، حوزه کاری که می‌خواهید برای آن اسلایدر طراحی کنید را انتخاب کنید.

سایت unsplash منبع دانلود تصاویر مرتبط و باکیفیت
سایت unsplash منبع دانلود تصاویر مرتبط و باکیفیت

همچنین می‌توانید از بخش جستجوی وب‌سایت، عبارت مرتبط با حوزه کاری خود را جستجو کنید تا تصاویر مرتبط برای شما نمایش داده شود، همچنین توجه داشته باشید که علاوه بر سایت unsplash، وب‌سایت‌های بسیار زیاد دیگری هم هستند که می‌توانید از آن‌ها نیز برای دانلود تصاویر با کیفیت استفاده کنید، در مقاله دانلود رایگان وکتورهای گرافیکی، این سایت‌ها را معرفی کردیم و پیشنهاد می‌کنم که حتما این مقاله را مطالعه کنید.

مرحله دوم: بهینه‌سازی تصاویر برای وب‌سایت

بعد از این‌که تصاویر مرتبط با اسلایدر خود را پیدا کردید، حال باید این تصاویر را بهینه‌سازی کنید، برای این کار چند روش وجود دارد که یکی از بهترین روش‌ها، استفاده از نرم‌افزار فتوشاپ برای بهینه کردن تصاویر است، البته ممکن است که همه نرم‌افزار فتوشاپ را بلد نباشند و حتی روی سیستم خود آن را نصب نداشته باشند، به همین دلیل پیشنهاد دوم ما استفاده از ابزارهای آنلاین است.

سایت tinypng یک ابزار آنلاین برای بهینه‌سازی تصاویر
سایت tinypng یک ابزار آنلاین برای بهینه‌سازی تصاویر

پس شما در قدم دوم، وارد سایت tinypng.com شوید، و تمامی تصاویری که می‌خواهید در طراحی اسلایدر استفاده کنید را داخل این سایت درگ اند دراپ کنید (بکشید و رها کنید) و کمی صبر کنید تا این ابزار آنلاین تصاویر شما بهینه کند و سپس تصاویر بهینه شده را دانلود کنید، حال آماده هستیم تا طراحی اولین اسلایدر خود را با روولوشن اسلایدر آغاز کنیم.

مرحله سوم: شروع طراحی اولین اسلایدر با روولوشن اسلایدر

حال در مرحله سوم وارد بخش طراحی اسلایدر در رولووشن شوید، و مراحل طراحی اسلایدر را همانند ویدیوی آموزشی دنبال کنید، در زیر تصویری از این مراحل را مشاهده می‌کنید:

تصویری از مراحل طراحی اولین اسلایدر در روولوشن اسلایدر
تصویری از مراحل طراحی اولین اسلایدر در روولوشن اسلایدر

بعد از انجام مراحل و طراحی اسلایدرها، به بخش Navigation Options بروید و از این بخش، تنظیمات مربوط به پیمایش اسلایدرها را تنظیم کنید. در جلسات آینده، این بخش را به صورت کامل آموزش خواهیم داد.

تصویری از تنظیمات Navigation Options در روولوشن اسلایدر
تصویری از تنظیمات Navigation Options در روولوشن اسلایدر

تصویری از اسلایدر طراحی شده در این جلسه

تصویری از اسلایدر طراحی شده در این جلسه
تصویری از اسلایدر طراحی شده در این جلسه

جمع‌بندی

در انتها امیدواریم که جلسه آموزش طراحی یک اسلایدر ساده با روولوشن اسلایدر برای شما عزیزان مفید و کاربردی واقع شده باشد، هر سوالی در رابطه با این جلسه و مراحل طراحی یک اسلایدر ساده در رولوشن دارید، در انتهای همین صفحه با تیم پشتیبانی وبکیما در ارتباط باشید، ممنون از همراهی‌ شما 😉

نظرات در “آموزش طراحی یک اسلایدر ساده با روولوشن اسلایدر

  1. حسین زاده میگوید:

    سلام و خسته نباشید
    اموزشها واقعا عالی هستن ممنون ازشما
    یک سئوال داشتم
    من طبق اموزش پیش رفتم فقط فاصله زمانی که بخواد عکس اول عوض بشه برا من خیلی زیاد هست از کجا تنظیم کنم
    موفق باشید

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

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

پنج × 2 =

تخفیفات ویژه آخر تابستان شروع شد! تا 67% تخفیف روی تمامی دوره‌ها! مدت محدود ...بـــزن بریـــــــم!
+