بنر بالای مطالب

banner

آموزش طراحی اسلاید شو برای وب سایت با فتوشاپ

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

15 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

معمولا وب سایتهای پویا اولین مطالب منتشر شده در سایتشان را در قالب یک اسلایدر طراحی و بالای صفحه قرار میدهند . بعضی از وب سایتها نیز همانند فروشگاه آسارایان هر چند روز یکبار یک اسلایدر طراحی می کنند. منظور از اسلایدر تصاویر مستطیل شکلی می باشد که در قالب یک بنر یا هدر طراحی می شود .  برای انجام این تمرین ابتدا یک صفحه با ابعاد 300×600 ایجاد کرده و با ابزار Rectangular Marque Tool یک کادر مستطیل شکل میکشم . این ابعاد بسته به اندازه بالای وب سایت شما می تواند متغیر باشد . بعد از کشیدن کادر مورد نظر بر روی آن دابل کلیک کرده و تنظیمات گزینه Layer Style را تغییر میدهم .  شما می توانید با طراحی این اسلایدر برای طرح ها و محصولات یا هر چیزی که قرار است در وسط آن قرار بدهید رنگ آن را در مراحل بعدی تغییر داده و در جای دیگر استفاده کنید .  

15 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

1. یک صفحه با ابعاد 300×600 ایجاد کرده و با ابزار Rectangular Marque Tool یک کادر همانند تصویر زیر بکشید .  کادر کشیده شده باید در یک لایه جدید باشد .  رنگ پیش فرض کادر کشیده شده را برابر با 62615f قرار بدهید .

1 آموزش طراحی اسلاید شو برای وب سایت با فتوشاپ

 

2. بر روی لایه کشیده شده دابل کلیک کرده و تنظیمات پیش فرض layer Style را همانند تصویر زیر تغییر بدهید . 

2 آموزش طراحی اسلاید شو برای وب سایت با فتوشاپ

3 آموزش طراحی اسلاید شو برای وب سایت با فتوشاپ

4 آموزش طراحی اسلاید شو برای وب سایت با فتوشاپ

5 آموزش طراحی اسلاید شو برای وب سایت با فتوشاپ

6 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

 

3. با ابزار Elliptical Marque Tool همانند تصویر زیر 2 دایره سفید رنگ بکشید و opacity را برابر با 50 درصد قرار بدهید .  

7 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

 

4. در مرحله بعدی ابزار Custome Shape Tool را انتخاب کرده و 2 فلش همانند تصویر زیر بر روی دایره ها قرار بدهید . معمولا این دایره های توسط ماژول ایجاد می شود و در طراحی فتوشاپ نیازی نیست .

8 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

 

5. ابزار تایپ را انتخاب کنید . فونت بکار برده شده در این قسمت Ballpark Weiner  می باشد که می توانید از این سایت دانلود کنید .  رنگ متنی که می خواهید تایپ کنید را برابر با 525353 قرار بدهید .  

9 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

 

6. بر روی لایه متن تایپ شده دابل کلیک کرده و تنظیمات پیش فرض را تغییر بدهید . 

10 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

11 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

12 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

 

7 . در مرحله آخر بافت بکار برده شده در پس زمینه را از این قسمت دانلود کنید . 
7.1. بافت را درست بالای لایه کادر اصلی قرار داده و مد لایه را ببه Linear Burn تغییر بدهید . 

13 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

14 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

15 آموزش-طراحی-اسلاید-شو-برای-وب-سایت-با-فتوشاپ

آخرین ویرایش درپنج شنبه, 07 خرداد 1394 19:47

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا