آموزش مقدماتی طراحی با Adobe XD

به نام خداوند بخشنده مهربان با آموزش صفر تا صد طراحی کردن دکمه در وب‌سایت در خدمت شما عزیزان هستیم. فرایند طراحی کردن به این صورت است که ابتدا طرح را در نرم افزار Adobe xd ایجاد می‌کنیم، سپس طرح را با استفاده از دستورات CSS و تگ‌های HTML در صفحه وب‌سایت ایجاد می‌کنیم. با ما همراه باشید تا این دکمه کاربردی را آموزش ببینید و ایجاد کنید.

شروع طراحی با نرم افزار Adobe XD

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

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

ایجاد کردن رنگ پس‌زمینه در Adobe XD

در حال حاضر می‌توانید رنگ دلخواه خود را که به عنوان رنگ اصلی دکمه است وارد کنیم، وارد بخش blend mode گزینه fill می‌شویم. پیشنهاد می‌کنم رنگ فوق را برای رنگ اصلی دکمه استفاده نمایید. در نظر داشته باشید که اگر می‌خواهید در نرم افزار Adobe XD قسمتی از وب‌سایت رنگ نداشته باشد، باید تیک مربوط به گزینه fill را حذف کنید.

#130f40

گردن کردن حاشیه در Adobe XD

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

برای اینکه حاشیه دکمه خودمان را در نرم افزار Adobe XD گرد کنیم باید به بخش blend mode مراجعه کنید، با کلید کردن روی گزینه different radius for each corner می‌توانید به صورت اختصاصی گوشه‌ها را گرد کنید. اگر می‌خواهید طرحی که ایجاد کرده اید تمام قسمت‌های آن گرد شود، باید از گزینه same radius for all corners استفاده نمایید.

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

اضافه کردن متن در نرم افزار Adobe XD

با استفاده از ابزار Text که در نوار سمت راست قرار دارد می‌توان متن جدیدی را اضافه کرد. در حال حاضر متن جدید اضافه شده است ولی امکان دارد که از اندازه آن و یا سبک آن رضایت نداشته باشید. تنها کافی است روی متن کلیک کنید، بعد از کلیک کردن روی متن متوجه آن می‌‎شوید که نوار سمت راست فعال شد، با استفاده از ابزار‌های بخش text در نوار سمت راست می‌‌توانید متن خود را به درستی تنظیم کنید.

امیدوارم از این آموزش استفاده کرده باشید و توانسته باشید دکمه را ایجاد کنید نحوه تبدیل آن را نیز در آپدیت بعدی همراه با ویدیو هر دو جلسه یعنی هم طراحی با نرم افزار Adobe XD و هم تبدیل HTML & CSS قرار داده خواهد شد.