جهان یکه نگار

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

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


mostafa2_gh

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

mostafa2_gh

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

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

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

mostafa2_gh

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

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

mostafa2_gh

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

mostafa2_gh

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

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

header_nav

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

mostafa2_gh

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

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

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

mostafa2_gh

mostafa2_gh

mostafa2_gh

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

mostafa2_gh

اینم از ساخت قالب


آخرین مطالب
» جدید ترین خبر ها
» اربعین حسینی
» عکس غذای نذری امام حسین
» فینال تنیس روی میز المپیک2016
» نکات تغذیه ای
» اخبار جدید فناوری
» جودو کاران کوچک
» ماه شعبان
» نوروز95
» انتخابات7 اسفند
» شعر برای دهه ی فجر
» اخبار
» دانلود نرم افزار آنتی ویروس و دانلود منیجر
» امام رضا مداحی
» جدید ترین اخبار فناوری
» اخبار ایران و جهان
» آخرین اخبار ایران
» دانلود مداحی های محمود کریمی
» اخبار ایران
» اخبار تکنولوژی

Design By : RoozGozar.com