تبلیغات
فرشته مهربانی - آموزش ساخت قالب وب سایت در فتوشاپ
فرشته مهربانی
هرچیزی که بخوای
صفحه نخست       پست الکترونیک          تماس با ما              ATOM            طراح قالب
گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من
درباره وبلاگ


هرچیزی که توبخوای درهرزمینه ای

مدیر وبلاگ :محمدامین نجفی فینی
نظرسنجی
به نظرشمادربازی جمعه پرسپولیس-استقلال چه نتیجه ای رغم خواهدخورد؟




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

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

theme_datisdesign

ابتدا یک فایل جدید به اندازه 950 در 1000 پیکسل ایجاد کنید :

newfile

سپس رنگ background را به مشکی تغییر دهید. سپس ctrl+r را فشار دهید تا خط کش در فتوشاپ روشن شود (یا از طریق منوی view و انتخاب rulers). حال دو عدد guide به اندازه 25 پیکسل از سمت چپ و راست تصویر بکشید.

در پنل لایه ها یک فولدر جدید به نام header درست کنید. (همیشه بهتر است که هنگام کار با فتوشاپ از فولدرها برای سازماندهی کار خود استفاده کنید). حال از منوی ابزار ، ابزار Rounded Rectangle Tool را انتخاب کنید. شعاع آنرا 5 پیکسل قرار دهید. از بالای صفحه یک guide دیگر به اندازه 300 پیکسل بکشید.

حال این کد رنگ را به عنوان رنگ foreground انتخاب کنید : 323232 و یک مستطیل درون این فضای تشکیل شده بکشید. (همیشه بهتر است از منوی view گزینه Show و smart guides را انتخاب کنید. همینطور گزینه snap فعال باشد تا موقع کار به شما کمک کند) :

header_rectangle

حال روی لایه ایجاد شده right click کنید و blending options را انتخاب کنید، سپس گزینه stroke را طبق شکل زیر اعمال کنید :

rectangle_stroke

دوباره از سمت چپ و راست دو guide به اندازه 40 پیکسل ، و از سمت بالا یک guide به اندازه 250 پیکسل بکشید. رنگ foreground را به این کد رنگ be0000 تغییر دهید و دوباره یک مستطیل در این محوطه بکشید :

header_rectangle2

حال effect های زیر را به آن اعمال کنید :

header_style1

header_style2

کد رنگ برای افکت outer glow کد fdc171 می باشد.

حال یک عکس دلخواه از کره زمین انتخاب می کنیم و آنرا در بالای لایه قرمز رنگ قرار میدهیم سپس دکمه alt را گرفته و موس را در پنل لایه بین این دو لایه میبریم که بدین شکل تغییر میکند و سپس کلیک می کنیم :

globe_layer

از پنل لایه حالت blending لایه کره زمین را به soft light تغییر میدهیم و افکت زیر را به آن اضافه میکنیم :

globe_outerglow

کد رنگ برای افکت outer glow کد f02e2e می باشد.

تا به حال باید تصویر شما شبیه شکل زیر باشد :

globe_final

حال روی لایه کره زمین یک new layer ایجاد کنید، از پلت ابزار brush را انتخاب کنید، رنگ foreground را به رنگ متمایل به نارنجی تغییر دهید، من از این براش استفاده کردم، شما می توانید از براشهای مختلف و متنوعی برای این کار استفاده کنید ، این کار را توسط ایجاد چند لایه جدید دیگر تکرار میکنیم (توجه داشته باشید که این لایه ها باید با لایه زیرین خود mask شوند با نگه داشتن دکمه alt) :

brushes

دو لایه بالایی حالت blending آنها linear dodge هست :

brushes_layers

حال دوباره یک لایه جدید دیگر بالای این لایه ها ایجاد میکنیم، آنرا mask می کنیم. یک براش به اندازه زیر انتخاب کنید (براش دایره ای شکل) :

brush_size

رنگ نارنجی انتخاب کنید و در گوشه مستطیل یک بار کلیک کنید :

orange_brush

حال رنگ براش را به مشکی تغییر دهید ، مقدار opacity آنرا به 50 درصد تغییر داده و در گوشه دیگر مستطیل یکبار کلیک کنید :

black_brush

حال یک تصویر دلخواه برای header قرار می دهیم :

header_image

برای هدر متن مورد نظر را قرار میدهیم (من از نرم افزار فارسی ساز مریم برای این کار استفاده کرده ام) :

header_title

حال درون فولدر header یک فولدر جدید به نام navigation ایجاد میکنیم. متن لینکهای مورد نظر را دورن آن قرار می دهیم :

header_nav

بهتر است بین لینکهای منو یک مرزی ایجاد کنیم تا بهتر نمایان شوند، برای این کار line tool را انتخاب کنید و یک خط کوچک با رنگ مشکی ایجاد کنید و سپس از آن یک کپی بگیرید و رنگ آنرا به کد 666666 تغییر دهید و آنها را به شکل زیر در کنار هم قرار دهید :

header_nav_sep

خب تا الان قسمت هدر سایت تکمیل شد، حال سراغ قسمت آیکانهای سرویس ها میرویم. برای شروع از سمت بالا دو guide به فاصله 315 و 505 پیکسل بکشید. حال توسط rounded rectangle tool یک مستطیل با شعاع 5 پیکسل به ابعاد 140 در 190 پیکسل بکشید. رنگ آنرا 323232 قرار دهید.

pen tool را انتخاب کنید، یک منحنی به رنگ سفید و به شکل زیر ایجاد کنید :

pentool

حال آنرا با لایه زیرش که همان مستطیل اولیه هست mask کنید، روی لایه ای که توسط pen tool ایجاد شده است کلیک کنید، از پایین پنل لایه add mask را انتخاب کنید. (یا از منوی layer و انتخاب layer mask و سپس reveal all) ابزار gradient را انتخاب کنید و روی mask به صورت مورب gradient بکشید (رنگ پیش فرض gradient سفید-مشکی باشد) :

box_gradient

حال دوباره rounded rectangle tool را انتخاب کنید و یک مستطیل کوچک درون مستطیل بکشید، layer style آن را از layer style مستطیل قرمز رنگ copy و paste کنید :

box

حال یک براش دایره ای شکل و کوچک انتخاب کنید، بالای لایه مستطیل یک لایه جدید ایجاد کنید، رنگ مشکی را انتخاب کنید برای براش، دکمه shift را نگه دارید و درون مستطیل قرمز رنگ یک خط با 50 درصد opacity بکشید :

box_black_brush

مانند مستطیل قرمز رنگ هدر یک اثر کوچک توسط براش به رنگ نارنجی در گوشه این مستطیل کوچک هم قرار می دهیم :

box_orange_brush

خب کار این باکسها تمام شد، بهتر است همه لایه های این باکس را انتخاب کنید و آنها را به smart object تبدیل کنید تا در آینده بتوانیم راحت تر از آن استفاده کنیم. حالا به تعداد مورد نظر از این باکسها درون قالب خود قرار میدهیم و آیکانها و متن دلخواه خود را نیز روی آنها می گذاریم. این قسمت هم آماده شد :

services

برای قسمت body قالب، یک مستطیل بزرگ با استایل مستطیل طوسی رنگ هدر می کشیم :

body

برای باکسهای قسمت تایتلهای body بدین روش عمل می کنیم، یک مستطیل به کد رنگ de0000 میکشیم و استایل های زیر را به آن می دهیم :

body_title_style1

body_title_style_2

body_title_style_3

3 کپی از این باکس در قالب قرار میدهیم، متن مورد نظر را می نویسیم، مانند قسمت منو برای جدا سازی این 3 قسمت ار ابزار line tool استفاده میکنیم :

body_full

خب تقریبا قالب آماده شده است، فقط برای قسمت footer هم میتوانیم یک باکس قرار دهیم.

این قالب آماده تبدیل شدن به وب سایت است، آنرا می توانید به کد HTML و CSS تبدیل کنید و لینکها و متن مورد نظر خود را در آن قرار دهید. امیدوارم از این آموزش استفاده کافی را برده باشید. برای آموزش تبدیل قالب به کد می توانید از آموزشهای همین وبلاگ استفاده کنید، و یا از سرویس design2code داتیس دیزاین بهره ببرید.

دریافت فایل (حجم 2.6 مگابایت)

موفق باشید…






صفحات جانبی
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
امکانات جانبی