آموزش طراحی قالب وب سایت رهیاب لپ تاپ با فتوشاپ

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

demo-head

 آموزش طراحی وب سایت شرکت رهیاب لپ تاپ
امروز می خواهم قالب سایت رهیاب لپ تاپ را در محیط فتوشاپ برای شما طراحی کنم .
در روزهای بعدی قالب طراحی شده در محیط فتوشاپ را تبدیل به یک وب سایت کامل با استفاده از HTML. CSS میکنم و سعی میکنم از صفر تا 100 طراحی یک قالب را به صورت کامل برای شما آموزش بدهم .
سعی کنید از آموزشهایی که در این بخش برای شما قرار میدهم نهایت استفاده را ببرید .
بدلیل اینکه هزینه طراحی قالب در محیط فتوشاپ و بعد تبدیل آن به HTML و CSS تقریبا 150 تا 200 هزار تومان می باشد پس قدر هر آموزش را بدانید و با کمی وقت سعی کنید تجربه خودتان را نسبت به طراحی پوسته های قالب کمی بیشتر کنید تا بتوانید قالبهای زیباتر و دارای کیفیت بهتری برای مشتریان خودتان طراحی کنید .

 

 

1. یک صفحه به ابعاد 1440×1500 با رزولیشن 72 ایجاد کنید .

Design-PSD-them-Rahyab1

2. برای طراحی قسمت هدر سایت من از یک تصویر که از اینترنت دانلود کرده بودم استفاده کردم . اول تصویر را دانلود کردم و شروع به کپی گرفتن از کادر مورد نظر با فشردن کلیدهای Ctrl+J و سپس در کنار هم قرار دادن کادرها نمودم . به تصویر زیر دقت کنید .

Design-PSD-them-Rahyab2 Design-PSD-them-Rahyab3 Design-PSD-them-Rahyab4

3. من این مرحله را تکرار میکنم تا قسمت هدر سایت تکمیل شود . به تصویر زیر دقت کنید . سعی کنید هر قسمت از لایه ها را در یک Group قرار بدهید تا بعدا که لایه زیاد شد مشکلی پیش نیاد .

Design-PSD-them-Rahyab5

Design-PSD-them-Rahyab6

4. ابزار خط کش را با فشردن کلیدهای Ctrl+Rاز روی کیبرد فعال میکنم و بعد ازآن از هر طرف به داخل صفحه یک کادر از طرفین با فاصله 270 پیکسل رسم میکنم .

Design-PSD-them-Rahyab7

5. ابزار تایپ Horizontal Type Tool را انتخاب میکنم و منوبار بالای صفحه را با رنگ سفید / فونت Tahoma / سایز 11 پیکسل تایپ میکنم .

Design-PSD-them-Rahyab8

6. در مرحله بعدی لوگو را در قسمت بالا سمت راست ایجاد میکنم برای انجام اینکار ابزار تایپ Horizontal Type Tool را با تنظیمات رنگ سفید / فونت kodak / سایز 36 پیکسل انتخاب و نام شرکت را تایپ میکنم .

Design-PSD-them-Rahyab9

7. روی لایه متن لوگو دابل کلیک میکنم و تنظیمات پیش فرض را تغییر میدهم .

Design-PSD-them-Rahyab10

Design-PSD-them-Rahyab11

Design-PSD-them-Rahyab12

Design-PSD-them-Rahyab13

8.ابزار تایپ Horizontal Type Tool را انتخاب و یک متن با سایز 11 پیکسل / فونت Tahoma /  رنگ سفید روبروی لوگو تایپ میکنم . درصد رنگ نارنجی ادامه مطلب : fe2d02

Design-PSD-them-Rahyab14

طراحی قسمت منوی اصلی قالب

1. ابزار Rounded Rectangle Tool را با  Rediuse: 10px انتخاب و یک کادر همانند تصویر زیر میکشم سپس روی لایه کادر کشیده شده دابل کلیک و تنظیمات پیش فرض را تغییر میدهم . به تصاویر زیر دقت کنید .

Design-PSD-them-Rahyab15

Design-PSD-them-Rahyab16

Design-PSD-them-Rahyab17

Design-PSD-them-Rahyab18

2. متن لینکها را برای مثال با سایز 14 پیکسل / درصد رنگ 353434 تایپ میکنم .

Design-PSD-them-Rahyab19

3. ابزار Custome Shape Tool را انتخاب کرده و یک شکل را با درصد رنگی ef2c04 پشت لینکها قرار میدهم

Design-PSD-them-Rahyab20

Design-PSD-them-Rahyab21

4. من یک قسمت زیر منو اصلی با نام بنر 1 / بنر 2 / بنر 3 ایجاد میکنم . قبل از انجام هر کاری یک Group ایجاد میکنم تا همه لایه های مربوط به این قسمت در این گروه قرار بگیرد .

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

Design-PSD-them-Rahyab22

5. یک الگو یا Patterns از اینترنت دانلود کرده ام . روی لایه کادر کشیده شده دابل کلیک کرده و گزینه pattern Overlay را انتخاب میکنم . سپس روی مثلث کوچکی که با کادر قرمز مشخص شده است کلیک کرده و گزینه Load Patterns را انتخاب و الگو دانلود شده را به لیست الگوهای دیگر اضافه میکنم .کافیست بر روی کلید Ok کلیک کنم تا الگو انتخاب شده روی پس زمینه بشیند .

Design-PSD-them-Rahyab23

Design-PSD-them-Rahyab24

Design-PSD-them-Rahyab25

6. در این قسمت عکس 3 لپ تاپ را از اینترنت دانلود کردم و ابعاد آنها را 100×100 پیکسل تغییر دادم . روی لایه هر عکس دابل کلیک کردم و یک Stroke  1پیکسلی برای هر 3 عکس اعمال کردم . متن را با ابعاد 11 پیکسل و درصد رنگ 2a2a2a تایپ کردم و عنوان را با سایز 24 پیکسل تایپ کردم .

Design-PSD-them-Rahyab26

طراحی قسمت Content (منوی سمت راست با قسمت توضیحات )

من اندازه منوی سمت راست را برابر با 200 پیکسل قرار میدهم . دقت داشته باشید که برای مشخص شدن اندازه باید از خط کش استفاده کنید .روش کشیدن کادر هم به این صورت هست که ابتدا ابزار Rounded Rectangle Tool را با  Rediuse: 10px انتخاب کرده و یک کادر همانند تصویر زیر میکشم سپس روی لایه کشیده شده دابل کلیک کرده و تنظیمات پیش فرض را تغییر میدهم .

Design-PSD-them-Rahyab28

Design-PSD-them-Rahyab27

حالا با استفاده از ابزار تایپ عنوان و لینکها را تایپ میکنم .  درصد رنگ لینک آبی : 2362d6  / درصد رنگ عنوان : 353434

یک خط هم با ابزار Line Tool با ضخامت 1 پیکسل ترسیم میکنم

Design-PSD-them-Rahyab29

نوبت میرسه به قسمت توضیحات صفحه اصلی . ابتدا ابزار Rounded Rectangle Tool را با  Rediuse: 10px انتخاب کرده و یک کادر همانند تصویر زیر میکشم . سپس عین مراحل قبلی متن را با درصد رنگی 4d4d4d تایپ میکنم . عنوان را هم که مشخص هست و نیاز به توضیح دوباره نداره . برای کشیدن خط هم از ابزار Line Tool استفاده میکنم

Design-PSD-them-Rahyab30

من دو کادر با ابزار Rounded Rectangle Tool را با  Rediuse: 5px میکشم و برای تنظیمات هم روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات پیش فرض را تغییر میدهم

Design-PSD-them-Rahyab31

Design-PSD-them-Rahyab32

Design-PSD-them-Rahyab33

طراحی قسمت USER 1
من میخواهم پایین مطالب یک قسمت به نام User1 ایجاد کنم تایک سری مطالب یا لینک را در آن قرار بدهیم .برای انجام اینکار با ابزار Rounded Rectangle Tool را با  Rediuse: 10px یک کادر همانند تصویر زیر میکشم سپس یک سری مشخصات در آن تایپ میکنم . درصد رنگی متن قبلا گفته شده است

Design-PSD-them-Rahyab34

طراحی قسمت Footer

و اما طراحی قسمت فوتر قالب در فتوشاپ  . فوتر از 3 قسمت تشکیل شده است . قسمت اول مربوط می شود به آدرس و مشخصات شرکت یا همان تماس با ما و قسمت دوم مربوط می شود به لینکهای مفید یا هر نام دیگری . قسمت سوم هم که مربوط می شود به کپی رایت سایت .
برای طراحی این قسمت من همانند مرحله 2 عمل کردم فقط کمی رنگ کادر را تغییر داده ام . بعد از اینکه تکه تکه قسمت ها را کنار هم قرار میدهم همه لایه های کادر فوتر را انتخاب و برای یکی شدن کلیدهای Ctrl+E را از روی کیبرد میفشارم .

Design-PSD-them-Rahyab35

در مرحله آخر هم شروع به تایپ متن مورد نظر که برای قسمت فوتر در نظر گرفته ام میکنم .
رنگ متن آخرین مطالب : bdbcbc / رنگ متن لینکها : b0c6ec / رنگ متن کپی رایت سایت :  2362d6

Design-PSD-them-Rahyab37

 

برای دانلود فایل PSD  آموزش  کلیک کنید || لینک دانلود فایل PSD :سرورمستقیم

 
آخرین بروز رسانیچهارشنبه, 18 شهریور 1394 10:17

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا