در هر حوزه ای از دیزاین که کار میکنید ماسک کردن مهم هست.
مثلا شما میخواید یک ادم یا یک شی رو از پس زمینه جدا کنید و در طرح UI/UX یا صفحه آراییتون قرار بدید و اینجاست که ماسک کردن میاد وسط.

این قسمت در مورد Pixel Mask هست که برای عناصری که جزئیات زیادی دارند مثل موی سر انسان کاربرد داره.

قسمت دومش که فردا منتشر میشه Vector Mask هست که در برنامه های وکتور مثل ایلوستریتور، xd، ایندیزاین و حتی خود فتوشاپ استفاده میشه.


همین این قسمت و هم قسمت دوم رو پیشنهاد میدم ببینید.

آموزش ادوبی ایکس دی - ساخت چارت‌ها و نوار پیشرفت دایره ای

by @iHMahmoodi - #BlogPost
_______________________________
https://blog.ihmahmoodi.ir/make-beautiful-looking-rounded-corner-charts-with-adobe-xd-tutorial?feed_id=849&_unique_id=601810290e42d

آموزش جامع CSS: انتخابگرها (قسمت اول)

by @iHMahmoodi - #BlogPost
_______________________________
https://blog.ihmahmoodi.ir/2020/04/13/css-selectors-part-1-tutorial/?feed_id=864&_unique_id=601962e2d0852

آموزش صفر تا صد ماسک کردن در فتوشاپ - وکتور ماسک - قسمت دوم

https://www.youtube.com/watch?v=7dFj6ILaTHE

عضویت در کانال یوتیوب:
https://www.youtube.com/AsteriXarts?sub_confirmation=1

#آموزش #فتوشاپ
@asterixarts

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

_______________________
https://blog.ihmahmoodi.ir/ui-handoff-tools



by @AsteriXarts - #BlogPost

آموزش جامع CSS - چطور یک منو بار عمودی در طراحی کنیم؟

by @AsteriXarts - #BlogPost
--------------------------------------------------
https://blog.ihmahmoodi.ir/css-vertical-menu?feed_id=894&_unique_id=601bb51c8f6dd

آموزش جامع CSS – چطور یک مثلث درست کنیم؟ - قسمت 33

https://www.youtube.com/watch?v=ER4kDD6NxwM

عضویت در کانال یوتیوب:
https://www.youtube.com/AsteriXarts?sub_confirmation=1

#آموزش #css
@asterixarts

بعضی از دوستان سوالشون این هست که CSS چه ربطی به طراحی داره؟

اینجا من مسیری که من برای رسیدن به مهارت هایی که دارم رو براتون میگم شاید جالب باشه براتون

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

اینقدر با این برنامه ور رفتم تا فهمیدم هر قسمت چه کاری انجام میده
از کجا شروع شد این قضیه؟ دوستم یک دایره درست کرده بود و دور اون دایره یک نور قرمز خوشگل گذاشته بود، بهش گفتم اینو چطور درست کردی؟ گفت با فتوشاپ! و همون شروع انگیزه من برای یادگیری فتوشاپ و طراحی بود ( یک دایره با نور قرمز که بعدا فهمیدم با ویژگی Outer Glow فتوشاپ درستش کرده)

روند یادگیری من همینطور ادامه پیدا کرد و مدتی هم با 3D Max کار کردم ولی چون مدرسه میرفتم و فشار خانواده برای درس خواندن و کنکور یواش یواش بیخیالش شدم و تمرکزم رو گذاشتم روی همون فتوشاپ

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

همینطور این دوتا با هم ادامه پیدا کرد تا رسیدم ترم های آخر دانشگاهم و باید پروژه تحویل میدادم، پس رفتم PHP هم یاد گرفتم و با چیزایی که قبلا بلد بودم ترکیبش کردم و پروژه دانشگاهم رو یک CMS ساده نوشتم و تحویل دادم. دیگه خودتون میتونید نمره ام رو حدس بزنید 😊

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

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

اینجا نگاهی به گذشته کردم و دیدم من چه مهارت هایی رو دارم
1-طراحی گرافیک
2-کدنویسی صفحات وب
3-صفحه آرایی

بعد به طراحی وبسایت و اپلیکیشن تغییر مسیر دادم و یواش یواش اطلاعاتم رو زیاد کردم.
اینجا اطلاعاتی که قبلا من در حوزه طراحی گرافیک، کدنویسی صفحات وب و صفحه آرایی داشتم که شامل رنگ، Layout و ستون بندی صفحات وب، تایپوگرافی در صفحه آرایی و ... همه و همه به کمک من اومدن تا بتونم با سرعت و مزیت رقابتی بیشتری نسبت به دیگران حرکت کنم.
مثلا من در طراحی وبسایت یا اپلیکیشن، از توانایی و نکاتی که در تایپوگرافی در ایندیزاین یاد گرفتم استفاده می کنم یا می دونم که کجا باید یک قسمت رو طراحی کنم که کدنویس هم بتونه اون رو کد بزنه (HTML+ CSS)

حالا با توجه به این توضیحات خیلی خلاصه از سال های فعالیت و عمر من، شما قرار نیست همه این کارها رو یاد بگیرید اما یادگیری بخش های مختلف اینا باعث میشه که شما ویژگی های منحصر بفردی در کار کردن داشته باشید.

اینا رو نوشتم که بدونید اطلاعات و فیلم هایی که من منتشر میکنم بی ربط به همدیگه نیستن

نمونه کارهای صفحه آراییم رو برای ایده گرفتن دیگر طراحان در یک اکانت اینستاگرام قرار دادم که میتونید از لینک زیر بهشون دسترسی داشته باشید
https://instagram.com/asx.layout

نمونه کارهای UI/UX هم از طریق لینک های زیر در دسترستون هست
https://instagram.com/ihmahmoodi
یا لینک های زیر
https://dribbble.com/ihmahmoodi
https://behance.net/ihmahmoodi
https://instagram.com/asterixarts


خوشحال میشم داستان شما رو در قسمت نظرات بخونم.

#تجربه @asterixarts

نمونه‌کار: رابط کاربری وبسایت آژانس مسافرتی و گردشگری

by @iHMahmoodi - #BlogPost
_______________________________
https://blog.ihmahmoodi.ir/fox-travel-agency-ui-ux-showcases?feed_id=939&_unique_id=601ea9f317e35

آموزش جامع Adobe Xd - ساخت شکل های مختلف و آیکان با Pathfinder و چیدمان عناصر – قسمت پنجم

https://www.youtube.com/watch?v=NHYhRCWjxnc

عضویت در کانال یوتیوب:
https://www.youtube.com/AsteriXarts?sub_confirmation=1

#آموزش #xd
@asterixarts

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

by @iHMahmoodi - #BlogPost
_______________________________
https://blog.ihmahmoodi.ir/ui-design-terms-colors?feed_id=954&_unique_id=601ffba22c0bd

Hierarchy چیست و چطور از آن در طراحی UI/UX و صفحه آرایی استفاده کنیم؟

by @AsteriXarts - #BlogPost
--------------------------------------------------
https://blog.ihmahmoodi.ir/hierarchy-ui-ux-layout-design/?feed_id=969&_unique_id=6020dea86e17e

افزودن پشتیبانی کامل از زبان فارسی در همه برنامه های ادوبی

by @iHMahmoodi - #BlogPost
_______________________________
https://blog.ihmahmoodi.ir/add-persian-rtl-support-to-adobe-products?feed_id=984&_unique_id=60214f3b55ab3

چرا نباید فیلم های آموزشی کانال یوتیوب من رو دانلود کنید؟

دوستان برای ضبط این فیلم های آموزشی که در کانال یوتیوب من می بینید هزینه زمانی و مالی زیادی میشه که اصلا قابل تصور نیست
برای هر کدام از این فیلم هایی که شما می بینید حداقل 1 روز و گاهی یک هفته زمان میبره. چرا؟
مراحلی که من برای ضبط هر فیلمی طی می کنم رو ببینید

1- پیدا کردن موضوع خوب و کاربردی
2- بروز کردن اطلاعات خودم با خواندن مقاله و فیلم های جدید در آن حوزه
3- نوشتن نکات کلیدی فیلمی که میخوام ضبط کنم
4- تمرین برای ارائه موضوع مورد نظر در ساده ترین حالت ممکن
5- آماده سازی وسایل ضبط دوربین و نور پردازی (بیش از 20 میلیون هزینه شده! )
6- بارها ضبط برای گرفتن بهترین نتیجه
7- ضبط فیلم آموزشی روی کامپیوتر
8- ادیت فیلم آموزشی که روی کامپیوتر ضبط شده (اگر فیلمی که شما در یوتیوب می بینید 20 دقیقه باشه نزدیک 1 ساعت زمان ادیتش شده!!)
9- تنظیم صدا و نویز گیری
10- ادیت فیلم دوربین و اضافه کردن تصاویر و فیلم های کمکی که شما در فیلم نهایی می بینید (شاید چند ساعت و گاها چند روز برای جمع آوری تصاویر و فیلم های کمکی زمان میبره!)
11- خروجی گرفتن از فیلم نهایی
12- آپلود فیلم رو یوتیوب (معمولا هر فیلم بسته به زمانش بیش از نیم گیگابایت و گاهی چند گیگابایت هست)
13- نوشتن توضیحات و تیتر و کلید واژه های فیلم + طراحی کاور فیلم!
14- انتشار

این 14تا مرحله ای که میبینید بصورت خلاصه نوشتم و گاها خیلی طول میکشه و طاقت فرساست و اصطحکاک وسایل و بدن خودم رو هم در نظر نگرفتم!

حالا چرا نباید دانلود کنید؟
فرض کنید فیلمی که من منتشر می کنم 20 دقیقه هست و بعد از یک هفته آمار یوتیوب میزنه 200 نفر فیلمت رو دیدن اما کل مجموع تماشای فیلم 400 دقیقه هست به جای 4000 دقیقه!
اون 200 نفر هم نه کسی فیلم رو لایک میکنه و نه نظر میگذاره.

اینجا مشکلی که پیش میاد یوتیوب فک نمیکنه که شما فیلم رو دانلود کردی، فک میکنه شما اومدی 1 دقیقه فیلم رو دیدی برات جذاب نبوده و رفتی
اینطور میشه که فکر میکنه فیلم خوب نبوده و در نتیجه دیگه اون رو پیشنهادش نمیده به هیچکس و دفنش میکنه.

اتفاقی هم که برای من میافته فک میکنم کسی به این فیلم ها علاقه نداره و کلا بیخیال موضوع میشم و یا کلا بیخیال تولید محتوای آموزشی رایگان میشم.

نتیجه نهایی: می دونم نمیتونم شما رو مجبور به کاری بکنم اما لطفا و خواهشا تنها کاری که شما باید بکنید اینه که فیلم های من رو در داخل خود یوتیوب ببینید که انگیزه تولید محتوا داشته باشم.

من از شما برای این فیلم ها هزینه ای دریافت نمی کنم و کاملا رایگان در اختیار شما قرار گرفتن. (هر چند شما می تونید از طریق این لینک از من حمایت مالی کنید)

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

به صورت خلاصه: درازای این محتوای آموزشی رایگان و با کیفیت، فقط با دیدن اونا در یوتیوب و به اشتراک گذاریشون از من حمایت کنید.

خیلی متشکرم که من رو درک میکنید و سعی میکنید فیلم هام رو در یوتیوب ببینید.

نمونه ای از ادیت یکی از فیلم هام

فیلمی که امشب منتشر میشه: تئوری رنگها از صفر در دیزاین
از صبح تا الان داشتم ویرایش ضبط کامپیوتریش تنها رو انجام میدادم

لطفا فقط از طریق خود یوتیوب تماشا کنید

آموزش صفر تا صد تئوری رنگ ها در دیزاین ( رابط کاربری - طراحی گرافیک ) - قسمت اول

https://www.youtube.com/watch?v=V-QLCM0q0Do

----------------------
عضویت در کانال یوتیوب:
https://www.youtube.com/AsteriXarts?sub_confirmation=1

#آموزش #رنگ
@asterixarts

با تشکر از شما که در یوتیوب فیلم را می بینید و با لایک و نظرتون من رو در تولید محتوای بهتر راهنمایی می کنید.

چطور در CSS چندین تصویر به پس زمینه عنصری بدهیم؟

by @AsteriXarts - #BlogPost
--------------------------------------------------
https://blog.ihmahmoodi.ir/css-multi-backgrounds/?feed_id=1014&_unique_id=6023bff6ab6ae