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




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


متن آموزش در ادامه مطلب...
تصویر نهایی آموزش را می بینید که با یادگیری این آموزش قالبتان به این شکل می شود!
تصویر نهایی
1-قبل از آغاز آموزش شما می بایست تمپلیت 960 Grid را دانلود کنید. شما می توانید سیستم 960 grid را از آدرس 960.gs دانلود کنید.
 بعد از دانلود فایل را توسط برنامه Winrar خارج نمائید و فایل PSD را را با فتوشاپ باز کنید. قالب 960 گرید دارای دو حالت می باشد: یکی 12 ستونه و دیگری 16 ستونه . در صورتی که قالبی که میخواهید طراحی کنید سه ستونه هست از نوع 12 ستونه گرید باید استفاده کنید. اگر هم می خواهید طراحی با 4 ستون را در فتوشاپ طراحی نمائید می توانید از نسخه 16 ستونه یا همان 12 ستونه گرید استفاده کنید. اگر شما آموزش را دنبال نمائید متوجه توضیحات 12 ستونه و 16 ستونه خواهید شد و می توانید تشخیص دهید از کدامیک استفاده کنید.

2-قبل از هر کاری فایل PSD دانلود شده را در داخل فتوشاپ برای طراحی باز کنید ، ما اول نیاز داریم به یک طرح اولیه و کلی از وب سایتمان که در تصویر زیر می توانید نمونه کلی طرح را ببینید.
اتد طرح اصلی
3- پس از تعریف تعیین کردن طرح و ساختار کلی قالب فایل 16_Col.PSD را در فتوشاپ باز کنید. کلیدهای ترکیبی ( Alt+Ctrl+C) را بزنید یا به منوی Image > Canvas size بروید و گزینه ها را بر روی 1200px طول و 1700px ارتفاع قرار دهید و رنگ پس زمینه را # FFFFFF تعیین کنید.
03



4- یک لایه با کلیدهای (Ctrl+Shift+N) ایجاد کنید و با ابزار Rectangle Tool یا زدن کلید ( M ) به اندازه 80px در عرض مانند تصویر یک مستطیل ایجاد کنید و با کد رنگ #dddddd آن را پر کنید.

 5-یک لایه جدید دیگر بسازید و تنظیم حالت لایه را روی Overlay قرار دهید . حالا یک براش نرم با 600px و با رنگ سفید مانند تصویر در نظر بگیرید و چند بار با لبه قلمو بر روی بالای مستطیل کلیک کنید تا افکت نور لطیف به کار داده شود.

افکت...
6-یک لایه دیگر ایجاد کنید و با ابزار Rectangle Tool یک مستطیل بسیار کوچک مانند تصویر ایجاد کنید و با رنگ خاکستری تیره آن را پر کنید.

 7-با همان ابزار Rectangle Tool یک مستطیل 500px در پایین تصویر بکشید و بعد یک لایه بسازید و با رنگ سفید پر کنید و روی لایه کلیک راست کرده و گزینه Blending Option را انتخاب کنید و گزینه Gradient Overley را انتخاب و در کادر آن رنگ های گرادینت را بین #d2d2d0 و #ffffff قرار دهید و Angel را روی -90 درجه بگذارید و Scale را هم 100% قرار دهید.

 8-حالا برای ایجاد افکت نور مانند مرحله پنج عمل می کنیم . از این به بعد نیز برای استفاده های بعدی شما را به مرحله پنج ارجاع می دهم. یک لایه جدید ایجاد کنید و و تنظیم لایه را روی Overlay بگذارید و با استفاده از ابزار براش یک براش نرم با اندازه 600px در نظر گرفته و چند بار بر روی لبه مستطیل بزرگ کلیک می کنید تا افکت نور به آن داده شود.

بلندینگ آپشن
9-با ابزار رسم مستطیل یک مستطیل 400px در بالای صفحه بکشید و یک لایه جدید ایجاد کنید و آن را با رنگ سفید پر کنید و با ابزار گرادینت با کد رنگ #2787b7 و #258fcd یک گرادینت آبی مانند تصویر ایجاد کنید.
گرادینت

10-یک لایه جدید ایجاد کنید و با ابزار رسم مستطیل یک خط 1px در پایین کادر آبی ایجاد کنید و آن را با رنگ آبی تیره پر کنید و با کلیک بر روی لایه گزینه Blending Option را انتخاب و از کادر باز شده Drop Shadow را انتخاب کنید و تنظیمات را به صورت : Blend mode: Multiply, Opacity: 65%, Angle: -90, Distance: 1px and Size: 6px قرار دهید. یک لایه دیگر هم ایجاد و با همان ابزار یک مستطیل 1px این بار در بالای کادر آبی رنگ می کشید و با همان تنظیمات قبلی آن را افکت می دهید. به این ترتیب کادر ما دارای لبه های برجسته و تیز می شود.

برای امروز کافیه...
پیروز باشید...




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


جمعه 13 مرداد 1396 19:52
Thank you for the good writeup. It in fact
was a amusement account it. Look advanced to more added agreeable
from you! However, how could we communicate?
شنبه 7 مرداد 1396 08:04
Hello there, You have done an incredible job. I will definitely digg it and personally suggest to my friends.
I'm confident they'll be benefited from this site.
دوشنبه 28 فروردین 1396 00:57
Thanks for finally writing about >گرافیک - آموزش
طراحی قالب سایت در فتوشاپ از ابتدا <Loved it!
دوشنبه 21 فروردین 1396 06:52
certainly like your website however you need to check the spelling on quite a
few of your posts. A number of them are rife with spelling issues and I find it very
troublesome to tell the reality nevertheless I'll definitely
come again again.
شنبه 12 فروردین 1396 23:22
Hey I am so glad I found your weblog, I really found
you by error, while I was looking on Google for something else,
Nonetheless I am here now and would just like to say thank you for a
remarkable post and a all round entertaining blog (I also love the
theme/design), I don't have time to read it all at the moment but
I have saved it and also included your RSS feeds, so when I
have time I will be back to read a great deal more, Please do keep up
the fantastic job.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر