آموزش ساخت قالب وب سایت در فتوشاپ

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

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

تصویر نهایی کار را میتوانید مشاهده نمایید :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

منبع: داتیس دیزاین