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




مدیر وبلاگ : کاوه گرافیکیان
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
گرافیک
صفحه نخست             تماس با مدیر           پست الکترونیک               RSS                  ATOM
این پست ، آموزش چگونگی طراحی یک سایت زیبا در فتوشاپ رو قرار دادم که سعی شده تا به صورتی روان و ساده آن را توضیح و شرح داده بشه.که در آخر هدف نهایی از این آموزش ، آشنا شدن و استفاده از ابزارها و تکنیک های بسیار عالی برای طراحی یک وب سایت کاربرپسند و فوق العاده است که امیدوارم از این آموزش هم بهره کافی را ببرید...
این آموزش هم مثل آموزش قبلی ترجمه ای از یک آموزش انگلیسیه.
امید وارم مفید واقع بشه.

پیش نمایش

متن کامل آموزش در ادامه مطلب...

دانلود فایل های مورد نیاز برای این آموزش رو از این لینک دانلود کنید.

مرحله 1 - تنظیم سند در فتوشاپ


ابتدای کار باید یک سند فتوشاپی با استفاده از کلیدهای (Ctrl+Shift+N) و با ابعاد 1200*910 پیکسل و وضوح 300 پیکسل ایجاد کنید.

مرحله 2- سیستم 960 Grid

در این مرحله نیاز است که از سیستم 960gs استفاده کنیم که طرح 16 ستونی را از سایت 960 Grid دانلود و در فتوشاپ خود وارد کنید و این لایه جدید که متشکل از 16 ستون و به عنوان راهنمای کار است را در بالای تمام لایه ها در فتوشاپ قرار دهید.

مرحله 3- طرح بندی

در اینجا در پانل ابزار فتوشاپ ، ابتدا رنگ پس زمینه را به قهوه ای تیره (#362a21) و رنگ دیگر را به قهوه ای نارنجی (#bc7821) تغییر دهید و سپس با ابزار Gradient Tool و یا زدن دکمه (G) انتخاب کنید و در نوار بالای فتوشاپ گزینه و تصویر Radial Gradient را بزنید و در مرکز سند یک گرادینت ایجاد کنید.

گرادینت ایجاد شده کمی خام به نظر می رسد ، بنابر این به منوی “Filter > Convert for Smart Filter” را انتخاب کنید . با انجام این کار ، ما امکان ایجاد تغییرات بر روی این لایه را خواهیم داشت.

و در گام بعدی برای اضافه کردن افکت نویز منوی ” Filter > Noise > Add Noise ” را انتخاب کنید و گزینه Amount را در 2.5% قرار دهید.

در گام بعدی برای ایجاد درخشش بیشتر در قسمت بالای تصویر با استفاده از ابزار Brush Tool و یا با زدن کلید (B) انتخاب کرده و همچنین پالت رنگ را سفید انتخاب کنید و بعد روی تصویر کلیک راست کرده و اندازه براش را روی 700px قرار دهید .

سپس یک لایه جدید با استفاده از کلیدهای ( ctrl+shift+n ) ایجاد کرده و بعد با اساتفاده از قلموی براش یک براش نرم روی لایه ایجاد کنید.

بعد از آن گزینه Blend Mode را در نوار ابزار لایه ها روی Overlay با 34% قرار دهید.

سپس بافت زنگ زده و معرفی شده در لیست ابتدای آموزش را در فتوشاپ باز کنید و بر روی لایه های دیگر تصویر قرار داده و آن را با استفاده از کلیدهای ( ctrl+t ) تغییر اندازه و کوچکتر کنید.

بعد از آن با استفاده از قلمو یا براش نرم و یا پاکن کن یا ابزار Eraser Tool و با زدن کلید (E ) کمی از دو طرف لایه و بافت زنگ زده را پاک کنید.

سپس از نوار لایه ها و Blend Mode را روی Overlay و 16% قرار دهید.

در گام بعدی بافت فلز که در لیست بالا قرار داشت را در فتوشاپ باز کرده و با پاک کن و ابزار براش ، دو طرف بافت لایه را پاک کرده و اندازه آن را هم تنظیم کنید و گزینه های Blending Mode را روی Opacity و 15% قرار بدید.

مرحله 4 - اضافه کردن نام سایت

در این مرحله ، ابزار Horizontal Type Tool را با زدن کلید (T) انتخاب کنید و فونتی را که مد نظر دارید از نوار بالای فتوشاپ انتخاب کرده و همچنین رنگ متن را هم قهوه ای (#523117) قرار دهید . سپس نام “JohnDoe Photography” را در وسط تصویر تایپ کنید و البته می توانید هر نامی که دوست دارید به آن بدهید و بعد از تایپ آن را وسط چین قرار بدید.

در قسمت بعدی با استفاده از نگه داشتم کلیدهای (alt+mouse) یک کپی از لایه متن خود تهیه کنید و رنگ آن را سفید (#ffffff) در نظر بگیرید و همچنین از نوار لایه ها Blend Mode را روی Overlay قرار داده و Opacity آن را 32% تنظیم کنید.
سپس با انتخاب کلید (V) ابزار Move Tool را انتخاب کرده و لایه دومی را به اندازه 1px از لایه اول پایین تر قرار دهید تا افکت متن شما تورفتگی و افکت بهتری پیدا کند.

مرحله 5 - ایجاد منوی ناوبری

یک لایه جدید با انتخاب کلیدهای ( ctrl+shift+n ) ایجاد کنید و با ابزار Horizontal Type Tool اسامی منو ها را پشت سرهم و البته با تنظیماتی که در تصویر مشهود است ، تایپ کنید و آن را زیر نام وب سایت قرار بدید.


در قسمت بعدی باید برای منوها یک حالت انتخابی ایجاد کنیم. برای این کار ابزار Rectangle Tool را با زدن کلید (U) انتخاب کنید و در نوار بالای فتوشاپ تصویر و گزینه Shape Layers را انتخاب کرده و Radius آن را 30px قرار بدید.
بعد از آن یک مستطیل گرد شده برای یکی از منوها مثلا منوی “Home” رسم کنید.

در گام بعدی ، با دوبار کلیک روی لایه مستطیل گردی که ایجاد کردیم ( روی لایه مستطیل در پنل لایه ها دوبار کلیک کنید تا پنجره جدیدی باز شود ).

در پنجره باز شده گزینه Color Overlay را انتخاب کرده و تنظیم رنگ را روی زرد (#f9a81f) قرار دهید.

سپس در پنجره باز شده گزینه Inner Shadow را هم انتخاب و تنظیم رنگ درونی را به سیاه و سفید (#000000) تغییر بدید.

همچنین ، Opacity لایه مستطیل گرد را روی 30% قرار بدید تا با زمینه اصلی یکسان شود.

بعد از آن برای انتخاب اطراف مستطیل گرد باید با فشردن کلیدهای ( ctrl+mouse ) در پنل لایه ها و بر روی لایه مستطیل گرد شده ، آن را انتخاب کنید.

با ایجاد یک لایه جدید و همچنین رفتن به منوی ” Edit > Stroke ” و تنظیم گزینه ها مانند تصویر زیر.

سپس Blend Mode از پنل لایه ها را روی Overlay و تنظیم Opacity را روی 18% قرار دهید. و بعد با استفاده از ابزار پاک کن یا زدن کلید (E) ، بالای لایه را کمی پاک کنید تا فقط پایین مستطیل گرد افکت دار و روشن بماند.

مرحله 6 - ایجاد بخش نمایش تصاویر به صورت Slideshow

یک لایه جدید دیگر ایجاد کنید. با استفاده از ابزار Rectangular Marquee Tool یا زدن کلید (M) ، یک مستطیل زیر منوی ناوبری بکشید و سپس با زدن کلید (Shift + F5) یا رفتن به منوی ” fill < edit ” را انتخاب کرده و در پنجره باز شده در اولین گزینه color را انتخاب و کد رنگ را روی سیاه و سفید (#000000) قرار بدید. فقط مطمئن شوید که مستطیل کشیده شده مطابق اندازه 14 ستون و اندازه منوی ناوبری باشد.

بعد از آن در پنل لایه ها Blend Mode را روی Soft Light قرار بدید.

در گام بعدی یک تصویر غروب آفتاب که در فهرست اول این آموزش بود را در فتوشاپ باز کرده و بر روی تصویر اصلی مان می اندازیم و اندازه و مقیاس آن را با مستطیل کشیده شده ، با استفاده از ابزار Free Transform یا زدن کلیدهای ( ctrl+t) همسان کنید.

سپس لایه عکس غروب آفتاب را غیرفعال می کنیم و با ابزار Rectangular Marquee Tool یا با زدن کلید (M) یک مستطیل دیگر در داخل مستطیل قبلی بکشید .

بعد از آن با انتخاب تصویر و دکمه Add Layer mask در قسمت پایین پانل لایه ها ، مستطیل ایجاد شده را ماسک کنید و سپس عکس غروب آفتاب را فعال کنید.

مرحله 7 - ایجاد کنترل نمایش تصاویر به صورت Slideshow

یک لایه جدید دیگر با زدن کلیدهای (ctrl+shift+n ) ایجاد کنید و آن را زیر لایه باکس نمایش تصاویر قرار دهید. و یک لایه جدید دیگر نیز در داخل این لایه ایجاد کنید.

ابزار Ellipse Tool را با زدن کلید (U) انتخاب کنید و یک دایره در سمت چپ باکس نمایش بکشید.

بعد از آن ابزار Gradient را انتخاب کنید و Blend Mode را روی Overlay قرار بدید و درون دایره بکشید.

و تنظیم رنگ را با دوبار کلیک کردن بر روی لایه دایره در پنل لایه ها و انتخاب گزینه Outer Glow ، روی رنگ سیاه و سفید (#000000) قرار بدید.

و بعد گزینه Gradient Overlay را انتخاب و رنگ اولی را روی قهوه ای تیره (#271303) و رنگ بعدی را روی قهوه ای روشن تر (#3a2102) قرار بدید.

دقیقا باید دایره ای را که کشیدید به شکل تصویر زیر باشد.

در این جا نیاز داریم تا قسمت های غیرضروری دایره را حذف کنیم. برای این کار ، به منوی ” Layer > Rasterize > Shape ” بروید. سپس با استفاده از ابزار Rectangular Marquee Tool یا زدن دکمه (M) یک مستطیل بکشید و سپس دکمه Delete را بزنید.

در گام بعدی باید یک دکمه فلش ایجاد کنیم. یک لایه جدید ایجاد کنید و با ابزار Rounded Rectangle Tool یا زدن کلید (U) و تنظیم آن بر روی گزینه های Shape Layers و گزینه Radius آن روی 30px قرار بدید.

با ابزار انتخاب شده یک قسمت فلش را مانند تصویر بکشید و البته بعد از آن با دو بار کلیک بر روی لایه جدید و در پنجره جدید و انتخاب گزینه Color Overlay ، تنظیم رنگ را روی نارنجی تیره (#b56d1b) قرار بدید.

برای ایجاد طرف دیگر فلش ، ابتدا با نگه داشتن کلیدهای ( alt+mouse ) یک کپی از فلش می گیریم و با استفاده از منوی ” Edit > Transform Path > Flip Horizontal ” آن را در کنار فلش قبلی قرار بدید.

بعد از آن دو لایه فلش را انتخاب و سپس با رفتن به منوی “Edit > Transform > Rotate” یک چرخش 90 درجه به فلش ها بدهید.

برای ادغام دو لایه فلشی که ایجاد کردید ، ابتدا دو لایه را با هم انتخاب و با زدن کلیدهای ( ctrl+e ) آنها را با هم ادغام کنید.

سپس یک کپی از لایه ادغام شده فلش تهیه کنید و با دوبار کلیک بر روی لایه کپی و در پنجره باز شده و انتخاب گزینه Color Overlay ، تنظیم رنگ را روی سیاه (#000000) قرار بدید و همچنین با ابزار Move Tool ، لایه کپی شده را به اندازه 1px به سمت چپ انتقال بدید تا تصویر فلش افکت دار شود.

برای ایجاد فلش در سمت راست ، ابتدا لایه های مربوط به فلش را انتخاب کنید و یک کپی از آن تهیه کنید و با رفتن به منوی ” Edit > Transform > Flip Horizontal ” فلش را به سمت راست انتقال و 90 درجه بچرخانید.

اکنون باید تصویری شبیه زیر داشته باشید.

مرحله 8 - ایجاد عکس و تصویر کوچک به صورت Thumbnails

با توجه به لایه 16 ستونی که از سایت grid960 دانلود کردید و با استفاده از ابزار Rectangular Marquee Tool و زدن کلید (M) ، به اندازه 4.5 ستون ، یک مستطیل در زیر باکس نمایش تصاویر بکشید و رنگ آن را سیاه (#000000) قرار بدید. و از پانل لایه ها Blend Mode را روی Soft Light قرار بدید.

یک عکس آفتابگردان که در ابتدای آموزش فهرست شده است را در فتوشاپ باز کنید و آن را درون تصویرتان بکشید و اندازه آن را 80% تغییر اندازه بدید.

سپس عکس آفتابگردان را غیرفعال کنید و با ابزار Rectangular Marquee Tool و یا زدن کلید (M) ، یک مستطیل دیگر درون مستطیل قبلی بکشید و دکمه و تصویر Add layer mask در پانل لایه ها را بزنید تا دو مستطیل با هم ماسک شوند و بعد عکس آفتابگردان را فعال کنید.

عد از مراحل دیگر ، باید یک منطقه برای نوشتن نام عکس در زیر تصویر ایجاد کنیم. با استفاده از ابزار Rectangular Marquee Tool ، یک مستطیل در پایین عکس آفتابگردان بکشید و داخل آن را با رنگ تیره قهوه ای (#261103) پر کنید. و بعد از پانل لایه ها Opacity را روی 85% قرار بدید.

سپس با ابزار Horizontal Type Tool یا زدن دکمه (T) ، یک نام مثلا “NATURE” را تایپ کنید و رنگ فونت را زرد (#ffbf47) قرار بدید.

بعد از آن می توانید با همان ابزار تایپ و فونت و رنگ مورد نظر ، یک مطلب در زیر کادر تصویر به عنوان توضیحات عکس تایپ کنید.

در گام بعدی ، تکرار روند بالا را بر روی دو تصویر دیگر که تصویر بچه و بکگراند است را انجام دهید. البته می توانید از قسمت قبلی و لایه های آن یک کپی ایجاد و فقط نام تصویر و توضیحات آنها را تغییر دهید.

مرحله 9 - ایجاد پاورقی یا Footer

یک لایه جدید با کلیدهای ( ctrl+shift+n ) ایجاد کنید. ابزار Pencil Tool را با زدن کلید (B) انتخاب کنید و تنظیم رنگ را روی قهوه ای تیره (#2c1303) قرار بدید. به اندازه 14 ستون و به اندازه بالا و پایین صفحه ، یک خط در قسمت پایین تصویر بکشید. با نگه داشتن کلید ( Shift ) می توانید یک خط صاف بکشید.

یک کپی از لایه خطی خود بگیرید و با دوبار کلیک بر روی لایه کپی شده و در صفحه باز شده و انتخاب گزینه Color Overlay و تنظیم رنگ را روی سفید (#ffffff) قرار بدید. و با ابزار Move آن را 1px به پایین حرکت دهید. و Blend Mode را روی Overlay و گزینه Opacity را روی 18% قرار بدید.

در آخر کار ، با استفاده از ابزار Horizontal Type Tool یا زدن کلید (T) ، در پایین خط کشیده شده یک متن تایپ کنید مثلا ( copyright information ) یا برخی از اطلاعات کپی رایت.

این هم از نتیجه پایانی کارمون... 

پیش نمایش

پیروز باشید و شاد...





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


جمعه 13 مرداد 1396 18:26
You have made some really good points there. I checked on the internet to find out more about the issue and found most individuals will go along with your views on this web site.
شنبه 7 مرداد 1396 08:42
It's going to be end of mine day, but before ending I
am reading this fantastic post to increase my experience.
سه شنبه 22 فروردین 1396 09:14
Hmm is anyone else encountering problems with the images on this blog loading?
I'm trying to figure out if its a problem on my end or if it's the blog.
Any suggestions would be greatly appreciated.
دوشنبه 21 فروردین 1396 10:14
Thank you for sharing your thoughts. I truly appreciate your efforts and I am waiting
for your further post thank you once again.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر