آموزش طراحی آیکان با Pathfinder در Adobe Xd – قسمت پنجم

در قسمت پنجم آموزش جامع Adobe Xd به سراغ دستورات Boolean یا Path Finder می روم که بوسیله آن شما می توانید شکل های جدیدی در Xd طراحی کنید. فرض کنید که شما قصد دارید قسمتی از NavBar را برای دکمه Add به صورت 6 ضلعی در بیاورید.
در این صورت شما دو راه دارید: 1- راه اول این است که کلا از صفر با ابزار Pen شکل مورد نظرتان را بکشید 2- و راه دوم به این صورت است که از ترکیب یک مستطیل و یک شکل 6 وجهی به نتیجه مورد نظر خودتان برسید که راه سریع و راحت تری است.
برای این کار شما دو شکل را می کشید و با دستورات Boolean آن ها را از هم کم می کنید و در نتیجه شکل مورد نظر شما درست می شود.
این یکی از کاربرد های دستورات Boolean یا PathFinder در Adobe Xd است و شما برای طراحی آیکان و لوگو نیز از Path Finder خیلی استفاده می کنید.

در بخش دوم فیلم به سراغ Alignments های مختلف Adobe Xd می روم که شما به وسیله آن قادر هستید تا اشکال یا عناصر مختلف را نسبت به یکدیگر تنظیم و جا به جا کنید.
چیدمان ها یا Alignment ها در Xd برای داشتن یک طراحی رابط کاربری UI تمیز و حرفه ای و ساختارمند بسیار به ما کمک می کنند.
فرض کنید که شما میخواهید فاصله 8 دکمه را سریع تنظیم کنید، کافی است هر 8 دکمه را انتخاب کنید و با Alignment و با یک کلیک فاصله بین هر کدام را بصورت مساوی تنظیم و تقسیم کنید.

 

در آموزش طراحی آیکان و چیدمان عناصر در Xd چه چیزهایی یاد می گیریم؟

درقسمت پنجم آموزش جامع Adobe Xd  شما کار با دستورات Boolean یا Path Finder را یاد می گیرید که بوسیله آن قادر هستید شکل های مختلف را با هم ترکیب یا از هم کم کنید تا شکل جدیدی به وجود بیاورید و در نهایت نکاتی در مورد Alignmetns یا چیدمان های مختلف xd که مثلا برای راستچین کردن تعدادی عناصر یا تقسیم فاصله یکسان بین چند عنصر به کار می رود را به شما آموزش می دهم.

 

  1. معرفی حالت های مختلف boolean یا Pathfinder در xd
  2. طراحی یک خانه ساده با دستورات Pathfinder
  3. طراحی آیکان ماه و پروفایل
  4. چیدمان عناصر مختلف در راستای یک شی دیگر
  5. تقسیم فاصله یکسان در بین چند شی
  6. و…

 

(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)

لینک آموزش در یوتیوب

آموزش طراحی آیکان با Pathfinder در Adobe Xd – قسمت پنجم

 

قسمت های دیگر آموزش Adobe Xd را در کجا ببینیم؟

شما می توانید تمام قسمت های آموزش Adobe Xd را در بخش آموزش Adobe Xd وبلاگ و یا اینکه در لیست پخش آن در یوتیوب ببینید.

همچنین در آخر همین پست تعدادی از لینک های مرتبط آموزش ادوبی ایکس دی نیز قرار داده شده است.

 

 

طراحی رابط کاربری ( UI/UX ) را از صفر از کجا یاد بگیرم؟

شما می توانید با عضویت در کانال یوتیوب من آموزش های دیگر طراحی رابط و تجربه کاربری ( UI / UX ) را دنبال و یاد بگیرید.

عضویت در کانال آموزشی یوتیوب : Youtube.com/AsteriXarts

اگر سوالی در مورد طراحی رابط کاربری UI داشتید، می توانید در قسمت نظرات بپرسید تا به آن ها جواب دهم.

 

 

نمونه کارهای طراحی رابط و تجربه کاربری ( UI/UX )

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

همچنین می توانید نمونه کارهای من را ببینید و من را در این شبکه ها دنبال کنید.

  1. Dribbble.com/iHMahmoodi
  2. Behance.net/iHMahmoodi
  3. Instagram.com/iHMahmoodi

 

در صورتی که سوالی داشتید در قسمت نظرات بپرسید و حتما جواب خواهم داد.

عضویت در کانال آموزشی: Youtube.com/AsteriXarts

در صورتی که این ویدیو برای شما مفید بود, لطفا با دوستانتون در شبکه های اجتماعی به اشتراک بگذارید.

 

 

لینک آموزش ها و مقالات فارسی دیگر طراحی رابط کاربری ( UI/UX ) در وبلاگ من:

آموزش جامع طراحی Adobe Xd – محیط ظاهری و آرتبورد ها – قسمت اول

آموزش طراحی شکل های مختلف و تنظیمات آنها در Adobe Xd – قسمت دوم

آموزش ابزار متن و فارسی نویسی در Adobe Xd – قسمت سوم

آموزش کار با تصاویر و ماسک کردن در Adobe Xd – قسمت چهارم

آموزش Adobe XD – معرفی 5 پلاگین فوق العاده کاربردی – قسمت دوم

معرفی 5 پلاگین فوق العاده کاربردی برای Adobe Xd- قسمت اول

آموزش Adobe Xd -‌ یک دکمه برای همه جا در طراحی رابط کاربری

10 افزونه فوق العاده کاربردی برای طراحان رابط کاربری

آموزش UI/UX : طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟

آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟

چطور طرح‌ رابط کاربری را در اختیار برنامه نویس و کارفرما قرار دهیم؟

لندینگ پیج چیست و چطور باید رابط کاربری UI/UX آن را طراحی کرد؟

اصطلاحات طراحی رابط کاربری – بخش اول: رنگها

آموزش UI/UX : اصول طراحی رابط کاربری برای تلویزیون

طراحی رابط کاربری موبایل 101: pixels, points و resolutions