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

- توجه: بخش لینک سازی و بخش کاملا آزاد ایجاد شد تا کاربران برای لینک سازی مطالب و موضوعات مرتبط با سایت خودشون رو با بقیه و موتورهای جستجو به اشتراک بگذارند توجه کنید اگر کاربری روزانه بالای 5 مطلب و لینک ارسال نمایید اکانت کاربری مسدود خواهد شد.

- توجه: دوستان لطفا سوالات خود را از طریق شماره تماس موجود در سایت اعلام نکنید با پیامک یا تلگرام و... این شماره برای تماس های ضروری مشتریان فروشگاه قرار گرفته است.

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


تبلیغات
ads
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
نحوه طراحی یک رابط کاربر در فتوشاپ
#1
نحوه طراحی یک رابط کاربر در فتوشاپ
آموزش طراحی سایت
 

 

[تصویر:  %D9%86%D8%AD%D9%88%D9%87-%D8%B7%D8%B1%D8...%D9%BE.jpg]


ما بر روی ایجاد یک نوار لغزنده برای "فیلتر"   کردن و یک  دکمه تماس تمرکز خواهیم کرد. سعی خواهیم کرد که با استفاده از چند تن آبی با چند رنگ خاکستری، کنتراست رنگی را به دست آوریم. 


همچنین با اضافه کردن جزئیات کوچک، کیفیت کلی و ظاهر رابط کاربری را بهبود می بخشیم. این آموزش برای طراحان در  تمام سطوح مناسب است، مخصوصا برای مبتدیان و کاربران سطح متوسط با زمان تقریبی 20 تا 40 دقیقه طراحی را میتوانند اتمام کنند. [تصویر:  step-11.png]
[تصویر:  step-2.png]شروع ایجاد این رابط کاربر با ایجاد یک سند جدید: 900px width؛ ارتفاع 500px 
[تصویر:  step-4.png]
با استفاده از ابزار مربع گرد (U) یک مستطیل سفید و گرد ایجاد کنید.ارتفاع 310 پیکسل عرض و 160 پیکسل است. بعضی از سایه ها را به آن اعمال کنید، همانطور که در تصویر نشان داده شده است.
[تصویر:  step-5.png]
سایه داخلی سفید را اضافه کنید.
[تصویر:  step-6.png]
 درخشش بیرونی ملایم و سایه کم، یک سایه زیبا در اطراف شکل ایجاد می کند.
[تصویر:  step-7.png]
stroke را به شکل اضافه کنید. یک رنگ خاکستری نازک (# b2b0b0). این مستطیل "پایه" خواهد بود که برای لایه های بعدی روی آن قرار می گیرد .
یک شکل مستطیلی جدید ایجاد کنید، باید عرض و ارتفاع آن 10 پیکسل بیشتر باشد. اطمینان حاصل کنید که مستطیل جدید دقیقا بر روی قسمت بالای قسمت قبلی قرار دارد و سپس سایه ای سیاه به آن اعمال می کند.

حالت Blend Mode را به: Multiply، Opacity تا 25٪، Distance to 1، Spread و Size را به 0 تغییر دهید. این لایه را کپی کنید و سپس 2 پیکسل حرکت دهید. آخرین لایه را یک بار دیگر کپی کنید و آن را نیز 2 پیکسل بالا ببرید. در حال حاضر شما یک "پشته" خوب از مستطیل های طراحی شده بر روی یک دیگر دارید.



وقت آن است که یک شکل جدید ایجاد کنیم و با رنگ خاکستری رنگ کنیم، دوباره با استفاده از ابزار مستطیل گرد (U)

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

stroke را با رنگ کمی تیره تر اعمال کنید که عبارت است از: # c4b8b5

یک مربع ساده 12x12 پیکسل ایجاد کنید و آن را در نوار لغزنده قرار دهید.










مقالات مرتبط
20 نمونه آموزشی برای ویرایش عکس در فتوشا
چگونه می توان آگهی بنر را در فتوشاپ Adobe ایجاد کرد

اصول طراحی قالب خبرنامه ایمیلی همراه با مثال
  پاسخ
تبلیغات
ads


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  نکات مهم درباره طراحی سایت آژانس مسافرتی sida 0 15 ۱۳۹۹-۰۳-۰۶، ۰۴:۳۱ ب.ظ
آخرین ارسال: sida
  طراحی طلا و جواهر از گذشته تا امروز samira 0 14 ۱۳۹۹-۰۲-۱۷، ۰۳:۰۸ ب.ظ
آخرین ارسال: samira
  طراحی دکوراسیون داخلی یا بازسازی منزل و محل کار bhrprn 3 519 ۱۳۹۹-۰۲-۱۳، ۰۳:۰۷ ب.ظ
آخرین ارسال: BAHARN
  [معرفی سایت] نحوه پذیرش دانشجویان بین المللی در کشور ترکیه charming 0 17 ۱۳۹۹-۰۲-۱۰، ۱۱:۵۴ ب.ظ
آخرین ارسال: charming
  طراحی داخلی امری مهم در معماری samira 0 15 ۱۳۹۹-۰۲-۰۹، ۰۴:۱۰ ب.ظ
آخرین ارسال: samira
Photo نمونه هایی جذاب از طراحی داخلی (حتما ببینید) samira 0 26 ۱۳۹۹-۰۲-۰۳، ۰۱:۵۴ ب.ظ
آخرین ارسال: samira
  درباره موتور جستجو کاربر محور mose 0 19 ۱۳۹۹-۰۱-۳۱، ۰۱:۳۹ ب.ظ
آخرین ارسال: mose
  آموزش فتوشاپ kami66 1 735 ۱۳۹۹-۰۱-۲۷، ۰۷:۰۴ ب.ظ
آخرین ارسال: rezahaghi321
  طراحی سایت و بهینه سازی نرخ تبدیل magbot1 0 15 ۱۳۹۹-۰۱-۲۶، ۰۹:۲۰ ب.ظ
آخرین ارسال: magbot1
  طراحی طلا و جواهر با ماتریکس samira 0 25 ۱۳۹۹-۰۱-۲۲، ۰۸:۳۹ ب.ظ
آخرین ارسال: samira

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
تبلیغات
ads