close
تبلیغات در اینترنت

سلام

به اين وبلاگ خوش اومديد.

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

ايران بيسيك|گلچيني از بهترين هاي فضای مجازي

روز اول : طراحی قالب وبسایت در فتوشاپهمانطور که در عکس بالا می‌بینید، چهار مرحله پیش رو داریم.مرحله اول: طراحی عکس پس‌زمینهمرحله دوم: طراحی نوار کلید ها و کادر جستجومرحله سوم: طراحی سرصفحهمرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالبمرحله اول: طراحی عکس پس‌زمینهبرای طراحی عکس…

آخرین ارسال های انجمن
عنوان پاسخ بازدید توسط
نسخه جدید و نهایی مرورگر فایرفاکس Mozilla Firefox 10.0.2 + قابل حمل 1 331 qwe123
آهنگ جدید و فوق العاده زیبای رضا صادقی به نام حس خوب ... با 3 کیفیت متفاوت 1 410 qwe123
تست هوش 4 587 qwe123
نسخه جدید و نهایی یاهو مسنجر Yahoo! Messenger 11.5.0.192 Final 0 244 radical
دانلود مستند درون راه شیری Inside the Milky Way 2010 0 250 radical
دانلود مستند جستجوی حیات در ورای زمین Finding Life Beyond Earth 2011 0 257 radical
مدیریت دانلود قدرتمند Internet Download Manager 6.09 Build 2 Final 0 231 radical
دانلود مستند بیگانگان در آلاسکا Monsters and Mysteries in Alaska 2011 0 268 radical
زیباترین فانوسهای دریایی های جهان 0 250 radical
مدل جدید بنز 0 236 radical
دانلود (حجم کم) 2 371 radical
نقاشی های 3 بعدی توهمات هندسی 0 258 radical
تصاويري حيرت‌انگيز از هيولاهاي ترسناك اعماق تاريك دريا! 0 270 radical
۱۰ فاجعـه بـزرگ فتـوشاپی سال ۲۰۱۱ 0 255 radical
آهنگ جدید سیاوش قمیشی به نام تکرار 0 392 radical
دانلود آهنگ جدید مرتضی پاشایی دل من دل تو 0 339 radical
آهنگ جدید و بسیار زیبای مرتضی پاشایی به نام مثل شیشه 0 279 radical
اس ام اس هاس فلسفي 1 346 radical
آیا شما هم به این نتیجه رسیده اید ؟ 0 217 radical
اشک زبان بسته!! 1 316 ehsan-nitro

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

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


1


همانطور که در عکس بالا می‌بینید، چهار مرحله پیش رو داریم.

مرحله اول: طراحی عکس پس‌زمینه

مرحله دوم: طراحی نوار کلید ها و کادر جستجو

مرحله سوم: طراحی سرصفحه

مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب

مرحله اول: طراحی عکس پس‌زمینه

برای طراحی عکس پس زمینه به ۲ طرح (یک براش و یک پترن) احتیاج داریم که ابتدا به طراحی آنها می‌پردازیم.

طراحی پترن:

فتوشاپ را باز کنید و یک فایل جدید با طول و عرض ۳ پیکسل، بدون پس زمینه ایجاد کنید.

2

ابتدا تا آخر زوم کنید(Ctrl  و +). با استفاده از ابزار “Pencil”، با رنگ سفید، روی سه نقطه مطابق شکل کلیک کنید. دقت داشته باشید رنگ انتخابی حتما سفید باشد. در اینجا برای مشخص شدن خط، از رنگ قرمز استفاده شده است.

3

مطابق عکس، از منوی “Edit”، روی گزینه “Define Pattern…” کلیک کنید.

4

در پنجره بازشده نامی را بدلخواه انتخاب کنید و روی “ok” کلیک کنید. با این کار فایل طراحی شده ما بصورت یک پترن ذخیره می‌شود و می‌توانیم از آن در تنظیمات افکت روی لایه ها استفاده کنیم.

طراحی براش:

برای طراحی براش یا همان اشکال قلمو، می‌توانید از روش فوق استفاده کنید. به این ترتیب که فایلی با اندازه دلخواه ایجاد کنید، سپس طرح خود را ایجاد کرده و در مرحله آخر در منوی ادیت به جای گزینه “Define Pattern…”، گزینه “Define Brush Preset…” را انتخاب کنید. در اینجا برای راحتی کار از براش های آماده استفاده می کنیم.

بسیار خوب، تا به اینجا ما مقدمات برای طراحی پس‌زمینه را آماده کردیم. حال فایل جدیدی را باز کنید. این فایل اصلی قالب هست و اندازه آن می‌تواند متغیر باشد. در اینجا اندازه فایل ما ۱۰۲۴*۸۱۱ هست.

لایه بکگراند را با کد رنگ ” ۱b1b1b” با استفاده از سطل رنگ پر کنید. سپس روی قسمت سمت راست لایه دوبار کلیک راست کرده تا پنجره “Layer Style” باز شود. تنظیمات افکت های این لایه را مطابق عکس‌های زیر اعمال کنید.

5

6

7

همانطور که در عکس‌ها می‌بینید، کد رنگ‌های استفاده شده مشخص شده و از پترن ساخته شده طبق دستورالعمل بالا، استفاده شده است.

لایه جدیدی ایجاد کنید. از این لایه برای نمایش براش ها استفاده می‌کنیم. با استفاده از براش های ارائه شده، با سلیقه خودتان و با رنگ دلخواه، اشکالی را مانند شکل زیر ایجاد کنید.

8

لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۳d3d3d” پر کنید و افکت‌های زیر را اعمال کنید.

11

9

10

مرحله اول تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.

مرحله دوم: طراحی نوار کلید ها و کادر جستجو

لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکت‌های زیر را اعمال کنید.

11-2

12

13

14

15

در این مرحله می‌توانید منو‌های مورد نظر را با ابزار “Type Tool” مانند شکل زیر ایجاد کنید. اما این کار ضروری نیست؛ چون تمام متن‌ها، منو‌ها و فرم ها (جعبه جستجو)  با استفاده از اچ‌تی‌ام‌ال ایجاد می‌شوند و نیازی به ایجاد در فتوشاپ نیست!

16

مرحله دوم تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.

مرحله سوم: طراحی سرصفحه

لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکت‌های زیر را اعمال کنید.

17

18

19

20

21

حال از لایه ایجاد شده یک کپی بگیرید. برای اینکار روی لایه راست کلیک کرده و گزینه “Duplicate Layer…”  کلیک کنید. لایه جدید را مطابق شکل کوچک کنید. برای تغییر اندازه، از کلیدهای ترکیبی Ctrl + T استفاده کنید.

22

مطابق آنچه در قبل گفته شد، می‌توانید عکس و متن‌ها را در فتوشاپ ایجاد کنید، اما این کار لزومی ندارد و دلیل اضافه کردن آن در این مقاله، تشخیص مکان‌های اجزای صفحه، برای کد نوشتن به زبان اچ‌تی‌ام‌ال‌ است. لوگوی سایت خود را طراحی کنید و در قسمت مشخص شده در عکس قرار دهید.

23

برای طراحی نوار “عضو شوید”، ابتدا با استفاده از ابزار “Pen Tool” شکلی را مطابق شکل زیر و با رنگ “deff00″ ایجاد کنید و افکت زیر را بر روی لایه اعمال کنید.

24

25

مرحله سوم تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.

مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب

مرحله چهارم را با استفاده از توضیحات قبلی می‌توانید به طور کامل طراحی کنید، اما آنچه که در اینجا مهم است، نحوه چیدمان مطالب و تبلیغات است. برای مثال در عکس زیر همانطور که می‌بینید در ابتدای صفحه با توجه به قسمت تبلیغات صفحه ۳ ستونه است و در ادامه صفحه به فرم ۲ ستونه تغییر شکل می‌دهد.

26

لازم به ذکر است که طراحی این جداول در فتوشاپ فقط بمنظور معین کردن جاهای جداول جهت طراحی‌ در زبان اچ‌تی‌ام‌ال هست، لذا طراحی این جدول‌ها در “روز دوم: کد نویسی به زبان اچ‌تی‌ام‌ال برای قالب وبسایت” توضیح داده خواهد شد.

در این مقاله سعی شده تا با استفاده از ساده ترین راه‌ها، برای طراحی یک قالب مطلوب استفاده شود. در ادامه این سری از مقالات با متد‌های پیشرفته‌تر و جذاب‌تر آشنا خواهید شد که لازمه آن، مسلط بودن بر مباحث این مقاله هست.

مشاهده قالب در ابعاد بزرگ

  قالب نهایی کار(PSD) (328 bytes, 2,970 hits)



منبع : مجله اينترنتي پريانا

گرد آوري : ايران بيسيك

درباره آموزش , اينترنت ,
نظرات () تاریخ : شنبه 12 فروردين 1391 زمان : 10:39 بازدید : 198 نویسنده : Admin
مطالب مرتبط
ارسال نظر برای این مطلب

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی

تبلیغات
Rozblog.com رز بلاگ - متفاوت ترين سرويس سایت ساز
اطلاعات کاربری
نام کاربری :
رمز عبور :
  • فراموشی رمز عبور؟
  • آرشیو
  • دوشنبه 10 آبان 1395
  • يکشنبه 09 آبان 1395
  • سه شنبه 04 آبان 1395
  • چهارشنبه 07 تير 1391
  • چهارشنبه 31 خرداد 1391
  • سه شنبه 30 خرداد 1391
  • دوشنبه 22 خرداد 1391
  • پنجشنبه 11 خرداد 1391
  • يکشنبه 07 خرداد 1391
  • پنجشنبه 04 خرداد 1391
  • شنبه 30 ارديبهشت 1391
  • چهارشنبه 27 ارديبهشت 1391
  • جمعه 22 ارديبهشت 1391
  • چهارشنبه 20 ارديبهشت 1391
  • يکشنبه 17 ارديبهشت 1391
  • شنبه 16 ارديبهشت 1391
  • پنجشنبه 14 ارديبهشت 1391
  • سه شنبه 12 ارديبهشت 1391
  • يکشنبه 10 ارديبهشت 1391
  • جمعه 08 ارديبهشت 1391
  • جمعه 8 ارديبهشت 1391
  • پنجشنبه 7 ارديبهشت 1391
  • سه شنبه 05 ارديبهشت 1391
  • چهارشنبه 30 فروردين 1391
  • يکشنبه 27 فروردين 1391
  • جمعه 25 فروردين 1391
  • چهارشنبه 23 فروردين 1391
  • دوشنبه 21 فروردين 1391
  • يکشنبه 20 فروردين 1391
  • شنبه 19 فروردين 1391
  • جمعه 18 فروردين 1391
  • پنجشنبه 17 فروردين 1391
  • چهارشنبه 16 فروردين 1391
  • سه شنبه 15 فروردين 1391
  • يکشنبه 13 فروردين 1391
  • شنبه 12 فروردين 1391
  • جمعه 11 فروردين 1391
  • پنجشنبه 10 فروردين 1391
  • چهارشنبه 9 فروردين 1391
  • سه شنبه 8 فروردين 1391
  • دوشنبه 7 فروردين 1391
  • يکشنبه 6 فروردين 1391
  • شنبه 5 فروردين 1391
  • جمعه 4 فروردين 1391
  • پنجشنبه 3 فروردين 1391
  • چهارشنبه 2 فروردين 1391
  • سه شنبه 1 فروردين 1391
  • دوشنبه 29 اسفند 1390
  • يکشنبه 28 اسفند 1390
  • شنبه 27 اسفند 1390
  • جمعه 26 اسفند 1390
  • پنجشنبه 25 اسفند 1390
  • چهارشنبه 24 اسفند 1390
  • سه شنبه 23 اسفند 1390
  • دوشنبه 22 اسفند 1390
  • يکشنبه 21 اسفند 1390
  • شنبه 20 اسفند 1390
  • جمعه 19 اسفند 1390
  • شنبه 13 اسفند 1390
  • پنجشنبه 11 اسفند 1390
  • چهارشنبه 10 اسفند 1390
  • پنجشنبه 4 اسفند 1390
  • چهارشنبه 3 اسفند 1390
  • چهارشنبه 2 اسفند 1390
  • سه شنبه 2 اسفند 1390
  • يکشنبه 30 بهمن 1390
  • شنبه 29 بهمن 1390
  • جمعه 28 بهمن 1390
  • پنجشنبه 27 بهمن 1390
  • پنجشنبه 26 بهمن 1390
  • چهارشنبه 26 بهمن 1390
  • سه شنبه 25 بهمن 1390
  • دوشنبه 24 بهمن 1390
  • دوشنبه 17 بهمن 1390
  • يکشنبه 16 بهمن 1390
  • جمعه 14 بهمن 1390
  • سه شنبه 11 بهمن 1390
  • چهارشنبه 5 بهمن 1390
  • سه شنبه 4 بهمن 1390
  • يکشنبه 2 بهمن 1390
  • شنبه 1 بهمن 1390
  • پنجشنبه 29 دی 1390
  • چهارشنبه 28 دی 1390
  • سه شنبه 27 دی 1390
  • دوشنبه 26 دی 1390
  • نظرسنجی
    نظر شما در مورد ايران بيسيك چيست؟






    آمار سایت
  • کل مطالب : 140
  • کل نظرات : 123
  • افراد آنلاین : 1
  • تعداد اعضا : 99
  • آی پی امروز : 1
  • آی پی دیروز : 2
  • بازدید امروز : 11
  • باردید دیروز : 3
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 15
  • بازدید ماه : 15
  • بازدید سال : 15
  • بازدید کلی : 209,958
  • کدهای اختصاصی