طراحی سایت دیجی کالا با فتوشاپ

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

پس با من همراه شو.

اول از همه که یک سند جدید به ابعاد زیر باز میکنم.

 

طراحی سایت دیجی کالا با فتوشاپ

 

حالا از قسمت view , show , grid رو فعال میکنم

 

طراحی سایت دیجی کالا با فتوشاپ

 

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

 

طراحی سایت دیجی کالا با فتوشاپ

 

حالا ابزار rounded rectangle tool رو انتخاب میکنم

 

طراحی سایت دیجی کالا با فتوشاپ

 

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

 

طراحی سایت دیجی کالا با فتوشاپ

 

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

 

طراحی سایت دیجی کالا با فتوشاپ

 

حالا با استفاده از ابزار move و کلید alt یک کپی دیگه از این مستطیل کوچیکه میگیرم

 

طراحی سایت دیجی کالا با فتوشاپ

 

و میارمش پایین کار قرارش میدم و دقیقا فاصله ای که توی قبلی دادم به اینم میدم و کد رنگی اینو میذارم روی ba9cdo

 

طراحی سایت دیجی کالا با فتوشاپ

 

ctrl+t رو میزنم و این کادر ها رو با هم هم اندازه و تراز میکنم.

 

طراحی سایت دیجی کالا با فتوشاپ

 

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

 

طراحی سایت دیجی کالا با فتوشاپ

 

شما میتونید با زدن ctrl+h این خط های راهنما رو غیر فعال کنید و دوباره با زدن همین فعالشون کنید.

 

طراحی سایت دیجی کالا با فتوشاپ

 

شروع میکنم به گذاشتن کادر مستطیلی و همینطور با ابزار type tool نوشته های مورد نیاز رو مینویسم.

 

طراحی سایت دیجی کالا با فتوشاپ

 

زوم میکنم روی این کادر با استفاده از line tool یک خط میکشم و با ابزار pen tool یک فلش میکشم در انتهای کادر به معنای باز کردن زبانه.

 

طراحی سایت دیجی کالا با فتوشاپ

 

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

 

طراحی سایت دیجی کالا با فتوشاپ

 

و یکی از این دایره ها رو ما پر رنگ تر میکشیم.

 

طراحی سایت دیجی کالا با فتوشاپ

 

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

این کادری که من سبز رنگ انتخاب کردم به این دلی بود که برای کالا های منتخب تازه استفاده میشد پس یک عکس ساندویچ هم دانلود کردم و گذاشتم داخلش و متن ها رو هم به این صورت اضافه کردم.

 

طراحی سایت دیجی کالا با فتوشاپ

 

حالا چند تا برگ تازه و سبز رنگ هم میارم روی تصویر قرار میدم و هر اندازه که دوست داشتم میتونم ازش کپی بگیرم و تکثیرش کنم توی کل کار. و از این کنار هم اوپاسیتی اونو کم میکنم تا جلوه ی بهتری داشته باشه.

 

طراحی سایت دیجی کالا با فتوشاپ

طراحی سایت دیجی کالا با فتوشاپ

 

برای قالب بنفش رنگم هم همینطور

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

 

طراحی سایت دیجی کالا با فتوشاپ

 

و مثل عکس های زیر نوشته ها و دیزاین مورد نظر رو انجام میدیم.

 

طراحی سایت دیجی کالا با فتوشاپ

 

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

 

طراحی سایت دیجی کالا با فتوشاپ

 

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

 

طراحی سایت دیجی کالا با فتوشاپ

 

کد رنگ نوشته ها: 3e403d

و از داخل گوگل میام وکتور سبد خرید و ذربین رو دانلود میکنم

و داخل کار قرارشون میدم و اوپاسیتی اونا رو کم میکنم تا خاکستری رنگ بشن.

 

طراحی سایت دیجی کالا با فتوشاپ

طراحی سایت دیجی کالا با فتوشاپ

 

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

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

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