در این آموزش ما یک قالب سایت برای یک سایت عکاسی ایجاد خواهیم کرد با ما همراه باشید.
آموزش فتوشاپ طراحی قالب سایت عکاسی
در انتهای این آموزش به افکت زیر خواهیم رسید:
ایجاد هدر سایت
یک سند جدید ایجاد 1600×1200 پیکسل ایجاد کنید و بکگراند آن را سیاه انتخاب کنید در سپس برای هدر سایت با ابزار انتخاب مستطیل یک مستطیل باریک و سرتاسری در بالای صفحه رسم کنید. برای آموزش کار با ابزار رسم انتخاب مستطیل به آموزش ابزارRectangular Marquee مراجعه فرمائید:
حالا استایل هایی که در تصاویر میبنید به این مستطیل اعمال کنید:
ابزار pen را انتخاب کنید سپس یک خط ایجاد کنید سعی کنید خط وسط مستطیل بالا باشد. حالا با تنظیمات اشکال زیر این خط را به خط چین های کوچک تبدیل کنید:
استایل زیر را به این خطوط اضافه کنید:
حالا خط چین های ما به این صورت در آمده اند:
در این قسمت ما یک بافت چوبی با رزولوشن بالا ایجاد کرده و دستور Image > Adjustments > Desaturate را برای سیاه و سفید کردن آن اجرا کرده ایم. در آموزش های سیاه و سفید کردن عکس:Grayscale و سیاه و سفید کردن عکس:Desaturating و تبدیل عکس رنگی به سیاه و سفید: Gradient Map و تبدیل عکس رنگی به سیاه و سفید: Luminosity و تبدیل عکس رنگی به سیاه سفید: Lab و تبدیل عکس به سیاه و سفید:Channels روش های مختلف سیاه و سفید کردن عکس را به شما نشان خواهند داد:
با ابزار انتخاب مستطیل پایین قسمت بافت چوبی را انتخاب کنید:
ابزار گرادیانت را برداشته و باگرادیانت سیاه به ترانسپارنت از پایین به بالا دراگ کنید من کلید Shift را برای اطمینان از صاف بودن خط رسم کرده ام.
نوع ترکیبی لایه گرادیانت را به Soft Light تغییر دهید:
حالا همان لایه بافت چوبی را دوباره به عکس اضافه کرده و دستور
Edit > Transform > Flip Vertical را اجرا کنید. سپس دستور Edit > Transform > Perspective را اجرا کرده و دوگوشه پایین بافت را به خارج دراگ کنید . اگر لازم است بافت را در جهت عمودی هم تغییر اندازه دهید:
در این قسمت باید به این لایه جدید سایه ایجاد کنید برای ایجاد سایه روی عکس لایه Ctrl + کلیک کرده تا انتخاب شود یک لایه جدید ایجاد کرده و با گرادیانت مشکی به ترانسپارنت از بالا به پایین دراگ کنید. و نوع ترکیبی لایه گرادیانت را به Multiply تغییر دهید :
خوب ما تصویر یک دوربین عکاسی Cannon 60DA را از اینترنت دانلود و به سند خود اضافه کنید:
این دوربین یک کپی تهیه کرده لایه کپی را به زیر لایه اصلی ببرید و استایل لایه Color Overlay با رنگ مشکی به آن اضافه کنید. و سپس آن را با دستور Filter > Blur > Guassian Blur=1-3px محو کنید. حالا لایه کپی را 4 پیکسل به پایین بکشید:
به نواحیه مشخص شده در تصویر سایه اضافه کنید :
ابزار گرادیانت را انتخاب کنید و رنگ های آن را از مشکی به ترانسپارنت بگزارید. ناحیه انتخابی برای لایه دوربین ایجاد کنید. و یک لایه در بالای دوربین ایجاد کنید و یک گرادیانت از پایین دوربین رسم کنید.
حالا روی این لایه گرادیانت کلیک کرده و opacity=65% انتخاب کنید:
به بالا سمت راست هم با همین تکنیک سایه بدهید ولی اینبار opacity=100%, blend mode= Soft Light انتخاب کنید.
یک عکس زیبا از اینترنت دانلود و آن را به سند خود اضافه کنید . برای اینکه جلوه تا شدگی به عکس بدهید از ماسک لایه و سایه ها کمک بگیرید این افکت بصورت رایگان و آماده برای اکشن های فتوشاپ موجود است:
یک کپی از تصویر با فاصله ای کم از لایه اصلی تصور در زیر آن قرار دهید :
دور لایه تصویر یک انتخاب ایجاد کرده و در لایه جدید از گوه سمت چپ یک گرادانت سیاه به ترانسپرنت با opacity=75% به آن بدهید:
به عکس موجود در لایه زیرین دستور Filter > Blur > Guassian Blur=3-5 pixel بدهید. حالا برای محو کردن لایه به لایه یک ماسک اضفاه کنید و با براش مشکی ماسک لایه را رنگ کنید براش باید بسیار نرم انتخاب شود. سعی کنید گوشه ها را بیشتر و صورت را کمتر محو کنید:
کامل کردن هدر سایت
با متن بالای سایت را کامل کنید:
ایکون های شبکه های اجتماعی را به سایت اضافه کنید:
تاحالا سایت ما به این صورت در آمده است:
ایجاد ناحیه تصاویر
با ابزار رسم مستطیل با کلید میانبر Shift+U چهار مستطیل ایجاد کنید:
حالا یکی از این مستطیل ها را به حالت انتخاب در آورده و آن را پنج پیکسل کوچک کنید و سپس با دستور Edit > Paste Special > Paste Into یک تصویر کپی شده در فتوشاپ را به این ناحیه کپی کنید:
به همین ترتیب تمام تصاویر را کپی کنید:
با ابزار تایپ در سمت چپ عکس ها عبارتی برای مشاهده سایر عکس ها قرار میدهیم برای آموزش نحوه کار با این ابزار از آموزش ابزار تایپ یاType Tool در فتوشاپ استفاده کنید.سپس با ابزار رسم مستطیل گوشه گرد با کلید میانبر Shift+u یک دکمه قرمز اضافه کنید:
به این دکمه استایل لایه زیر را اضافه کنید:
حالا به این دکمه متن اضافه کنید. در سایت ها فارسی فونت Thoma برای اینکار مناسب است:
در زیر عکس ها کمی متن تصادفی وارد کنید برای اینکار کافیست دستور Type > Paste Lorem Ipsum را در فتوشاپ های CS6 به بعد اجرا کنید.
قسمت سرویس ها
برای قسمت سرویس ها در سمت راست یک دکمه قرمز با کمی متن اضافه می کنیم:
در سمت چپ هم متن و در زیر آن عکس یک لنز دوربین قرار دهید ما قسمتی از دوربین موجود در بالا را برای این بخش برش داده و استفاده کرده ایم:
در زیر قسمت سمت راست دو ستون با جدا کننده ای به ضخامت 1 پیکسل اضافه می کنیم. و بالت های آن ها را به رنگ قرمز ایجاد خواهیم کرد:
ما برای ساخت بالت از ابزار Pen استفاده کرده ایم:
در این قسمت شما باید تصویری مانند این داشته باشید:
بخش تماس با ما :
این بخش را با یک متن بزرگ زیبا در زیر بخش قبل ایجاد کنید ما یک جدا کننده یک پیکسلی هم ایجادکرده ایم:
ما در سمت چپ اطلاعات تماس قرار داده ایم این اطلاعات فرضی است ولی شما میتوانید اطلاعات شرکت خود را جایگزین کنید:
در سمت راست قسمت های برای نظرات کاربران قرار داده ایم برای ایجاد این بخش از مستطیل های استفاد می کنیم .که با ابزار رسم مستطیل ایجاد میشوند. این قسمت کاربران میتوانند اطلاعات و پیام های خود را وارد کنند.
ما لیبل ها را در فتوشاپ پرخواهیم کرد. از رنگ طوسی برای اینکار استفاده کنید:
ما این بخش را با جدا کنندهای یک پیکسلی از هم جدا خواهیم کرد:
ایجاد پاصفحه
ما برای این بخش از همان بافت چوبی با رنگ سیاه و سفید استفاده کرده ایم. و با ماسک لایه و گرادیانت بخش های از بالای آن را حذف کرده ایم :
در قسمت پایین تر برای پاصفحه ما همان ایکون های شبکه های اجتماعی و مقداری متن اضافه کرده ایم:
تصویر نهایی را دوبارمشاهده می کنیم: