دسته Tutorial – آموزش

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

چطور در CSS با ویژگی Background تصویر پس زمینه به عنصری بدهیم؟
Pseudo-elements ها در CSS کلمات کلیدی هستند که به انتخابگرها برای انتخاب قسمتی از محتوای عنصر اضافه می شوند. با برخی از این انتخابگرها می توان محتوای مجازی برای عناصر بوجود آورد و آنها را در CSS هدف قرار داد. در ادامه لیست تمام pseudo-elementها آمده است و می توانید برای بررسی دقیق هر کدام به صفحه مخصوص به آن مراجعه کنید.

آموزش متحرک کردن آیکان ها در Adobe XD

آموزش متحرک کردن آیکان ها در Adobe XD
در این قسمت از آموزش طراحی UI/UX با Adobe Xd قصد دارم با استفاده از ویژگی جدید که به ایکس دی در سال 2021 به آن اضافه شده آیکان ها را متحرک کنیم و در واقع میکرو اینتراکشن های مختلفی را برای عناصری که با استفاده از قابلیت Border یا Stroke طراحی شده اند، ایجاد کنیم.

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

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

Pseudo-elements ها در CSS چی هستند و چه کاربردی دارند؟

Pseudo-elements ها در CSS چی هستند و چه کاربردی دارند؟
Pseudo-elements ها در CSS کلمات کلیدی هستند که به انتخابگرها برای انتخاب قسمتی از محتوای عنصر اضافه می شوند. با برخی از این انتخابگرها می توان محتوای مجازی برای عناصر بوجود آورد و آنها را در CSS هدف قرار داد. در ادامه لیست تمام pseudo-elementها آمده است و می توانید برای بررسی دقیق هر کدام به صفحه مخصوص به آن مراجعه کنید.

چطور مشتریان خارجی خوب پیدا کنیم و چگونه به آنها قیمت درست بدهیم؟ ویژه طراحان – قسمت سوم

چطور مشتریان خارجی خوب پیدا کنیم و چگونه به آنها قیمت درست بدهیم؟ ویژه طراحان - قسمت سوم
در این قسمت من و مرضیه نادعلی که در حال حاضر ساکن بارسلونا هست و سالهاست که با مشتریان خارجی بصورت حرفه ای کار می‌کند می‌خواهیم به این بپردازیم که چطور کسانی که داخل ایران هستن بتوانند کار و مشتری خارجی بگیرند و چطور درآمد ارزی داشته باشند.

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

آموزش ابزار متن و فارسی نویسی در Adobe Xd - قسمت سوم
در قسمت سوم آموزش جامع طراحی UI/UX با Adobe Xd به سراغ ابزار پرکابرد متن یا Text رفتم تا نحوه کار کردن و همه تنظیمات مربوط به آن بعلاوه نکاتی در مورد فارسی نویسی به شما آموزش دهم.

آموزش جامع CSS – چطور دکمه بسازیم؟

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

چطور مشتری با ارزش پیدا کنیم و چگونه به آنها قیمت درست بدهیم؟ ویژه طراحان – قسمت دوم

چطور مشتری خوب پیدا کنیم و چگونه به آنها قیمت درست بدهیم؟ ویژه طراحان - قسمت دوم
در این قسمت من و مسعود گروسیان وارد جزئیات چگونگی ارتباط با مشتریان و شیوه های قیمت گذاری می شویم و نکاتی مهمی را برای پیدا کردن مشتریان با ارزش و خوب و همچنین قیمت درست دادن بیان می کنیم.

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

آموزش طراحی شکل های مختلف و تنظیمات آنها در Adobe Xd - قسمت دوم
در قسمت دوم از آموزش طراحی UI/UX با Adobe Xd من شکل های مختلفی که در این برنامه وجود دارد را رسم و نکات و تنظیمات هر کدام از آن ها را بررسی می کنم. در طراحی رابط کاربری ما با شکل های ساده ساختار و ظاهر کلی سرویس مورد نظرمان که می تواند وبسایت، اپلیکیشن و یا هر نوع دیگری باشد را طراحی می کنیم.

چطور مشتری خوب پیدا کنیم و چگونه به آنها قیمت درست بدهیم؟ – قسمت اول

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

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

آموزش جامع Adobe XD - محیط ظاهری و آرتبورد ها - قسمت اول
در یک سری ویدیوهای دنباله دارم من میخواهم طراحی UI/UX را با استفاده از Adobe XD به شما آموزش دهم. در قسمت اول این سری من ابتدا نحوه دانلود و نصب ادوبی ایکس دی را به شما آموزش می دهم و سپس به سراغ معرفی قسمت های مختلف Adobe XD می روم و در ادامه نحوه ساخت و کاربرد آرتبورد های مختلف را به شما آموزش میدهم. سپس بعضی از تنظیمات مختلف در پنل Inspector را معرفی و در نهایت با محوه فعالسازی و استفاده از خطوط راهنمای مختلف و همچنین ستون بندی آرتبورد این قسمت را ادامه می دهم.

10 افزونه کاربردی مرورگر برای طراحان رابط کاربری UI

10 افزونه کاربردی مرورگر برای طراحان رابط کاربری UI
در این آموزش من 10 افزونه فوق العاده را برای مرورگرهای کرومیوم یعنی کروم و مایکروسافت اج به که برای همه ی طراحان به خصوص طراحان رابط و تجربه کاربری ( UI/UX ) خیلی کاربردی است را به شما معرفی و نحوه استفاده از آن ها را آموزش می دهم.

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

چطور در CSS چندین تصویر به پس زمینه عنصری بدهیم؟
در ادامه آموزش قبل می خواهیم اینبار چند تصویر را به پس زمینه یا Background یک عنصر بدهیم. این کار براحتی قابل انجام هست و کافی است شما به جای دادن یک آدرس، دو یا چند آدرس را به عنوان url در پراپرتی background معرفی کنید که در فیلم کاملا متوجه نحوه نوشتن آن می وشوید.

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

Hierarchy یا هایراکی چیست و کاربرد آن در طراحی UI/UX و صفحه آرایی
در این قسمت به سراغ اصل Hierarchy یا سلسله مراتب در دیزاین رفتم به شما نشان می دهم که چطور از آن برای اولویت دادن به عناصر داخل صفحه استفاده کنید. از Hierarchy در همه‌ی حیطه های طراحی از قبیل طراحی رابط کاربری UI/UX ، صفحه آرایی ، طراحی گرافیک مثل طراحی پوستر و... بسیار استفاده می شود.

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

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

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

آموزش صفر تا صد ماسک کردن در فتوشاپ - قسمت اول
شما در هر حوزه ای از طراحی که کار کرده باشید، حتما نام "ماسک کردن" را شنیده اید. در این قسمت من از صفر تا صد ماسک کردن در فتوشاپ را به شما آموزش می دهم. ماسک کردن در واقع این امکان رو به ما می‌دهد که قسمتی از تصویر را پنهان یا ظاهر کنیم و این به این معنی است که دیگر شما نیازی به پاک کردن قسمتی از تصویر که در حال حاضر به آن نیاز نیست ندارید. در نتیجه استفاده از ویژگی ماسک در فتوشاپ شما را در استفاده از ابزار پاک کن یا eraser بی نیاز می کند.

آموزش ابزارهای به اشتراک گذاری طرح رابط کاربری UI با برنامه نویس

آموزش ابزارهای به اشتراک گذاری طرح رابط کاربری UI با برنامه نویس
در این فیلم من به شما نشان می دهم که چطور طراحی رابط کاربری ( UI/UX ) که انجام داده اید را در اختیار برنامه نویس با کارفرما قرار دهید تا بتوانند کد های آن را بنویسند و یا اینکه بر روی روند طراحی نظارت داشته باشند.

انقلاب هوش مصنوعی در ویژگی های جدید فتوشاپ 2021

انقلاب هوش مصنوعی در ویژگی های جدید فتوشاپ 2021
شرکت ادوبی در جدیدترین نسخه فتوشاپ 2021 ویژگی های زیادی با قدرت هوش مصنوعی اضافه کرده و من در این آموزش میخواهم کارکرد این ویژگی های قدرتمند را به شما نشان دهم. شما با استفاده از این ویژگی ها دیگر نیاز نیست زمان زیادی را برای تنظیم و طراحی عکس های خود کنید و فقط با چند کلیک در فتوشاپ 2021 این کار انجام می شود.

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

لندینگ پیج چیست و چطور باید رابط کاربری UI/UX آن را طراحی کرد؟
در این فیلم من همه ی ویژگی هایی که برای داشتن یک لندینگ پیج با نرخ بالای تبدیل نیاز دارید را به شما آموزش می دهم. Landing Page در واقع صفحاتی هستند که برای یک هدف طراحی می شوند و آن هم تبدیل یوزر به دنبال کننده یا مشتری ماست.