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




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

البته در ادامه مطلب...
به اونجایی رسیدیم که چند بخش از سایتمون رو طراحی کردیم و حالا ادامه داستان...

 11- به منوی Image > Canvas size بروید و از فلش ها ، فلش بالا را انتخاب و 50px را در گزینه Height وارد کنید تا کادری به اندازه 50 پیکسل در بالای کادر آبی ایجاد شود و رنگ آن را هم خاکستری کنید و بعد یک لایه ایجاد کنید و با استفاده از ابزار رسم مستطیل مانند تصویر به اندازه همان 50px مستطیل در نظر بگیرید و دوباره با همان ابزار 1px در بالا رسم و رنگ آن را خاکستری تیره قرار دهید و بر روی لایه کلیک راست کرده و گزینه Blending Option را کلیک کنید و گزینه Drop Shadow را انتخاب و تنظیمات را مانند تصویر اجرا کنید.

12- با انتخاب ابزار Rounded Rectangle Tool یا زدن کلید L یک مستطیل با گوشه گرد با اندازه 5PX در گزینه Radius در بالای کادر و به اندازه 60*30 بکشید و رنگ آن را هم نارنجی یا زرد در نظر بگیرید و بر روی لایه کلیک راست کنید و از گزینه Blending Option تنظیمات را مانند زیر وارد کنید.

Inner Shadow – color: #ffffff, Blend mode: overlay, Opacity: 60%, Angle: 120*, Distance: 7px, Size: 6px
Inner glow – Blend mode: normal, color: #ffffff, Size: 4px

حالا بر روی همان لایه یا Shape با کلیدهای Ctrl+Mouse کلیک کنید و از منوی Select > Modify > Contract در کادر 1px را وارد کنید.

بعد از آن یک لایه جدید بسازید و تنظیمات را مانند مرحله پنج انجام دهید و بر روی منوی ساخته شده با براش نرم افکت نور دهید. بعد از آن با انتخاب فونت مورد نظرتون در داخل کادر نام منو ها را پشت سر هم ولی با فاصله مناسب بنویسید و رنگ و اندازه مورد دلخواهتان را به آن بدهید.

13- با ابزار Rounded Rectangle Tool یک مستطیل با گوشه گرد با اندازه 5PX در گزینه Radius در بالای کادر به اندازه یک کادر سرچ بکشید و رنگ آن را رنگ مشکی که در بالای سایت است قرار دهید و روی لایه کلیک راست کرده و تنظیمات را به صورت زیر انجام دهید:

Inner Shadow – color: #000000, Blend mode: Multiply, Opacity: 9%, Angle: 90*, Distance: 0px, Size: 6px
Stroke – Size: 1px, Position: inside, color: #dfdfdf

و در کادر ایجاد شده کلمه جستجو را بنویسید و به آن رنگ بدهید و از همان ابزار قبلی یک کادر کوچک دیگر برای سرچ کردن بکشید و رنگ را به آن بدهید.

برای سامان دادن به کارها یک Layer folder ایجاد کنید و نام به آن بدهید و اعمالی که برای ایجاد کادر جستجو انجام دادید با هم انتخاب و بگیرید و داخل پوشه بیندازید.


14- با ابزار رسم مستطیل و با همان اندازه در گزینه Radius یک کادر در پایین کادر جستجو بسازید و رنگ آبی به آن بدهید و هر افکتی که می خواهید بر روی آن اعمال کنید.

یک لایه جدید ایجاد کنید و مانند مرحله پنج اعمال کار کنیدو با انتخاب براش نرم اندازه را روی 45px قرار دهید و دور کادر را انتخاب کنید و با براش نرم چند بار روی لبه کادر بکوبید تا افکت نور به آن داده شود.

و نوشته ثبت نام را داخل کادر بنویسید و رنگ و اندازه دلخواه به آن بدهید و بعد از آن نوشته وارد شوید را هم در کنار کادر بنویسید و رنگ آن را هم تعیین کنید.

15- لوگو و شعار خود را در بالای منوها و در راس کادرها قرار دهید .

16-برای اینکه کار با لایه ها راحت تر شود و بعدا سردرگم نشوید چند پوشه با نام های Header و Footer و Main و Contect ایجاد کنید و لایه ها و بک گراند های مربوط به هر بخش را داخل هر پوشه بیندازید.

17-برای افکت دادن به تصویر ابتدا دور کادر آب رنگ را انتخاب و هایلایت کنید و با دستورالعمل مرحله پنج یک براش نرم با اندازه 600px در نظر بگیرید و بر روی لبه کادر انتخاب شده بکوبید تا تصویر زیباتر شود.

18-برای تصاویر وسط صفحه دو تصویر تهیه کنید و با کلیدهای Ctrl+T یکی را بزرگتر و دیگری را کوچکتر کنید و پشت تصویر بزرگتر قرار دهید و بعد از آن برای اینکه به دو تصویر سایه بدهیم ، و بعد از دو تصویر کپی تهیه کنید و از منوی Edit > Transform > Flip Vertical را انتخاب کنید و آنها را دقیقا زیر هم قرار دهید و ابزار Rectangular Marquee Tool را انتخاب و از منوی Select > Modify > Feather گزینه را روی 30px قرار دهید و مانند تصویر قسمتی را انتخاب کنید و Delete کنید که تصویر به صورت هاله ای و سایه دار ایجاد می شود.

برای ایجاد یک دایره کنار تصویرمان از ابزار Elipse Tool استفاده کنید و مانند مراحل قبل به آن افکت و نور بدهید. و نوشته های خود را با فونت مورد نظرتان در کادر آبی وارد کنید و با دستورا قبلی منوهای این بخش را مانند تصاویر بسازید.

19- اگر به تصویر نهایی دقت کرده باشید منوهای سه ستونه که در وسط صفحه قرار دارند که با همان ابزار Rounded Rectangle Tool ترسیم شده اند . شما هم با همان ابزار به اندازه Radius در 10px و به اندازه 70px از کادر آبی به پایین رسم کنید و افکت دور کادر را 1PX قرار دهید و رنگ و افکت را هم مشخص کنید.

برای اینکه لبه های پایینی کادری که کشیدیم صاف باشد با ابزار Direct Selection Tool یا زدن کلید A در پایین گوشه کادر کلیک کنید و با نگه داشتن Shift و ماوس را به پایین بکشید به طوری که دو نقطه پایینی هم دیگر را قطع کنند. به این ترتیب یک کادر گرد با گوشه صاف ساخته ایم.

20-ابزار Line Tool را انتخاب کنید و اندازه آن را روی 1px قرار دهید.

21-بعد از انتخاب ابزار کادری که در مرحله 19 کشیدیم را به چهار قسمت تقسیم کرده و در هر قسمت هم یک خط با ابزارمان می اندازیم.

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

23-برای اینکه هر Tab وقتی انتخاب شد با رنگ سفیدتر نمایان شود اینطور عمل می کنیم که کل کادر اول را انتخاب و هایلایت می کنیم و با قوانین قبلی افکت نور به آن بدهید.

24-یک لایه جدید بسازید و داخل ان را با رنگ خاکستری تیره پر کنید و زیر لایه کادر 3ستونی باشد سپس گزینه Vector Mask را مانند تصویر انتخاب کنید و سپس حالت رنگ را مانند تصویر قرار دهید و با براش نرم گوشه ها را بکوبید تا کادر سایه دار شود.

سپس با ابزار Line Tool یک خط 1px زیر کادر بکشید و رنگ به آن بدهید و با همان ابزار براش نرم گوشه های خط را بکوبید تا زیباتر شود.

25- یک لایه ایجاد کنید و با ابزار رسم مستطیل یک مربع مانند تصویر زیر کادرها بکشید و رنگ داخل آن را سفید پر کنید و با کلیک راست روی لایه به آن افکت Drop Shadow با اندازه 1px و رنگ خاکستری تیره بدهید. و از همان لایه چند کپی بگیرید و آنها را با کلیدهای Ctrl+T بچرخانید تا شبیه تصویر شوند . حالا یک تصویر انتخاب کنید و آن را وارد فتوشاپ کنید و روی لایه اصلی که صاف است قرار دهید .

روی لایه اصلی با کلید Ctrl+ Mouse کلیک کرده و از منوی Select > Modify > Contract انتخاب کرده و گزینه را روی 5px بگذارید و گزینه Vector Mask را بزنید تا تصویر دقیقا در مرکز لایه بنشیند.

26-برای لایه های خود پوشه بسازید و لایه ها و نوشته های مربوطه را در آن بیندازید .

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

27- با استفاده از ابزار همیشگی یک مستطیل بزرگ با کد رنگ f3f3f3# به اندازه 220px رسم کنید و گزینه Strok آن را روی 1px و با رنگ خاکستری تیره در نظر بگیرید. دوباره با همان ابزار یک مستطیل دیگر داخل مستطیل قبلی رسم کنید و کد رنگ #f7f7f7 را به آن بدهید و گزینه Strok آن را نیز 1px بگذارید و رنگ خاکستری کمرنگ تر در نظر بگیرید.


نوشته های خود را داخل کادر با هر آیکونی که می پسندید قرار دهید.

28-یک کادر در پایین صفحه با رنگ سیاه به اندازه 400px رسم کنید.

29-مانند مرحله پنج ابتدا کادر را انتخاب و هایلایت کنید و با براش نرم با رنگ سفید بر روی کادر بکوبید.

30-یک کادر دیگر به اندازه 10px در بالای کادر سیاه بکشید و رنگ خاکستری به آن بدهید و یک خط در ابتدای کادر سیاه با ابزار Line Tool با اندازه 1px بکشید و افکت Drop Shadow به آن بدهید و همین عمل را برای کادر خاکستری نیز اعمال کنید.

31-حالا یک مستطیل در پایین کادرها به اندازه 40px بکشید و رنگ خاکستری به آن بدهید و هر افکتی که می خواهید به آن بدهید و نوشته ها و لوگوها و آیکون های مورد نظرتان را در آن قرار بدید. اگر احساس کردید که صفحه کوچک می شود با استفاده از منوی Image > Canvas size به اندازه صفحه اضافه کنید.

32- با ابزار Line Tool یک خط سفید در پایین صفحه و یک خط هم در بالای صفحه بیندازید.

33- حالا نوشته ها و آیکون های خود را در پایین صفحه بچینید و به آنها رنگ و سایز دلخواهتان را بدهید.

34-در نهایت لایه ها و افکت ها و تصاویر خود را با ساخت پوشه در داخل آنها ساماندهی کنید.





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


دوشنبه 16 مرداد 1396 18:35
Hi, i think that i saw you visited my site thus i
came to “return the favor”.I am trying to find things to improve
my web site!I suppose its ok to use a few of your ideas!!
شنبه 14 مرداد 1396 00:28
Its like you read my mind! You seem to know a lot about this, like you wrote the book
in it or something. I think that you can do with a few
pics to drive the message home a little bit,
but instead of that, this is great blog. A great read.
I'll certainly be back.
یکشنبه 8 مرداد 1396 12:39
Excellent article. Keep posting such kind of info
on your page. Im really impressed by your site.
Hey there, You've performed a great job. I'll definitely digg it and in my opinion suggest to my friends.

I am sure they will be benefited from this website.
یکشنبه 8 مرداد 1396 02:55
Great site. Plenty of helpful information here. I'm sending it to several friends
ans also sharing in delicious. And naturally, thank you on your sweat!
شنبه 7 مرداد 1396 22:53
Hi, I desire to subscribe for this weblog to obtain most
recent updates, therefore where can i do it please help out.
شنبه 7 مرداد 1396 22:20
Greetings! I know this is kinda off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form?
I'm using the same blog platform as yours and I'm having trouble finding one?
Thanks a lot!
شنبه 7 مرداد 1396 19:25
hey there and thank you for your info – I have certainly picked
up something new from right here. I did
however expertise several technical points using this site, since I experienced to reload the web site many times previous
to I could get it to load properly. I had been wondering if your hosting is OK?
Not that I'm complaining, but slow loading instances times will sometimes
affect your placement in google and could damage your high quality score if ads and marketing with Adwords.
Anyway I am adding this RSS to my e-mail and could look out for a lot more of your
respective fascinating content. Make sure you
update this again very soon.
شنبه 7 مرداد 1396 12:33
Hey There. I found your weblog using msn. That is a really
smartly written article. I will be sure to bookmark
it and come back to learn more of your helpful info. Thanks for
the post. I'll certainly comeback.
شنبه 7 مرداد 1396 08:49
I wanted to thank you for this fantastic read!! I certainly enjoyed every bit of it.
I have got you book-marked to check out new things you
post…
یکشنبه 4 تیر 1396 21:06
core از خود نوشتن در حالی که صدایی دلنشین در آغاز آیا نه نشستن بسیار خوب با من پس از برخی از
زمان. جایی درون پاراگراف شما موفق به من مؤمن متاسفانه تنها
برای کوتاه در حالی که. من این کردم مشکل خود را با فراز در منطق و یک خواهد را سادگی به کمک پر همه کسانی شکاف.

در صورتی که شما که می توانید انجام من را بدون
شک بود تحت تاثیر قرار داد.
جمعه 2 تیر 1396 20:51
ریشه از خود نوشتن در حالی که صدایی دلنشین ابتدا آیا واقعا حل و فصل
کاملا با من پس از برخی از زمان.

جایی درون جملات شما موفق به من مؤمن متاسفانه فقط برای بسیار در حالی که کوتاه.
من هنوز مشکل خود را با فراز در مفروضات
و یک خواهد را سادگی به کمک پر کسانی
که معافیت. در صورتی که شما در واقع که می توانید انجام
من را قطعا تا پایان تحت تاثیر قرار داد.
جمعه 8 اردیبهشت 1396 21:05
Great goods from you, man. I have have in mind your stuff prior to and you are just too
great. I actually like what you have bought here, certainly like what
you're saying and the way in which through which
you say it. You're making it entertaining and you continue to
take care of to stay it wise. I can't wait to learn far more from you.
That is really a great website.
دوشنبه 28 فروردین 1396 05:40
Wow, that's what I was searching for, what a material! existing here at
this web site, thanks admin of this site.
سه شنبه 22 فروردین 1396 07:17
I got this web site from my friend who told me regarding this site and now this time
I am browsing this site and reading very informative articles at this time.
دوشنبه 14 فروردین 1396 19:32
Ahaa, its nice conversation concerning this piece of writing at this
place at this web site, I have read all that, so now me also commenting here.
جمعه 11 فروردین 1396 15:10
What a data of un-ambiguity and preserveness of precious
familiarity concerning unexpected feelings.
پنجشنبه 23 آبان 1392 20:20
salam, khyli khoub bood
lotfan begid agar bekhaym header v slidshow dar dide avale 1karbar bashe, masalan saizesh che qadr v in ke bastegi be safhe namayesh ham dare?
کاوه گرافیکیاندارم دربارش تحقیق می کنم.
یه تکنولوژی کد نویسی به اسم grid system 960 هست که اگر کامل مطلب رو متوجه بشم هم در برنامه نویسی و هم در چیدمان صفحه کمک بزرگی خواهد بود.
اما فعلا میشه از محاسبات ساده استفاده کرد.
ارتفاع یا عرض مانیتور ما به طور معمول 768 px هست:
ما با این پیش فرض می تونیم چیدمان طوری انجام بدیم که آنچه که می خواهیم در نظر اول تو دید بازدید کننده باشه رو قبل یا بالا تر از 768 قرارش بدیم.
به همین سادگی
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر