طراحی لوگو با Adobe XD

طراحی لوگو با Adobe XD

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

بیایید با ایجاد لوگوی برگ برای اپلیکیشن Ethical Eater شروع کنیم. اگر اپلیکیشن Activist را انتخاب کرده‌اید، به آموزش دوم مراجعه کنید.

مرحله 1: از ابزار Artboard (که در نوار ابزار سمت چپ قرار دارد) برای کشیدن یک آرت‌بورد کوچک استفاده کنید. اندازه‌ی آرت‌بورد را در نوار Properties Inspector (که در نوار سمت راست قرار دارد) به 200*200 پیکسل تغییر دهید. فراموش نکنید که نام لایه‌ی خود را به “Leaf Logo” تغییر دهید.

مرحله 2: ابزار Rectangle را از نوار ابزار انتخاب کنید، کلید Shift را نگه دارید (به مربع نیاز داریم) و به صورت مورب بکشید. برای شروع، ابعاد 110*110 پیکسل را در نظر بگیرید. شما می‌توانید ارتفاع و عرض مربع را در Properties Inspector ببینید (و تنظیم کنید).

مرحله 3: روی یکی از دستگیره‌های ویرایش میزان گردی مربع کلیک کنید و آن را به سمت مرکز مربع بکشید تا مربع به یک مربعی گرد با گردی 33 پیکسل تبدیل شود (می‌توانید مقدار گردی مربع را در نوار Properties Inspector مشاهده کنید).

مرحله 4: روی لایه‌ی Rectangle در پنل لایه‌ها کلیک راست کنید، آن را کپی کنید و دو مربع گرد را مطابق شکل زیر روی هم قرار دهید:

مرحله 5: هر دو لایه‌ی Rectangle را از پنل لایه‌ها انتخاب کنید (برای انتخاب هر دو، Shift را فشار دهید) و عملیات ”Boolean Intersect" را از Properties Inspector اعمال کنید. 

مرحله 6: یک مربع گرد کوچک مانند تصویر پایین با ابعاد 38 پیکسل ایجاد کنید. میزان گردی آن را روی 14 پیکسل بگذارید.

شما باید چیزی مشابه این داشته باشید:

مرحله 7: مستطیل گرد کوچک جدید را کپی کنید و آن را همانطور که در پایین نشان داده شده است قرار دهید.

مرحله 8: اکنون این دو مربع گرد را انتخاب کرده و عملیات ”Boolean Intersect" را اعمال کنید. در پایان این مرحله، لوگوی برگ اپلیکیشن Ethical Eater خودتان را خواهید داشت! 

مرحله 9: از پنل لایه‌ها، شکل بزرگ‌تر را از بین دو شکل انتخاب کنید. سپس به Fill در Properties Inspector بروید. پس از انتخاب، یک پالت رنگ برای انتخاب به شما نمایش داده می‌شود. بعداً در مورد رنگ‌ها بحث خواهیم کرد، بنابراین فعلاً سیاه یا خاکستری را انتخاب کنید.

مرحله10 : با انتخاب دو شکل در پنل لایه‌ها، کلیک راست کرده و با انتخاب Group از منوی کشویی، لایه‌ها را گروه‌بندی کنید.

تبریک می‌گوییم، شما همین الان اولین لوگوی خود را طراحی کردید! کار با اشکال برای اولین بار می‌تواند کمی دلهره‌آور به نظر برسد، اما درک عملیات Boolean در عمل، مهارت فوق‌العاده‌ای است.

حال، بیایید نگاهی به نحوه‌ی ایجاد لوگوی حباب چت برای اپلیکیشن Activist بی‌اندازیم. این لوگو کمی ساده‌تر است.

مرحله 1: برای سریع‌تر ایجاد کردن آرت‌بوردها، پروژه‌‌ی جدیدی را از طریق صفحه‌ی اصلی Adobe XD شروع کنید و "ابعاد دلخواه" را انتخاب کنید. ارتفاع و عرض را روی 200 پیکسل تنظیم کنید.

مرحله 2: ابزار بیضی را از نوار ابزار انتخاب کنید و همزمان، کلید Shift را نگه دارید و به صورت مورب بکشید تا یک دایره رسم شود. سپس، ابزار چندضلعی را انتخاب کنید و همزمان، کلید Shift را نگه دارید و یک مثلث متساوی الاضلاع بکشید.

مرحله 3: مثلث را مانند تصویر زیر در سمت چپ پایین دایره قرار دهید:

مرحله 4: این دو لایه را از پنل لایه‌ها انتخاب کنید و عملیات "Boolean Union" را اعمال کنید. در نهایت، به چیزی شبیه به این خواهید رسید:

مرحله 5: آیا همین حالا هم مانند یک حباب چت به نظر نمی‌رسد؟ بیایید جلو برویم و مقدار Border این حباب را افزایش دهیم. شکل را انتخاب کنید، به تنظیمات Border در Properties Inspector بروید و مقدار Border را به شش پیکسل افزایش دهید.

لوگوی حباب چت شما حالا آماده است!

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