bernadet
Member
منبع
http://www.tutorialized.com/tutorial/Neon-blue-navigation-tab/11492
این درس مناسب طراحان وب هست و طرز درست کردن دکمه های نئونی آبی رو روی بک گراند مشکی توضیح می ده . من در اين آموزش نتونستم از تصوير استفاده کنم چون نزديک به يک هفته است که قسمت آپلود تصوير سايت کار نمي کنه و هر عکسي رو که آپلود مي کنم دوباره صفحه آپلود خالي مياد و لينکي برام ايجاد نمي کنه . در ضمن چون تصاوير بعد از مدتي از بين مي رن بهتر ديدم که تنظيمات رو بنويسم که مشکلي نباشه .
راستي مدير محترم سايت آقاي صادق ، اون آدرس سايت انگليسي که در مبحث فکر کنم قطره بود معرفي کرديد اون رو نتونستم باز کنم . محبت کنيد آدرسش رو دوباره تکرار کنيد . ممنون.
پبک گراندمون در این آموزش مشکی خالص نیست اما یک رنگ تیره هستش و به سلیقه خودتون می تونید رنگهای دیگه رو روی بک گراندها تیره امتحان کنید . نتیجه کارتون چیزی شبیه به این می شه .
http://www.upimages.net/upload/aefe6673.gif
یک داکیومنت با رنگ بک گراند
00386D
درست کنید و با
Ctrl + shift + n
یک لایه جدید ایجاد کنید . رنگ فورگراند رو
0080F6
کنید و در لایه جدیدتون با ابزار مستطیل لبه گرد
round rectangle tool
که شعاع
Radius
اون رو روی نوار اپشنز روی 16 پیکسل تنظیم کردید
یک مستطیل با ابعاد دکمه تون بکشید . بهتره که ارتفاع اون رو 20 پیکسل کنید و طول اون رو هم به اندازه ای کنید که متن دکمه روش جا بگیره . برای کنترل ارتفاع دکمه می تونید پالت اینفو رو فعال کنید و در گوشه پایین و چپ اون پالت طول و عرض شکلی که دارید رسم می کنید رو نشون می ده .
http://www.upimages.net/upload/5269d456.gif
روی لایه دکمه که درست کرده بودید
Ctrl + click
کنید . این کار باعث می شه که اطراف دکمه تون انتخاب بشه . حالا یک لایه جدید ایجاد کنید
Ctrl + shift + n
و در حالی که هنوز انتخابتون فعاله ، در لایه جدید روی محل انتخاب یک گرادیانت اعمال کنید .
گرادیانتتون بهتره از دو رنگ آبی تیره و آبی روشن درست شده باشه . اگر این گرادیانت رو نداشتین می تونید بسازیدش . طرز کار با گرادیانت ها مختصرا در تاپیک ایجاد رنگین کمان توضیح داده شده . گرادیانتتون در سمت چپ آبی تیره و در سمت راست آبی روشن داره و گزینه
Linear gradiant
رو روی نوار اپشنز مربوط به گرادیانت انتخاب می کنید و یک خط کاملا عمودی از پایین به بالای دکمه می کشید . دقت کنید خطتون کاملا عمودی باشه . حالا لایه قدیمیتون رو پاک کنید و همین لایه جدید که گرادیانت رو روش اعمال کردید نگه دارید .
حالا ای مسیر رو برید
Layer layer style
و تنظیمات زیر رو
Inner glow, Satin and stroke
رو مطابق اشکال زیر اعمال کنید . بعد از اعمال کردن این تغییرت به این نتیجه می رسیم .
http://www.upimages.net/upload/1bd0aed3.gif
تنظیمات استایل های لایه هم به صورت زیر هست
_______________________________________
Inner glow
Structure
Blend Mode: Color dodge
Opacity: 100
Noise: 0
Color: #000000
Elements
Technique: Softer
Source: Edge
Choke: 0
Size: 1
Quality
Contour: Default
Anti-aliased: Uncheck
Range: 50
Jitter: 0
Satin
Structure
Blend Mode: Color Dodge
Color: #FFFFFF
Opacity: 100
Angle: 90
Distance: 3
Size: 16
Contour: Picture below
Anti-aliased: Uncheck
Invert: Uncheck
http://www.upimages.net/upload/7b980bdb.gif
_________________________________________
Stroke
Structure
Size: 3
Position: Outside
Blend Mode: Normal
Opacity: 100
Fill Type: Color
Color: #0070D6
______________________________________________
حالا می خوهیم در سمت پچ دکمه یک دایره کوچیک ایجاد کنیم . برای این کار رنگ فور گراند رو
0070D6
کنید و ابزار بیضی
Ellips tool
رو انتخاب کنید و با
Ctrl + shift + n
یک لایه جدید آغاز کنید و در لایه جدید یک دایره کوچولو در سمت چپ دکمه بکشید .
http://www.upimages.net/upload/6aa71d0f.gif
حالا می تویند روی دکمه متن بنویسید من فونت
Verdana, Bold Italic, 10 pt
انتخاب کردم .
http://www.upimages.net/upload/b33fa248.gif
برای کامل کردن نویگیشن تب این استایل ها رو به لایه مون اعمال کنید .
Drop Shadow , Outer Glow , Stroke
Drop Shadow
Structure
Blend Mode: Color Burn
Color: #000000
Opacity: 100
Angle: 180
Use Global Light: Uncheck
Distance: 4
Spread: 0
Size: 6
Quality
Contour: Default
Anti-aliased: Uncheck
Noise: 0
___________________________________________
Outer Glow
Structure
Blend Mode: Color Dodge
Opacity: 100
Noise: 0
Color: #FFFFFF
Elements
Technique: Precise
Spread: 0
Size: 4
Quality
Contour: Default
Anti-aliased: Uncheck
Range: 50
Jitter: 0
___________________________
Stroke
Structure
Size: 2
Position: Outside
Blend Mode: Normal
Opacity: 100
Fill Type: Color
Color: #0070D6
____________________________________
نتیجه به این صورت هست .
http://www.upimages.net/upload/05d1b470.gifشاد باشید .
http://www.tutorialized.com/tutorial/Neon-blue-navigation-tab/11492
این درس مناسب طراحان وب هست و طرز درست کردن دکمه های نئونی آبی رو روی بک گراند مشکی توضیح می ده . من در اين آموزش نتونستم از تصوير استفاده کنم چون نزديک به يک هفته است که قسمت آپلود تصوير سايت کار نمي کنه و هر عکسي رو که آپلود مي کنم دوباره صفحه آپلود خالي مياد و لينکي برام ايجاد نمي کنه . در ضمن چون تصاوير بعد از مدتي از بين مي رن بهتر ديدم که تنظيمات رو بنويسم که مشکلي نباشه .
راستي مدير محترم سايت آقاي صادق ، اون آدرس سايت انگليسي که در مبحث فکر کنم قطره بود معرفي کرديد اون رو نتونستم باز کنم . محبت کنيد آدرسش رو دوباره تکرار کنيد . ممنون.
پبک گراندمون در این آموزش مشکی خالص نیست اما یک رنگ تیره هستش و به سلیقه خودتون می تونید رنگهای دیگه رو روی بک گراندها تیره امتحان کنید . نتیجه کارتون چیزی شبیه به این می شه .
http://www.upimages.net/upload/aefe6673.gif
یک داکیومنت با رنگ بک گراند
00386D
درست کنید و با
Ctrl + shift + n
یک لایه جدید ایجاد کنید . رنگ فورگراند رو
0080F6
کنید و در لایه جدیدتون با ابزار مستطیل لبه گرد
round rectangle tool
که شعاع
Radius
اون رو روی نوار اپشنز روی 16 پیکسل تنظیم کردید
یک مستطیل با ابعاد دکمه تون بکشید . بهتره که ارتفاع اون رو 20 پیکسل کنید و طول اون رو هم به اندازه ای کنید که متن دکمه روش جا بگیره . برای کنترل ارتفاع دکمه می تونید پالت اینفو رو فعال کنید و در گوشه پایین و چپ اون پالت طول و عرض شکلی که دارید رسم می کنید رو نشون می ده .
http://www.upimages.net/upload/5269d456.gif
روی لایه دکمه که درست کرده بودید
Ctrl + click
کنید . این کار باعث می شه که اطراف دکمه تون انتخاب بشه . حالا یک لایه جدید ایجاد کنید
Ctrl + shift + n
و در حالی که هنوز انتخابتون فعاله ، در لایه جدید روی محل انتخاب یک گرادیانت اعمال کنید .
گرادیانتتون بهتره از دو رنگ آبی تیره و آبی روشن درست شده باشه . اگر این گرادیانت رو نداشتین می تونید بسازیدش . طرز کار با گرادیانت ها مختصرا در تاپیک ایجاد رنگین کمان توضیح داده شده . گرادیانتتون در سمت چپ آبی تیره و در سمت راست آبی روشن داره و گزینه
Linear gradiant
رو روی نوار اپشنز مربوط به گرادیانت انتخاب می کنید و یک خط کاملا عمودی از پایین به بالای دکمه می کشید . دقت کنید خطتون کاملا عمودی باشه . حالا لایه قدیمیتون رو پاک کنید و همین لایه جدید که گرادیانت رو روش اعمال کردید نگه دارید .
حالا ای مسیر رو برید
Layer layer style
و تنظیمات زیر رو
Inner glow, Satin and stroke
رو مطابق اشکال زیر اعمال کنید . بعد از اعمال کردن این تغییرت به این نتیجه می رسیم .
http://www.upimages.net/upload/1bd0aed3.gif
تنظیمات استایل های لایه هم به صورت زیر هست
_______________________________________
Inner glow
Structure
Blend Mode: Color dodge
Opacity: 100
Noise: 0
Color: #000000
Elements
Technique: Softer
Source: Edge
Choke: 0
Size: 1
Quality
Contour: Default
Anti-aliased: Uncheck
Range: 50
Jitter: 0
Satin
Structure
Blend Mode: Color Dodge
Color: #FFFFFF
Opacity: 100
Angle: 90
Distance: 3
Size: 16
Contour: Picture below
Anti-aliased: Uncheck
Invert: Uncheck
http://www.upimages.net/upload/7b980bdb.gif
_________________________________________
Stroke
Structure
Size: 3
Position: Outside
Blend Mode: Normal
Opacity: 100
Fill Type: Color
Color: #0070D6
______________________________________________
حالا می خوهیم در سمت پچ دکمه یک دایره کوچیک ایجاد کنیم . برای این کار رنگ فور گراند رو
0070D6
کنید و ابزار بیضی
Ellips tool
رو انتخاب کنید و با
Ctrl + shift + n
یک لایه جدید آغاز کنید و در لایه جدید یک دایره کوچولو در سمت چپ دکمه بکشید .
http://www.upimages.net/upload/6aa71d0f.gif
حالا می تویند روی دکمه متن بنویسید من فونت
Verdana, Bold Italic, 10 pt
انتخاب کردم .
http://www.upimages.net/upload/b33fa248.gif
برای کامل کردن نویگیشن تب این استایل ها رو به لایه مون اعمال کنید .
Drop Shadow , Outer Glow , Stroke
Drop Shadow
Structure
Blend Mode: Color Burn
Color: #000000
Opacity: 100
Angle: 180
Use Global Light: Uncheck
Distance: 4
Spread: 0
Size: 6
Quality
Contour: Default
Anti-aliased: Uncheck
Noise: 0
___________________________________________
Outer Glow
Structure
Blend Mode: Color Dodge
Opacity: 100
Noise: 0
Color: #FFFFFF
Elements
Technique: Precise
Spread: 0
Size: 4
Quality
Contour: Default
Anti-aliased: Uncheck
Range: 50
Jitter: 0
___________________________
Stroke
Structure
Size: 2
Position: Outside
Blend Mode: Normal
Opacity: 100
Fill Type: Color
Color: #0070D6
____________________________________
نتیجه به این صورت هست .
http://www.upimages.net/upload/05d1b470.gifشاد باشید .
آخرین ویرایش:
