در این آموزش یک قالب دیگر را در فتوشاپ ایجاد کرده ایم امیدوارم از این آموزش لذت ببرید.
آموزش فتوشاپ طراحی قالب سایت دانلود
ما برای ایجاد قالب سایت از سیستم شبکه بندی رایگان 960 استفاده کرده ایم . شما میتوانید از این سیستم شبکه بندی و یا از سیستم شبکه بندی bootstrap و یا سیستم شبکه بندی W3 استفاده کنید. ما در این آموزش به کد نویسی نخواهیم پرداخت ولی اگر قصد شما کد نویسی بر اساس طرح فتوشاپی خود است . باید در فتوشاپ از همان سیستم شبکه بندی را استفاده کنید که در کد نویسی استفاده می کنید. زیرا درغیر این صورت چیدمان عناصر با تصویر متفاوت خواهند بود.
نتیجه نهایی
به تصویر زیر نگاه کنید. در آخر این آموزش ما به این تصویر خواهیم رسید.
ما در این آموزش از یک سری تصاویر استفاده کرده ایم . اگر میخواهید طرح شما دقیقاً مانند طرح ما شود ایمیل خود را ارسال تا عکس های اصلی را برایتان ایمیل کنیم. ولی توجه داشته باشید که قاعدتا شما باید از تصاویر خود و یا مشتریان در قالب های طراحی شده استفاده کنید.
مقدمه
میدانیم که قبل از طراحی قالب یک سایت باید ایده خود را بصورت وایر فریم یا همان فریم خطی ایجاد کنیم . نرم افزار های ساده و پیچیده زیادی برای اینکار وجود دارند، که برخی از آنها رایگان هستند. ولی من ترجیح میدهم اینکار را با یک کاغذ و یک مداد انجام دهم.
برای اینکه الگوی رنگی زیبایی به سایت خود بدهید ، میتوانید از سایت هایی که الگوهای رنگی را ارائه میدهند استفاده کنید . من ترکیب رنگ هایی را که در طبیعت می بینم را استفاده می کنم. البته نباید فراموش کرد که تم رنگی اصلی سایت را مشتری انتخاب می کند و ما فقط باید رنگ هایی که به زیبایی با آن ترکیب می شوند را انتخاب کنیم.
گام 1: ایجاد پس زمینه
برای ایجاد یک قالب سایت اولین کاری که باید انجام دهیم این است که یک سند جدید ایجاد کنیم. سند خود را در ابعاد 500×500 pixels با 72 pixels/inch as resolution ایجاد کنید.
حالا پس زمینه این سند را با رنگ کد هگزا دسیمال #d9cfc0 پر کنید.
ما از اینترنت یک بافت کاغذ دانلود کرده و آن را به تصویر خود اضافه کرده ایم . یادتان باشد که این بافت را سیاه و سفید کرده و نوع ترکیبی آن را به multiply تغییر داده و opacity=20% را کم کرده ایم تا به نتیجه زیر برسِد:
این عکس بافت اصلی سایت ما خواهد بود بنابراین دستور Edit>Define pattern را اجرا کرده و نام مناسبی به تصویر بدهید.
در این قسمت سیستم شبکه بندی رایگان 960 را دانلود کنید. و آن را بصورت psd در فتوشاپ بازکرده و سپس به سند خود انتقال دهید.
هدف از این سیستم شبکه ای این است که شما بتوانید با کمک خطوط ، طراحی بهتری انجام دهید. حالا ارتفاع این سند را به height=1470 تغییر دهید برای اینکار باید از دستور Image>Canvas size استفاده کنید. به تصویر زیر نگاه کنید:
همانطور که میبینید ما تمام طرح خود را زیر شبکه بندی قرار داده ایم و با مخفی کردن شبکه بندی کار طراحی را ادامه میدهیم، و هنگام چیدمان عناصر دوباره شبکه بندی را ظاهر می کنیم.
حالا لایه پس زمینه سایت را با الگویی که در اول این آموزش ایجاد کرده اید پر کنید برای اینکار از دستور Edit>Fill استفاده کنید.
حالا یک لایه جدید ایجاد کنید، در این لایه در بالای سایت یک ناحیه نورانی ایجاد کنید و opacity=30% لایه را کم کنید. حالا یک لایه دیگر ایجاد کرده و یک براش کمی لک و پیس به ناحیه درخشان اضافه کنید ما از براش WG Grunge Brushes استفاده کرده ایم ولی شما میتوانید از براش های رایگان فتوشاپ هم برای اینکار استفاده کنید. براش های سری Chalk افکت مشابهی ایجاد خواهند کرد. لایه های نور و بکگراند را باهم درون یک پوشه قرار دهید . اگر لایه بکگراند قفل است آنرا با استفاده از کلید Alt را فشرده و دبل کلیک روی آن از حالت قفل خارج کنید.
گام 2: ایجاد هدر سایت
حالا که بکگراند سایت را ایجاد کرده ایم، باید هدر سایت را ایجاد کنیم. برای اینکار ابتدا باید یک الگوی زیبا ایجاد کنیم . بنابراین یک سند 20×60 pixels ایجاد کرده و سپس آن را با رنگ سفید پر کنید. حالا با کمک ابزار خط کش یک خط راهنمای افقی در ارتفاع 50 پیکسلی ایجاد کنید.
با ابزار رسم انتخاب مستطیل یک ناحیه انتخاب از این خط تا به پایین سند ایجاد کنید:
کلید Alt را نگه داشته و در پنل لایه ها روی ایکون ماسک لایه کلیک کنید. برای کسب اطلاعات بیشتر درباره ماسک گذاری به آموزش ماسک گذاری در فتوشاپ و یا انواع مختلف ماسک مراجعه کنید. ماسک کردن باعث پنهان شدن ناحیه انتخابی از دید ما خواهد شد:
با ابزار رسم بیضی یک دایره با قطر 20 pixels ایجاد کنید. برای ایجاد یک شکل با ابعاد ثابت ابتدا ابزار بیضی را انتخاب کرده و سپس در نوار آپشن به آن اندازه ثابت بدهید.
دایره را در زیر سند قرار دهید حالا از تصویر موجود یک الگو برای ترکیب با هدر سایت ایجاد کنید:
در سند اصلی ، یک لایه جدید ایجاد کیند و یک ناحیه انتخاب با 60 pixels ارتفاع در بالای سند ایجاد نمایید.
لایه جدید را در ناحیه انتخاب با الگویی که در گام قبل ایجاد کردید پر کنید و opacity=50% لایه را تنظیم کنید:
یک مستطیل با ارتفاع 5 pixels با رنگ آبی با کد هگزادسیمال #506271 ایجاد کنید و آن را در بالای سند قرار دهید.
گام 3: به هدر منو و لوگو را اضافه کنید
منوی خود را به قسمت بالا سمت راست اضافه کنید. از فونت Arial=13pt استفاده کنید. رنگ متن ها را مطابق با رنگ خط بالای سایت انتخاب کنید
بعد از تایپ تمام منو ها آنها را انتخاب کنید و با ابزار align در نوار آپشن آنها را در یک خط قرار دهید:
برای لوگو ، ما کار خود را با ایجاد یک دایره با گزینه های ترکیبی زیر شروع کرده ایم:
یک لایه جدید ایجاد کنید روی لایه دایره کلید ctrl+click را بزنید تا دایره به حالت انتخاب در بیاید، حالا دستور Select>Modify>Contract=4px را اجرا کرده و با ابزار گرادینت یک گرادیانت از سفید به ترانسپرنت از بالا به پایین ایجاد کنید . کلید Ctrl+D را زده و از ناحیه انتخاب خارج شده و opacity=40% لایه را کم کنید:
ما با فونت Anivers که بصورت رایگان از اینترنت قابل دریافت است. لوگوی خود را ایجاد کرده ایم، شما میتوانید با ابزارهایی مانند pen و یا با فونت دیگری این لوگو را ایجاد کنید. ما متن عنوان سایت را با همان گرادینت لوگو ایجاد کرده و از آن یک کپی در زیر خود لایه ایجاد کرده و رنگ آن را سفید کرده و با یکبار زدن کلید سمت راست آن را به سمت راست برده ایم تا افکت برجستگی پیدا کند:
گام 4: افزودن شرح فعالیت های سایت
در این طرح بجای کوچکتر بودن شرح این قسمت بیشترین توجه را به خود جلب خواهد کرد.
ما این متن ها را با فونت Chunk برای متن های ضخیم و Aniverse برای فونت های نازک در پاراگراف انتهایی و Gabrielle برای کاما و زیگما ایجاد کرده ایم . شما میتوانید اینکار را با فونت های دیگری ایجاد کنید.
برای زیگما و کما از رنگ #506271 استفده شده است و استایل لایه ای مطابق شکل زیر به آن قسمت ها داده ایم:
متن را کپی کرده و کپی را به زیر متن اصلی ببرید. تمام استایل های لایه را حذف و فقط استایل color overlay را نگه دارید. با ابزار جابجایی آنرا انتخاب کرده و یکبار کلید جهت دار سمت راست را بزنید و یکبارهم کلید جهت دار پایین را فشار دهید. حالا روی لایه راست کلیک کرده و گزینه rasterize type را انتخاب کنید متن اصلی را به حالت انتخاب در آورده و کلید delete را برای حذف پیکسل ها بزنید تا یک خط دور سفید برای آن ایجاد شود.
تمام قسمت های هدر سایت را در پوشه ای بنام header قرار دهید.
گام 5: نمایش آخرین کارها
در این گام اولین کاری که انجام میدهیم این است که قسمت توضیحات را از قسمت نمایش کارها یا کالاها جدا کنیم . برای اینکار ما از یک متن و دو خط استفاده می کنیم. فونت متن Arial=18pt است . برای اینکه انتهای خطوط را محو کنیم از ماسک لایه استفاده کرده ایم. برای اینکار بعد از افزودن ماسک با گرادیانت قسمت انتهایی را ماسک کنید تا به شکل درست در بیاید:
یکبار دیگر ما همه چیز را کپی کرده و رنگ آن را به سفید تغییر داده و کپی را به پایین سمت راست لایه اصلی انتقال داده ایم و opacity=70% لایه کپی را کمتر کرده ایم.
در این جا میتوانیم برای عکس های نمونه کارهای خود یک قاب طراحی کنیم . برای اینکار از یک مستطیل 220×194 pixels استفاده کرده ایم . و خطوط راهنما را فعال کنید. و مستطیل را درست مانند تصویر درج کنید:
به این مستطیل استایل لایه مطابق با تصویر زیر بدهید:
مستطیل را کپی کرده و آنرا به زیر لایه اصلی منتقل کنید. تمام استایل های لایه را حذف کنید و تنها استایل لایه black color overlay را اعمال کنید. ما قصد داریم که یک سایه نرم به این قاب بدهیم. حالا لایه را rasterize کنید برای انجام اینکار از دستور layer>Rasterize استفاده کنید. و سپس دستور Edit>Transform>Distort را بدهید. و مربع گوشه سمت راست بالای مستطیل را به سمت چپ و پایین بکشید به تصویر زیر نگاه کنید:
به سایه فیلتر Filter>Blur>Gaussian Blur=4 pixels بدهید . (مترجم: برای واقعی شدن لایه نوع ترکیبی آن را تغییر دهید معمولا نوع ترکیبی multiply بهترین تاثیر را بر روی سایه دارد.)
با ماسک لایه و یا پاکن قسمت های اضافه سایه را حذف کنید:
یک لایه بالای لایه قاب عکس ایجاد کنید .روی لایه قاب Ctrl+click کنید تا انتخاب شود. ناحیه انتخاب شده را با رنگ سیاه پر کنید ما از کد رنگ هگزا دسیمال #64594d که قهوه ای تیره است استفاده کرده ایم. در حالیکه ناحیه انتخاب همچنان فعال است . دستور زیر را اجرا کنید: Select>Modify>Contract=1px و کلید delete را بزنید. و افکت inner stroke=1px را اضافه کنید:
ما با همین روش سایر قاب عکس ها را ایجاد کرده و تصاویر خود را درون آنها قرار داده و آنها را در یک پوشه به نام gallery گذاشته ایم.
گام 6: پاصفحه سایت را طراحی کنید
در ادامه باید پاصفحه سایت خود را ایجاد کنیم. برای اینکار ابتدا باید بین گالری نمونه کارها و پاصفحه تضاد ایجاد کنیم. لایه پس زمینه هدر را کپی کرده و آنرا در جهت عمودی معکوس می کنیم، اینکار با دستور Edit>Transform>Flip vertical قابل انجام است و بعد از تعیین مکان آن رنگ آن را به کد هگزادسیمال #506271 تغییر دهید ما opacity=100% لایه را تغییر داده ایم . برای ایجاد تصویر زیر یک مستطیل با همان رنگ به قسمت پاصفحه اضافه کنید:
برای ایجاد بافت به پا صفحه ما در یک لایه جدید و با براشی با opacity پایین سعی کرده ایم که حالت لک و پیس ایجاد کنیم برای ایجاد افکت تصویر زیر از براش chulk استفاده شده است. که در لیست براش های پیشفرض فتوشاپ قرار دارد. شما میتوانید از براش های رایگان Grunge هم استفاده کنید.
در این قسمت من تصمیم گرفتم که پاصفحه را به سه قسمت تقسیم کنم برای اینکار ابتداباید دوباره سیستم شبکه را فعال کرده و سه قسمت Get in touch و connect with me و Twitter updates را با فونت Arial =18pt تایپ می کنیم:
در اولین قسمت ما فرم تماس با ما را به پاصفحه اضافه میکنیم. ابتدا فیلد نام را اضافه کرده ایم:
حالا به این قسمت استایل لایه بدهید :
ما متن های خود را با همان افکت سایه سفید در پایین را اضافه کرده ایم و سپس فیلد های دیگر و دکمه ارسال را اضافه کرده ایم:
در بخش مرکزی پاصفحه ما لینک به شبکه های اجتماعی را ایجاد کرده ایم . و علاوه بر متن از ایکون این شبکه های اجتماعی استفاده کرده ایم.:
در قسمت راست پاصفحه ما شکلی را ایجاد کرده ایم که با استفاده از اشکال سفارشی فتوشاپ ایجاد شده است . و به آن همان استایل لایه فیلد های قسمت سمت چپ پا صفحه را داده ایم. و بالای آن از ایکون تویتر استفاده کرده ام.
در قسمت زیر پا صفحه از دو خط و یک ایکون استفاده کرده ایم. شما میتوانید هر ایکون دلخواهی را جایگزین کنید.
این آموزش همینجا به پایان رسید برای دانلود آموزش های بیشتر به صفحه آموزش فتوشاپ مراجعه کنید.