كنترل پنل             جستجو               پرسشهای متداول            .:: آخرین پست‌های انجمن ::.            لیست اعضا            مدیران سایت             درجات        ورود
فهرست انجمن‌ها -> طراحي سايت‌هاي اينترنتي -> اصول طراحي صفحات وب
پاسخ دادن به این موضوع
آموزش ساختن منو برای سایت
پست تاریخ: دوشنبه 22 شهریور 1389 - 04:46    
Gytyonline
مديريت كل انجمن‌ها
مديريت كل انجمن‌ها


پست: 899
عضو شده در: 14 شهریور 1384
محل سکونت: tehran
iran.gif


امتياز: 8184

عنوان: آموزش ساختن منو برای سایت خواندن مشخصات فردی ارسال پیام شخصی ارسال email

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



1- خوب ابتدا یه صفحه جدید در فتوشاپ باز کنید ( می توانید از ابعاد 400 برای طول و 200 برای عرض استفاده کنید ، این ابعاد دلخواه هستند اما باید صفحه شما حالت مستطیلی شکل داشته باشد )

2- حال ابزار Rounded Rectangle Tool را انتخاب نمایید و در قسمت Radius آن عدد 6 px را وارد نمایید و برای رنگ آن بر روی انتخاب رنگ آن دوبار کلیک نمایید و عبارت #aaaaaa را وارد نمایید ( مطابق شکل های زیر ).







اگر لایه شما دارای ماسک می باشد یه لایه خالی رد بالای آن ایجاد نمایید و این دو لایه را با یکدیگر ادغام نمایید برای این کار روی لایه بالایی که خالی می باشد راست کلیک نمایید و سپس گزینه Mergae Down را انتخاب نمایید دقت نمایید که این 2 لایه باید از لایه پس زمینه شما جدا باشند .

3- حال این لایه ادغام شده را انتخاب نمایید و از طریق آدرسLayer Style -> Gradiert Overlay... پنجره Blending Options را باز نمایید و تنظیمات این پنجره را مانند شکل زیر تنظیم نمایید قسمت هایی که باید تغییر کنند در شکل مشخص شده اند .





4- خوب حالا نوبت این رسیده که نوشته های منو را روش بنویسیم برای این کار ابزار Horizontal Type Tool را انتخاب نمایید و برای رنگ آن نیز رنگ 444444# را انتخاب نمایید و قسمت های مورد نظرتان را از قبیل صفحه ی اصلی ، آرشیو و غیره ... بنویسید .

5- تا به الان باید شکل شما مشابه شکل زیر باشد :



6- حالا نوبت به این می رسد که یک جدا کننده بین هر قسمت قرار بدهیم .
ابتدا یک لایه جدید ایجاد نمایید و سپس قسمت کوچک و مستطیل مانندی از آن را با استفاده از ابزار Rectangular Marquee Tool ( ابزار select ) انتخاب نمایید با ابزار Gradient Tool وتنظیماتی همانند شکل زیر محیط انتخاب شده را رنگ نمایید .



این قسمت از آموزش را برای درک بهتر به صورت تصویری به شکل های شماره گذاری شده آموزش میدهم مراحل را مانند شکل های زیر دنبال کنید .

شکل شماره 1 : روی ناحیه ای بین دو نوشته خود روی منو زوم کنید .

شکل شماره 2 : ناحیه ای توسط ابزار Rectangular Marquee Tool انتخاب نمایید و با استفاده از ابزار Gradient Tool و تنظیماتی که در شکل فوق نشان داده شده این ناحیه انتخاب شده را رنگ نمایید .

شکل شماره 3 : یک کپی از این لایه به وجود آورید و آن را 180 درجه دوران داده و به انتهای لایه قبلی بچسبانید .

شکل شماره 4 : حال این 2 لایه را یکی نمایید و از آن یک کپی به وجود آورید و با فشار دادن دکمه های Ctrl + i رنگ سیاه آن را به سفید تغییر دهید .

شکل شماره 5 : این 2 لایه را کنار هم قرار داده و یکی نمایید .

شکل شماره 6 : این لایه را از Normal به Overlay تغییر دهید.




7- حال لایه اولیه منوی خود را انتخاب نمایید و سپس از منوی image گزینه ی adjustments و سپس brightness/contrast را انتخاب نمایید و تنظیمات پنجره باز شده را مطابق شکل زیر تنظیم نمایید .


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

اکنون منوی شما باید شبیه شکل زیر شده باشد :


تبریک می گویم شما توانستید منوی خود را خودتان طراحی نمایید .
در آموزش ها هیچ وقت خلاقیت و نظر خودتان را فراموش نکنید و آموزش را با ایده های خودتان نیز تلفیق دهید .
منتظر قسمت بعدی این آموزش باشید .
موفق باشید .
امین شفیعی;

[ وضعيت كاربر: ]

تشکر کردن از پست  پاسخگویی به این موضوع بهمراه نقل قول 
تشکرها از این پست: meh_ham (دوشنبه 22 شهریور 1389 - 06:05) sistemprof (سه‌شنبه 30 شهریور 1389 - 09:26) zeinab64 (پنج‌شنبه 2 شهریور 1391 - 10:48)

پست تاریخ: دوشنبه 29 شهریور 1389 - 16:30    
Gytyonline
مديريت كل انجمن‌ها
مديريت كل انجمن‌ها


پست: 899
عضو شده در: 14 شهریور 1384
محل سکونت: tehran
iran.gif


امتياز: 8184

عنوان: پاسخ به «آموزش ساختن منو برای سایت» خواندن مشخصات فردی ارسال پیام شخصی ارسال email

سری دوم این آموزش را می توانید در تاپیک زیر مشاهده نمایید :

http://aftab.cc/modules.php?name=Forums&file=viewtopic&t=3548#21564

[ وضعيت كاربر: ]

تشکر کردن از پست  پاسخگویی به این موضوع بهمراه نقل قول 
تشکرها از این پست:

پست تاریخ: پنج‌شنبه 2 شهریور 1391 - 10:50    
zeinab64
شروع فعاليت
شروع فعاليت


پست: 7
عضو شده در: 30 مرداد 1391



امتياز: 63

عنوان: پاسخ به «آموزش ساختن منو برای سایت» خواندن مشخصات فردی ارسال پیام شخصی

سلام. تشکر گیتی جان از پستت. میشه تصاویر رو دوباره آپلود کنی؟

[ وضعيت كاربر: ]

تشکر کردن از پست  پاسخگویی به این موضوع بهمراه نقل قول 
تشکرها از این پست:


نمایش پستها:                 مشاهده موضوع قبلی :: مشاهده موضوع بعدی  
پاسخ دادن به این موضوع
 

صفحه 1 از 1

تمام زمانها بر حسب GMT + 3.5 Hours می‌باشند
 Related Topics 


 information 

 

پرش به:  
شما نمی توانید در این بخش موضوع جدید پست کنید
شما نمی توانید در این بخش به موضوعها پاسخ دهید
شما نمی توانید موضوع های خودتان را در این بخش ویرایش کنید
شما نمی توانید موضوع های خودتان را در این بخش حذف کنید
شما نمی توانید در این بخش رای دهید


Copyright 2004-2024. All rights reserved.
© by Aftabgardan Cultural Center : Aftab.cc