طراحی قالب سایت در فتوشاپ ( سطح:مبتدی )

[KIAN FAR]

برای شروع کار فایلی جدید با ابعاد ۸۰۰*۸۰۰ و رزولویشن ۷۲ پیکسل در فتوشاپ باز کنید و رنگ پس زمینه را سفید معین کنید. ابزار Rectangle Tool را انتخاب کنید و مانند شکل زیر مستطیلی در بالای صفحه بکشید و بعد از آن افکتهای زیر را به لایه آن بدهید و نام این لایه را top بگذارید :




http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/1-1.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/1-1.gif)


http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/1-2.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/1-2.gif)


http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/1.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/1.gif)


بازهم توسط ابزار Rectangle لایه دیگری دقیقا مماس با همین لایه و کمی عریضتر در زیر آن بکشد و افکتهای مشابه اشکال زیر را به آن اعمال کنید و نام این لایه را header بگذارید. نتیجه کار شما باید مشابه شکل زیری شود :




http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/2-1.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/2-1.gif)


http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/2-2.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/2-2.gif)


http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/2.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/2.gif)



از این لایه Duplicate بگیرید، نام آنرا footer بگذارید و آنرا به پایین صفحه منتقل کنید :





http://forum.webalfa.ir/images/statusicon/wol_error.gif.http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/3.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/3.gif)




توسط رنگ ۸۸۷۶۳d# و ابزار Type Tool منوی Navigation خود را مشابه شکل زیر بنویسید. همچنین توسط رنگ سفید و بر روی لایه header نام سایت sLogon را بنویسید :





http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/4.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/4.gif)




مشاهده میکنید که نام سایت را در قسمت سمت راست header نوشتیم و الان متوجه دلیل این کار خواهید شد. ابزار Rounded Rectangle Tool را انتخاب کنید و مشابه شکل زیر لایه ای رسم کنید و opacity این لایه را مساوی ۶۰% قرار دهیدو افکتهای زیر را بر روی آن اعمال نمایید :





The original image is sized 536x226 and weights 9KB.http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/5.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/4.gif)
http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/5-1.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/5-1.gif)
http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/5-2.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/5-2.gif)




اکنون مشابه شکل زیر در قسمت بالایی لایه ایجاد شده و توسط آیکونهای دلخواه ۳ ShortCut برای Home,Rss و Contact ایجاد کنید :





http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/6.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/6.gif)




همچنین در قسمت میانی این لایه عکسی به دلخواه و البته متناسب با رنگهای استفاده شده وارد کنید و Opacity آنرا ۹۰% تعیین نمایید :





http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/7.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/7.gif)


قسمت پایینی این لایه برای کادر ورود “Login” در نظر گرفته شده است، مشابه شکل زیر و به دلخواه کادر ورود و اجزا مورد نیاز یک کادر ورود را وارد نمایید. (البته دقت نمایید که در یک سایت این قسمت میتواند توسط CSSپیاده سازی شود)




http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/8.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/8.gif)




اکنون قسمت محتوی یا “Content” را به ۳ قسمت تقسیم میکنیم :





http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/9.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/9.gif)




برای قسمتهای ایجاد شده متنها و مثالهایی وارد نمایید و در پایین هر قسمت Button هایی توسط ابزار Rectangle Tool ایجاد نمایید و رنگ آنهارا برای همخوانی با رنگهای موجود مشابه رنگهایی که برای Buttonهای کادر Login در نظر گرفتیم (مانند Read More, . . .) تعبه نمایید و افکتهایی مانند شکلهای زیر با آنها بدهید تا طرح ما خالی نباشد :





http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/10-1.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/10-1.gif)
http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/10-2.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/10-2.gif)

. The original image is sized 804x466 and weights 52KB.http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/10.gif (http://forum.webalfa.ir/go.php?url=http://download.ittutorial.ir/photoshop/015-web_Design_layout_2/10.gif)




در آخرین قسمت به طرح فوق و در قسمت footer موارد لازم مانند Copy Right و Quick Link های مهم را وارد نمایید.