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

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

http://download.ittutorial.ir/photos...yout_2/1-1.gif


http://download.ittutorial.ir/photos...yout_2/1-2.gif


http://download.ittutorial.ir/photos...layout_2/1.gif

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

http://download.ittutorial.ir/photos...yout_2/2-1.gif


http://download.ittutorial.ir/photos...yout_2/2-2.gif


http://download.ittutorial.ir/photos...layout_2/2.gif

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

http://forum.webalfa.ir/images/statusicon/wol_error.gif.http://download.ittutorial.ir/photos...layout_2/3.gif

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

http://download.ittutorial.ir/photos...layout_2/4.gif

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

The original image is sized 536x226 and weights 9KB.http://download.ittutorial.ir/photos...layout_2/5.gif
http://download.ittutorial.ir/photos...yout_2/5-1.gif
http://download.ittutorial.ir/photos...yout_2/5-2.gif

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

http://download.ittutorial.ir/photos...layout_2/6.gif

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

http://download.ittutorial.ir/photos...layout_2/7.gif


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




http://download.ittutorial.ir/photos...layout_2/8.gif

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

http://download.ittutorial.ir/photos...layout_2/9.gif

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

http://download.ittutorial.ir/photos...out_2/10-1.gif
http://download.ittutorial.ir/photos...out_2/10-2.gif

. The original image is sized 804x466 and weights 52KB.http://download.ittutorial.ir/photos...ayout_2/10.gif

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