bernadet
Member
منبع
http://www.webdesign.org/web/web-de...g/creating-a-clean-website-template.7486.html
در این درس یاد می گیریم که چقدر راحت و آسان می توان توسط فتوشاپ یک تمپلیت زیبا درست کرد . شما در این درس روش کلی کار را می آموزید و بعد طبق سلیقه خود می توانید انواع و اقسام قالب های زیبا درست کنید .
*
یک داکیومنت جدید با ابعاد 600 * 778 و پس زمینه با رنگ
#F1F1F1
درست کنید .
*
یک لایه جدید ایجاد کنید
Ctrl + shift + n
و از نوار ابزار
Rectangular marquee tool
ابزار انتخاب مستطیلی را بردارید .درست در زیر نوار منو برای شما نوار آپشنز مربوط به تنظیمات این ابزار ظاهر می شود . مطابق زیر
در نوار آپشنز در قسمت
Style
گزینه
Fixed size
را انتخاب کنید . و دوباره در همان نوار آپشنز برای طول و عرض مقادر زیر را به کار برید
Width : 728
Height : 600
این گزینه
Fixed size
باعث می شود که وقتی انتخاب می کنید به طور خودکار برای شما ناحیه ای با ابعادی که تعیین کرده اید انتخاب شود . قسمت انتخاب شده را به رنگ سفید در آورید .یعنی کلید
D
دی روی کیبور را بزنید که رنگ فورگراند سیاه شود و دوباره کلید
X
ایکس روی کیبورد را بزنید که رنگ فورگراند سفید شود و
Alt + backspace
را بزنید که ناحیه انتخابی سفید شود . با ابزار
Move
ناحیه سفید را جوری حرکت دهید که از نظر افقی درست در وسط باشد . ناحیه کاری ما حالا به این صورت شده
*
خوب حالا به این لایه سفید رنگ
Outer glow
میدهیم روی پلت لایه ها این لایه سفید را انتخاب نموده و
Layer > layer style > outer glow
و تنظیمات زیر را در موردش اعمال کنید .
Blend mode : normal
Opacity : 25%
Noise : 0
Color: یک رنگ خاکستری تیره
Technique : softer
Spread : 0%
Size : 5px
Contor: به صورت پیش فرض رهایش کنید
Anti – aliased : un checked تیک نخورد
Range : 50%
Jitter : 0%
تا اینجا بک گراند وب سایتمان آماده شد .
حالا قسمت بالایی وب سایت را درست می کنیم که مهمترین قسمت سایت است زیرا این قسمت هدر در تمام صفحات یک وب سایت مشترک است و زیبایی آن اهمت دارد . یک لایه جدید ایجاد کیند و برای ایجاد نظم نام مناسبی به آن بدهید . ابزار انتخاب مستطیلی را برداشته و در نوار آپشنز گزینه
Style : fixed size
را انتخاب کنید و برای طول و عرض ناحیه انتخاب مقادر زیر را قرار دهید
Width : 728
Height : 20
وبه ناحیه انتخاب رنگ
# 494F1C
و آن را در وسط تراز کنید .
*
یک لایه جدید ایجاد کنید و نام مناسب بدهید و یک عکس با ابعاد
728 * 125
باز کنید و عکس را در این لایه جدید قرار دهید . شکل زیر تا اینجای کار به دست آمده
*
یک لایه جدید ایجاد کنید و نام مناسب بدهید و با ابزار انتخاب مستطیلی یک ناحیه به ابعاد
728 * 20
ایجاد کنید و با رنگ
# B1C144
پر کیند و در زیر عکس جایش دهید . به این صورت :
*
حالا لوگوی سایت را روی عکس قرار می دهیم . یک لایه جدید درست کنید و با ابزار انتخاب مستطیلی یک کادر به ابعاد
85 * 285
ایجاد کنید و با رنگ سفید پرش کنید و اپاسیتی لایه را در پلت لایه ها به 50% کاهش دهید و برای این لایه
Outer glow
را با همان تنظیماتی که در بالا ذکر شد اعمال کنید . به اینجا رسیدیم
*
یک لایه جدید درست کنید و نام مناسب بدهید و با ابزار
Rectangular marquee tool
یک کادر با ابعاد 370 * 175 رسم کنید .برای این کار در نوار اپشنز گزینه
Style : fixed size
را انتخاب کنید و طول و عرضی که گفته شد وارد کنید . و محل انتخابی را به رنگ
F1f1f1
در آورید هنوز از انتخاب خارج نشوید و
Edit > strok
را با تنظیمات زیر اعمال کیند .
Width : 1 px
Color : d1d1d1
Location : outside
Blending : normal
Opacity : 100%
Preserve trancpareny : un checked تیک نخورد
به این صورت شد
*
دوباره یک لایه جدید ایجاد کنید و نام مناسب بدهید و یک کادر به ابعاد 370 * 530 ایجاد کنید و رنگ
F1f1f1
بدهید و در جای خود قرارش دهید . به این صورت
*
برای فوتر سایت هم یک لایه جدید درست کنید نام مناسب بدهید با ابزار انتخاب مستطیلی یک کادر به ابعاد 25 * 728
و رنگ
F1f1f1
ایجاد کنید و کادر را در پایین ترین قسمت صفحه قرار دهید .
*
حالا در کادر سمت چپ لینکها را اضافه کنید و در کادر سمت راست هم متن صفحه را بنویسید . البته در فتوشاپ در این قسمت فقط انگلیسی می توان نوشت برای نوشتن فارسی می توانید این فایل را با پسوند
Html
ذخیره کنید و در فرانت پیج باز کنید و متن فارسی را در آنجا اضافه کنید .
شما در همین فتوشاپ لینکهای سمت چپ را نیز می توان سازمان دهی کنید به این صورت که با استفاده از ابزار
Slice
دور هر یک از موارد ی که می خواهید لینک باشد را کادر بکشید و بعد ابزار
Slice select tool
را بردارید و روی هر یک از این کادرها دبل کلیک کنید و در کادری که ظاهر می شود گزینه ها را پر کنید و این فایل را به صورت اچ تی ام ال ذخیره کنید برای این کار باید
File > save for web
کنید .
برای توضیحات بیشتر در مورد کار با ابزار
Slice
و درست کردن لینکها می توانید در انجمن سرچ کنید .
http://www.webdesign.org/web/web-de...g/creating-a-clean-website-template.7486.html
در این درس یاد می گیریم که چقدر راحت و آسان می توان توسط فتوشاپ یک تمپلیت زیبا درست کرد . شما در این درس روش کلی کار را می آموزید و بعد طبق سلیقه خود می توانید انواع و اقسام قالب های زیبا درست کنید .
*
یک داکیومنت جدید با ابعاد 600 * 778 و پس زمینه با رنگ
#F1F1F1
درست کنید .
*
یک لایه جدید ایجاد کنید
Ctrl + shift + n
و از نوار ابزار
Rectangular marquee tool
ابزار انتخاب مستطیلی را بردارید .درست در زیر نوار منو برای شما نوار آپشنز مربوط به تنظیمات این ابزار ظاهر می شود . مطابق زیر
در نوار آپشنز در قسمت
Style
گزینه
Fixed size
را انتخاب کنید . و دوباره در همان نوار آپشنز برای طول و عرض مقادر زیر را به کار برید
Width : 728
Height : 600
این گزینه
Fixed size
باعث می شود که وقتی انتخاب می کنید به طور خودکار برای شما ناحیه ای با ابعادی که تعیین کرده اید انتخاب شود . قسمت انتخاب شده را به رنگ سفید در آورید .یعنی کلید
D
دی روی کیبور را بزنید که رنگ فورگراند سیاه شود و دوباره کلید
X
ایکس روی کیبورد را بزنید که رنگ فورگراند سفید شود و
Alt + backspace
را بزنید که ناحیه انتخابی سفید شود . با ابزار
Move
ناحیه سفید را جوری حرکت دهید که از نظر افقی درست در وسط باشد . ناحیه کاری ما حالا به این صورت شده
*
خوب حالا به این لایه سفید رنگ
Outer glow
میدهیم روی پلت لایه ها این لایه سفید را انتخاب نموده و
Layer > layer style > outer glow
و تنظیمات زیر را در موردش اعمال کنید .
Blend mode : normal
Opacity : 25%
Noise : 0
Color: یک رنگ خاکستری تیره
Technique : softer
Spread : 0%
Size : 5px
Contor: به صورت پیش فرض رهایش کنید
Anti – aliased : un checked تیک نخورد
Range : 50%
Jitter : 0%
تا اینجا بک گراند وب سایتمان آماده شد .
حالا قسمت بالایی وب سایت را درست می کنیم که مهمترین قسمت سایت است زیرا این قسمت هدر در تمام صفحات یک وب سایت مشترک است و زیبایی آن اهمت دارد . یک لایه جدید ایجاد کیند و برای ایجاد نظم نام مناسبی به آن بدهید . ابزار انتخاب مستطیلی را برداشته و در نوار آپشنز گزینه
Style : fixed size
را انتخاب کنید و برای طول و عرض ناحیه انتخاب مقادر زیر را قرار دهید
Width : 728
Height : 20
وبه ناحیه انتخاب رنگ
# 494F1C
و آن را در وسط تراز کنید .
*
یک لایه جدید ایجاد کنید و نام مناسب بدهید و یک عکس با ابعاد
728 * 125
باز کنید و عکس را در این لایه جدید قرار دهید . شکل زیر تا اینجای کار به دست آمده
*
یک لایه جدید ایجاد کنید و نام مناسب بدهید و با ابزار انتخاب مستطیلی یک ناحیه به ابعاد
728 * 20
ایجاد کنید و با رنگ
# B1C144
پر کیند و در زیر عکس جایش دهید . به این صورت :
*
حالا لوگوی سایت را روی عکس قرار می دهیم . یک لایه جدید درست کنید و با ابزار انتخاب مستطیلی یک کادر به ابعاد
85 * 285
ایجاد کنید و با رنگ سفید پرش کنید و اپاسیتی لایه را در پلت لایه ها به 50% کاهش دهید و برای این لایه
Outer glow
را با همان تنظیماتی که در بالا ذکر شد اعمال کنید . به اینجا رسیدیم
*
یک لایه جدید درست کنید و نام مناسب بدهید و با ابزار
Rectangular marquee tool
یک کادر با ابعاد 370 * 175 رسم کنید .برای این کار در نوار اپشنز گزینه
Style : fixed size
را انتخاب کنید و طول و عرضی که گفته شد وارد کنید . و محل انتخابی را به رنگ
F1f1f1
در آورید هنوز از انتخاب خارج نشوید و
Edit > strok
را با تنظیمات زیر اعمال کیند .
Width : 1 px
Color : d1d1d1
Location : outside
Blending : normal
Opacity : 100%
Preserve trancpareny : un checked تیک نخورد
به این صورت شد
*
دوباره یک لایه جدید ایجاد کنید و نام مناسب بدهید و یک کادر به ابعاد 370 * 530 ایجاد کنید و رنگ
F1f1f1
بدهید و در جای خود قرارش دهید . به این صورت
*
برای فوتر سایت هم یک لایه جدید درست کنید نام مناسب بدهید با ابزار انتخاب مستطیلی یک کادر به ابعاد 25 * 728
و رنگ
F1f1f1
ایجاد کنید و کادر را در پایین ترین قسمت صفحه قرار دهید .
*
حالا در کادر سمت چپ لینکها را اضافه کنید و در کادر سمت راست هم متن صفحه را بنویسید . البته در فتوشاپ در این قسمت فقط انگلیسی می توان نوشت برای نوشتن فارسی می توانید این فایل را با پسوند
Html
ذخیره کنید و در فرانت پیج باز کنید و متن فارسی را در آنجا اضافه کنید .
شما در همین فتوشاپ لینکهای سمت چپ را نیز می توان سازمان دهی کنید به این صورت که با استفاده از ابزار
Slice
دور هر یک از موارد ی که می خواهید لینک باشد را کادر بکشید و بعد ابزار
Slice select tool
را بردارید و روی هر یک از این کادرها دبل کلیک کنید و در کادری که ظاهر می شود گزینه ها را پر کنید و این فایل را به صورت اچ تی ام ال ذخیره کنید برای این کار باید
File > save for web
کنید .
برای توضیحات بیشتر در مورد کار با ابزار
Slice
و درست کردن لینکها می توانید در انجمن سرچ کنید .
