آیا برای فروش انیمیشن ها و ویژگی های واکنش گرا در طراحی های وب خود مشکل دارید؟ در این آموزش Adobe XD شما را از طریق مراحل سریع و آسان برای ایجاد یک گالری عکس متحرک راهنمایی می کنم.
این ترفند برای اینکه به مشتریان نشان دهد که کاربرانشان چگونه وب‌سایتشان را پس از پخش زنده مرور می‌کنند، ایده‌آل است.
انیمیشن ها و تعاملات معمولا آخرین مرحله از فرآیند طراحی هستند. این باید بعد از ایجاد وایرفریم، تعریف یک سیستم طراحی و اعمال سبک ها و عناصر در طراحی خود اتفاق بیفتد.
هرچه طرح های شما با وفاداری (واقع بینانه/جزئیات) بیشتر به نظر برسند، فروش ایده های خود به مشتریان آسان تر خواهد بود. به خواندن این آموزش نمونه اولیه Adobe XD ادامه دهید تا ارائه های خود را با مشتریان افزایش دهید.
الگوهای وب Adobe XD در Envato Elements
اگر یک طراح تمام وقت هستید که همزمان روی چند پروژه کار می کنید، داشتن منابع خلاقانه نامحدود می تواند یک تغییر بازی باشد. با یک اشتراک ماهانه کم در Envato Elements می‌توانید تمام قالب‌ها و منابع خلاقانه‌ای را که برای هر پروژه طراحی نیاز دارید دانلود کنید.
قالب‌های وب، کیت‌های Adobe XD Wireframe، نمادهای وب و موارد دیگر را در کتابخانه منابع عظیم Element پیدا کنید.
کار با قالب های ممتاز قطعاً در وقت شما صرفه جویی می کند و منابع طراحی حرفه ای را به شما القا می کند. اما همانطور که می گویند، رم در یک روز ساخته نشده است، بنابراین کار در مهارت های طراحی و یادگیری ترفندهای جدید Adobe XD به شما کمک می کند تا بازی خود را تقویت کنید.
دوره کامل: طراحی واکنشگرا در Adobe XD
به کار خوب خود ادامه دهید و با این کار چند ترفند جدید یاد بگیرید آموزش طراحی ریسپانسیو Adobe XD. در این دوره ویدیویی، نحوه کار با قابلیت های XD را برای ایجاد یک نمونه اولیه شگفت انگیز Adobe XD با ویژگی های واکنش گرا یاد خواهید گرفت. این و بسیاری دیگر از آموزش ها و راهنماهای Adobe XD را در ما بیابید کانال یوتیوب Envato Tuts+.
نحوه متحرک سازی یک گالری عکس در یک نمونه اولیه Adobe XD
برای این آموزش نمونه اولیه Adobe XD ما یک انیمیشن گالری ایجاد می کنیم که برای پیمایش روی آن کلیک کنید. من به شما نشان خواهم داد که چگونه یک گالری وب با این نوع انیمیشن Adobe XD طراحی کنید. بیا شروع کنیم.
1. یک انیمیشن گالری کلیکی ایجاد کنید
دکمه ها ممکن است بصری ترین راه برای راهنمایی کاربر شما برای پیمایش در گالری باشد.
من را مدرسه قدیمی صدا کنید، اما در پایان می خواهید همه کاربران بالقوه شما در هر سنی از انیمیشن های طراحی وب شما استفاده کنند. پس بیایید درست وارد آن شویم!
مرحله 1: به منطقه گالری خود بروید
برای این بخش از آموزش Adobe XD، من روی بوم قالب وب 1920 x 1080 کار خواهم کرد. منطقه ای را در طرح خود انتخاب کنید که می خواهید گالری شما در آن باشد. بیایید بگوییم که این یک گالری عکس “سگ های شاد” در داخل وب سایت یک خانه است.
با ایجاد یک مستطیل شروع کنید و آن را در مرکز Artboard خود قرار دهید. مال من 1152×648 پیکسل است (مطابق با نسبت تصویر 16:9) و دارای لبه های گرد است. این به عنوان ماسکی برای تصاویر ما عمل خواهد کرد.
مرحله 2: تصاویر خود را انتخاب کنید
اینها باید با موضوع وب سایت شما منسجم باشد. در این مورد من با سه عکس سگ شاد کار خواهم کرد عناصر Envato.
از بین سه تا پنج تصویر مختلف برای نمایش در گالری خود انتخاب کنید.
مرحله 3: تصاویر و ماسک خود را در شکل قرار دهید
اولین تصویر گالری خود را انتخاب کنید و آن را روی مستطیل در Artboard خود قرار دهید. در منوی نوار سمت چپ خود، سه نماد پایین را پیدا خواهید کرد، یکی از وسط را انتخاب کنید تا لایه های.
هر دو لایه مستطیل و تصویر خود را انتخاب کنید، برای نمایش منو کلیک راست کرده و انتخاب کنید ماسک با شکل. این باید تصویر شما را با فرمت مستطیل تنظیم کند.
سپس روی لایه به دست آمده دوبار کلیک کنید و نام آن را به “Image 1” تغییر دهید.
مرحله 4: لایه را کپی کرده و تکرار کنید
هنگامی که اولین تصویر را ماسک کردیم، گام بعدی این است که آن لایه را کپی کرده و نام آن را “Image 2” بگذاریم. سپس تصویر دوم خود را انتخاب کرده و آن را در بالای مستطیل خود قرار دهید.
مطبوعات Command + X روی صفحه کلید خود، سپس لایه «Image 2» خود را باز کنید و Command + V تصویر شما در داخل آن لایه به طور خودکار شکل مستطیل شما را می گیرد.
همین روند را تکرار کنید تا تصویر سوم خود را به فرمت گالری اضافه کنید.
مرحله 5: تصاویر را خالی کنید
بین هر تصویر کمی فاصله بگذارید. آنها را به سمت راست خود باز کنید و همان فاصله را بین هر تصویر نگه دارید. من تصاویرم را طوری تنظیم می کنم که 50 پیکسل از هم جدا شوند.
مرحله 6: اضافه کردن متن و دکمه
برای اینکه گالری متحرک خود را برای کاربر واضح نشان دهید، می توانید مقداری متن برای نشان دادن تعداد تصاویر برجسته اضافه کنید. در زیر گالری تصاویرم “تصویر 1/3” را نوشتم.
برای اضافه کردن چند دکمه با فلش، پیشنهاد می کنم یک پلاگین Adobe XD را نصب کنید.
به منوی نوار در سمت چپ خود بروید و نماد پایین را انتخاب کنید. سپس بر روی آن کلیک کنید افزونه ها را کشف کنید و “آیکون” را جستجو کنید. من باها کار کرده ام طراحی آیکن 4 برای مدتی، اما می توانید جایگزین های مختلف ارائه شده توسط XD را امتحان کنید.
سپس نمادی را که می‌خواهید در طرح خود قرار دهید انتخاب کنید. آن را بچرخانید و آن را به تناسب متن و تصاویر تغییر دهید. نام هر لایه را با “چپ” و “راست” تغییر دهید.
مرحله 7: برای هر تصویر یک حالت جدید ایجاد کنید
ما تقریبا اینجا هستیم. بیایید هر سه تصویر، متن پایین و فلش را انتخاب کنیم. در پنل لایه ها روی تمام لایه های انتخاب شده راست کلیک کرده و روی آن کلیک کنید کامپوننت بسازید. این حالت پیش فرض ما خواهد بود.
به منوی سمت راست خود و کنار آن بروید حالت پیش فرض روی علامت مثبت کلیک کرده و انتخاب کنید ایالت جدید. نام این حالت را به “تصویر 2” تغییر دهید.
با انتخاب حالت “تصویر 2″، اجازه دهید آنچه را که در اینجا نمایش داده می شود تنظیم کنیم. متن را به “Image 2/3” تغییر دهید، فلش سمت چپ را به میزان شفافیت 100% برسانید و تصویر دوم خود را در مرکز Artboard قرار دهید.
برای ایجاد حالت سوم برای Image 3، به حالت پیش فرض برگردید و این مراحل آخر را تکرار کنید و تصویر سوم خود را در مرکز Artboard قرار دهید.
مرحله 8: بیایید نمونه اولیه خود را متحرک کنیم!
اکنون سه حالت تصویر متفاوت داریم. به منوی بالا رفته و روی Prototype کلیک کنید. مطمئن شوید که در حالت پیش فرض هستید. سپس در سمت چپ منوی لایه ها، لایه پیکان «راست» را انتخاب کنید.
به منوی سمت راست بروید و روی نماد بعلاوه بالا کلیک کنید تا یک تعامل اضافه شود. سپس، در مقصد “تصویر 2” و روشن را انتخاب کنید تایپ کنید انتخاب کنید متحرک سازی خودکار.
هر چه جایگزین‌های تعامل بیشتری برای پیمایش کاربران خود در نظر بگیرید، بهتر است. در این مورد، ما همان مقادیر تعاملی را به تصویر 2 اضافه می کنیم، بنابراین با ضربه زدن روی تصویر، گالری نیز متحرک می شود.
لایه “Image 2” را انتخاب کنید، یک تعامل اضافه کنید و همان مقادیر پیکان “راست” را تکرار کنید.
در نهایت، همان مراحل را در هر حالت تکرار کنید، از تصویر 2 و سپس تصویر 3 شروع کنید. به یاد داشته باشید که تعاملات را به فلش “چپ” و همچنین تصویر قبلی در گالری اضافه کنید تا کاربر بتواند بین تصاویر به عقب و جلو برود.
برای مشاهده روی نماد پخش در سمت راست بالای صفحه کلیک کنید پیش نمایش دسکتاپ از انیمیشن شما
شما بروید! اکنون می دانید که چگونه یک انیمیشن Adobe XD برای گالری عکس ایجاد کنید.
می خواهید بیشتر بدانید؟
تمرین کامل می‌شود و هرچه اطلاعات بیشتری کسب کنید، طرح‌ها و انیمیشن‌های Adobe XD بهتر به نظر می‌رسند. ما مقاله‌هایی در مورد Figma vs Adobe XD، آموزش‌هایی در مورد نحوه ساخت قاب‌های سیمی Adobe XD، و الگوهای زیادی برای نمونه اولیه Adobe XD بعدی شما داریم.
شما آماده اید!
امیدوارم از این آموزش سریع Adobe XD لذت برده باشید و از این ترفندهای جدید در پروژه طراحی بعدی خود استفاده کنید. تمام منابع الهام بخش و خلاق مورد نیاز خود را پیدا کنید عناصر Envato.
