طراحی صفحات وب در برنامه فتوشاپ

سلام میخوای یاد بگیری که چطور با استفاده از فتوشاپ یک صفحه وب طراحی کنی ؟

برای این آموزش باید یک سند جدید در ابعاد زیر بازکنیم

 

طراحی صفحات وب در برنامه فتوشاپ

 

و از قسمت view گزینه ی show و grid رو انتخاب میکنم حالا یک صفحه ی پیش فرض فتوشاپ از گرید ها به من میده .

 

طراحی صفحات وب در برنامه فتوشاپ

 

امامن از منوی edite و گزینه ی preferences و Guid… رو انتخاب میکن و اعدادش رو مانند شکل زیر قرار میدم .

 

طراحی صفحات وب در برنامه فتوشاپ

 

طراحی صفحات وب در برنامه فتوشاپ

 

حالا از اینجا یک سند جدید ایجاد میکنم .

 

طراحی صفحات وب در برنامه فتوشاپ

 

و با ابزار rectangel tool یک مستطیل به اندازه ی دو تا خونه ی بالایی این گرید ها میکشم

 

طراحی صفحات وب در برنامه فتوشاپ

 

و کد رنگی اونو عدد 595a55  میدم .

 

طراحی صفحات وب در برنامه فتوشاپ

 

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

 

طراحی صفحات وب در برنامه فتوشاپ

 

باز یک سند جدید و با همون ابزار یک مستطیل دیگه از کنار یه خونه جا میزارم و از این طرف ۸تا خونه رو میکشم .و اینبار رنگشو روی عدد 9d8e7e قرار میدم .

 

طراحی صفحات وب در برنامه فتوشاپ

 

طراحی صفحات وب در برنامه فتوشاپ

 

دوتا دیگه مستطیل میکشم با فاصله ی یک خونه ی کوچیک بینشون با کد های رنگیه : aba99 و acaf9f میکشم .

 

طراحی صفحات وب در برنامه فتوشاپ

طراحی صفحات وب در برنامه فتوشاپ

 

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

میام روی لایه هاشون و کلید shift رو نگه میدارم و لایه ی پایینی رو هم انتخاب میکنم و با استفاده از ctrl+G اونارو به یک گروه تبدیل میکنم .

 

طراحی صفحات وب در برنامه فتوشاپ

طراحی صفحات وب در برنامه فتوشاپ

 

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

و ctrl+T رو میزنم و راست کلیک میکنم و FLIP HORIZONTAL رو میزنم .تا برعکس بشن .

 

طراحی صفحات وب در برنامه فتوشاپ

 

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

با CTRL+J از ۸ تاکپی میگیرم و میارم پایین پشت سر هم قرارشون میدم

 

طراحی صفحات وب در برنامه فتوشاپ

 

و ابزار تایپ رو انتخاب میکنم و کلماتی مانند اسپرت – جین -زاکت – کفش -ساعت – تاپ – پیشنهاد و لوازم جانبی رو تایپ میکنم .

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

 

طراحی صفحات وب در برنامه فتوشاپ

 

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

 

طراحی صفحات وب در برنامه فتوشاپ

 

رنگ این قسمت از صفحه رو انتخاب میکنم و با ALT+BACKSPACE رنگ رو میریزم داخلش .

 

طراحی صفحات وب در برنامه فتوشاپ

 

و زیرش اسم مجموعمونو مینویسم .

چند تا نقطه هم مینویسم و کنار اسم قرارش میدم .

 

طراحی صفحات وب در برنامه فتوشاپ

 

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

 

 

حالا یه سه خط هم بالا سمت راست میکشم

 

 

و سمت چپ : سبد خرید – خانه و جست و جو رو مینویسم

و بین هر کدوم از اونها یک خط قرار میدم .

 

 

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

 

 

موفق و موید باشید .

نویسنده : الهه حلاج از گروه هنری خواجویی