طراحی قالب شماره 1 در فتوشاپ

در صورت مفید بودن این آموزش آن را از طریق کلید G+ (گوگل پلاس ابتدای صفحه ) به اشتراک بگذارید

PSD-to-HTML-tutorial-asarayan-14

طبق برنامه ریزی در بخش آموزش قرار شده است که 10 قالب در محیط فتوشاپ طراحی سپس روز بعد با استفاده از HtmlوCss صفحات ساخته شده را شبیه سازی کنیم .

امروز می خواهیم اولین قالب را در محیط فتوشاپ طراحی و روز بعد همان قالب را با استفاده از Html و Css تبدیل به یک قالب سایت نماییم .
یکی از دلایلی که باعث شده است تا طراحی صفحات استاتیک به طور کامل توضیح داده شود نبود منبع و سایت آموزشی برای یادگیری فارسی زبانان عزیز می باشد .
سعی میکنم تمام آموزشها را به صورت کاملا ساده و قابل فهم همراه با فایل آموزشی برای دانلود کاربران در پایان هر آموزش قرار دهم . تمام قالب ها از سایتهای بزرگ طراحی سایت نمونه برداری شده است و فقط فقط هدف یادگیری و آموزش به زبان فارسی می باشد .

برای شروع فتوشاپ را باز کنید .
1. یک صفحه به ابعاد 1365×1024 با رزولیشن 72 باز کنید .

PSD-to-HTML-tutorial-asarayan-1.1

PSD-to-HTML-tutorial-asarayan-1

PSD-to-HTML-tutorial-asarayan-2

2. رنگ فورگراند را برابر با 565554 قرار دهید .سپس ابزار گرادیانت را انتخاب و از تنظیمات بالای صفحه Redial Gradient را انتخاب کنید .
بعد از اعمال تغییرات رنگ پس زمینه راتغییر دهید

PSD-to-HTML-tutorial-asarayan-3

 

3. بسیار خوب می خواهیم کادر اصلی را برابر با 960 پیکسل قرار دهیم. با زدن کلیدهای Ctrl+R از روی صفحه کلید ابزار خط کش را انتخاب کرده و از طرفین چپ و راست 32 پیکسل به طرف داخل یک خط بکشید . از طرف بالا نیز 110 پیکسل به طرف پایین خطی بکشید

PSD-to-HTML-tutorial-asarayan-4

 

PSD-to-HTML-tutorial-asarayan-5
PSD-to-HTML-tutorial-asarayan-6

4. ابزار Rectangle Tool را انتخاب کنید وهمانند تصویر زیر کادرهایی با نام های menu=55px | Slidebar=375px | Featured bar=375px.222px | Content area=187px |Footer=50px می کشیم .سپس روی هر لایه دابل کلیک کرده و تنظیمات Drop shadow را تغییر می دهیم .

PSD-to-HTML-tutorial-asarayan-7
PSD-to-HTML-tutorial-asarayan-8
PSD-to-HTML-tutorial-asarayan-9

5. در این مرحله می خواهیم لینک های سایت را ایجاد کنیم . برای ایجاد لینک ابزار  Horizantal type Tool را انتخاب کرده و اندازه فونت را برابر با 24پیکسل انتخاب کنید .

PSD-to-HTML-tutorial-asarayan-10

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

PSD-to-HTML-tutorial-asarayan-11

 

7. یک متن را به طور مشترک برای 4 ردیف وسط صفحه کپی میکنم

PSD-to-HTML-tutorial-asarayan-12

 

8. در مرحله بعد هر 4 عکس را کوچکتر کرده و در قسمت سمت راست Content قرار میدهیم .یکبار دیگر یک متن را به صورت پیش فرض تایپ میکنم .

PSD-to-HTML-tutorial-asarayan-13

 

9. در مرحله آخر هم حق کپی رایت و چند لینک را به فوتر اضافه می کنیم .

PSD-to-HTML-tutorial-asarayan-14
 

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

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

نوشتن دیدگاه

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

دیدگاه‌ها   

0 #1 alibalavipour 1396-01-05 15:26
با سلام خدمت شما
لطفا در باره کوچک کردن عکسها و قرار دادن عکس ها در کادر ها بیشتر توضیح دهید.
نقل قول کردن

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

«
  • 1
  • 2
  • 3
»