سلام . با استفاده از فتوشاپ به راحتی میتوان طرح های بسیار زیبایی از طراحی وب خلق کرد . منو در بحث طراحی وب بسیار مهم است و جذابیت آن روی سایت بسیار میتواند تاثیر گذار باشد . در این مطلب قصد دارم طراحی یک منو در فتوشاپ و نحوه کدنویسی آن را مرحله به مرحله آموزش دهم . برای خواند آموزش به ادامه مطلب مراجعه کنید .
جزئیات آموزش
- استفاده از jQuery
- استفاده از CSS
- استفاده از فتوشاپ
- زمان مورد نیاز : ۴۰ دقیقه
- درجه دشواری : متوسط
1- یک فایل جدید در فتوشاپ با سایز ۸۰۰PX در ۵۰۰PX ایجاد کنید .
۲- در این مرحله یک خط افقی (خط کش) در ۷۰ پیکسلی طرح ، با استفاده از View>New Guide ایجاد کنید .
۳- حالا با استفاده از گزینه Create Folder یک پوشه به نام Menu و داخل آن یک زیرشاخه به نام Menu Text ایجاد کنید .
۴- ابزار متن یا Text Tool ( میانبر : T ) را انتخاب کنید و از جعبه ابزار character تنظیمات مربوط به متن ها را انجام دهید .
Font: Franklin Gothic Medium Cond
Font Size: 15pt
Color: Black
شما از فونت های دیگر هم میتوانید استفاده کنید اما فعلا در این آموزش این فونت مناسب است .
۵- یک خط افقی دیگر (خط کش) در ۴۰ پیکسلی کار ایجاد کنید برای کمک به تراز شدن نوشته های منو .
۶- پوشه Menu Text را انتخاب کنید و گزینه های مورد نظر را با فاصله مناسب به صورت تصویر زیر بنویسید و در کار قراردهید .
HOME, SERVICES, PORTFOLIO, ABOUT, CONTACT
7- یک پوشه دیگر داخل پوشه Menu ایجاد کنید و نام آن را Menu Background بگذارید .
۸- حالا با استفاده از ابزار انتخاب (rectangular marquee tool) یک محیط انتخابی با ارتفاع ۷۰ پیکسل و طول ۱۰۰ پیکسل ایجاد کنید .
۹- ابزار gradient tool (میانبر : G) را انتخاب کنید و یک طیف رنگ به شکل زیر ایجاد کنید .
۱۰- حالا طیف رنگ را با استفاده از موس از پایین بخش انتخابی به بالا بکشید و رها کنید .
تنظیمات Layer Style را هم مانند زیر تنظیم کنید .
Stroke Size : 1px
Position : outside
Color : Black
11- در اینجا باید برای منوها حاشیه کمی ایجاد کنید تا هر یک از آن ها را از دیگری جدا کند .
۱۲- به select > modify > contract بروید و میزان آن را ۱ پیکسل قرار دهید .
۱۳- ابزار Burn Tool را انتخاب کنید و تنظیمات زیر را برای آن انجام دهید . سپس در محل های مشخص شده از آن استفاده کنید .
۱۴- حالا با استفاده از ابزار Move تکه منو را ۱ پیکسل به سمت راست حرکت دهید تا حاشیه سمت چپ آن مشخص باشد .
۱۵- در این مرحله از تکه منو آماده شده کپی بگیرید (Ctrl + J) و آن را در زیر نوشته های دیگر قرار دهید . توجه کنید که برای تغییر اندازه منو در بخش هایی که طول آنها بیشتر است Ctrl + T را بزنید و طول آن را از ۱۰۰ به ۱۱۰ تغییر دهید .
تصویر زیر حالت درست و اشتباه قرار دادن تکه ها را نشان میدهد .
حالت درست و نهایی
۱۶- حالا به متن ها حالت Drop Shadow بدهید و تنظیمات آن را مانند زیر انجام دهید .
Color: #b7b6b6
Opacity: 40%
Distance: 1px
Spread: 100%
Size: 0px
17- حالا باید بخشی از منو را که موس روی آن قرار میگیرد و تغییر شکل میدهد طراحی کنیم . یک پوشه با نام Menu Hover بسازید سپس از پوشه Menu Background و Menu Text کپی بگیرید و داخل پوشه جدید بریزید . سپس آن را ۷۰ پیکسل به پایین بیاورید .
۱۸- حالا در پوشه Menu Hover بخش Menu Background تکه منوی Services را انتخاب کنید و ابزار Gradient را مانند زیر تنظیم کنید . سپس تکه منو را در حالت انتخاب قرار دهید و شکل فعلی را با فشرن کلید Delete حذف کنید .
Color – #۹de0ff at 0% Location
Color – #۰۰۷۲ff at 50% Location
Color – #۰۰۵ead at 100% Location
حالا از پایین ، گرادینت را روی بخش انتخابی بکشید . حالت گرادینت را radial بگذارید .
۱۹- ابزار burn tool را انتخاب کنید و اندازه آن را ۲۰۰ پیسکل بگذارید . میزان exposure را ۵۰% و سپس مکانهای انتخاب شده را سایه دار کنید . بعد تنظیمات زیر را برای بخش inner shadow لایه آن انجام دهید .
Blend Mode : Hard light
Opacity : 70%
Distance: 0px
Choke: 0%
Size: 10px
20- منوهای دیگر را به همین ترتیب به رنگهای مورد نظر در بیاورید .
۲۱- تصویر را Crop کنید به صورت زیر…
۲۲- تصویر نهایی شما آماده است .
۲۳- حالا به کدنویسی منو میرسیم . بعد از ذخیره تصویر منو . یک فایل HTML بسازید و کد زیر را در آن قرار دهید .
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="sprite.js"></script>
<title>Awesome Menu</title>
</head>
<body>
<div>
<ul>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
</ul>
</div>
</body>
</html>
24- یک فایل .js بسازید و کدهای زیر را در آن قرار دهید . سپس آن را با نام sprite.js ذخیره کنید .
$(function(){
$('#navigation li a').append('<span></span>');
// span whose opacity will animate when mouse hovers.
$('#navigation li a').hover(
function() {
$('.hover', this).stop().animate({
'opacity': 1
}, 700,'easeOutSine')
},
function() {
$('.hover', this).stop().animate({
'opacity': 0
}, 700, 'easeOutQuad')
})
});
25- کد های زیر را هم در یک فایل بریزید و آن را با نام Style.css ذخیره کنید .
body{
background:#000000; }
#navigation
{
margin-left:250px;
}
#navigation li
{
float:left;
}
#navigation li a
{
background-image:url(images/sprite.jpg);
display:block;
}
.home
{
background-position:0px 0px;
width:102px;
height:70px;
}
.services
{
background-position:-102px 0px;
width:110px;
height:70px
}
.portfolio
{
background-position:-212px 0px;
width:108px;
height:70px
}
.about
{
background-position:-320px 0px;
width:102px;
height:70px
}
.contact
{
background-position:-422px 0px;
width:103px;
height:70px
}
26- در این مرحله باید تصویر منو را فراخوانی کنید . کد های زیر را در ادامه فایل CSS قرار دهید .
#navigation a .hover {
background:url(images/sprite.jpg) no-repeat;
display: block;
opacity: 0;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#navigation a.home .hover {
background-position: -0px -72px;
14.
}
#navigation a.services .hover{
background-position: -102px -72px;
}
#navigation a.portfolio .hover {
background-position: -212px -72px;
}
#navigation a.about .hover {
background-position: -320px -72px;
}
#navigation a.contact .hover {
background-position: -422px -72px;
}
27- اکنون فایل ها را ذخیره کنیدو فایل HTML را اجرا کنید تا نتیجه را ببینید .
** فایل پایانی آموزش را از بخش زیر دانلود کنید .
** نمونه ساخته شده منو را از بخش پیش نمایش مشاهده کنید .
** می توانید فایل PDF آموزش را از فایل پیوست دانلود کنید .
ترجمه و تنظیم : محمد رضا محمودی
۲۱ دیدگاه برای این مطلب ارسال شده است.
خیلی جالب و عالی بود هرکسی چنین وقتی را برای آموزش نمیذاره متشکرم
[پاسخ]
رضا جان آموزش سایت کاملا ناقصه.اول اینکه تصویری که طبق آوزش میسازیم با تصویری دمو کاملا تفاوت داره.دوما فایل های زیادی رو آموزش ندادی که بسازیم.سوما سعی کن این آموزش رو درست کنی یا فایل لایه بازشو بزاری.ممنون.
[پاسخ]
Mohamad Reza پاسخ در تاريخ دی ۱۹م, ۱۳۸۹ ۸:۳۳ ب.ظ:
مشکلی نداره عزیز…فایل ها کامله…آموزش دقیقا از منبع ترجمه شده…
[پاسخ]
چرا hex ؟؟؟؟؟؟؟؟؟
[پاسخ]
Mohamad Reza پاسخ در تاريخ دی ۲۰م, ۱۳۸۹ ۶:۰۷ ب.ظ:
هکس به معنی سحر و جادو هست….سایت ایران هکس هم یه جورایی جادوی ایران…
[پاسخ]
pouria پاسخ در تاريخ بهمن ۲۳م, ۱۳۹۰ ۶:۱۱ ب.ظ:
man ta alan fekr mikardam manzooret codaye hex range:d ya hamoon mabnaye 16 maslan fekr kardma manzoorete:d
[پاسخ]
سلام
خسته نباشی
مطالب و آموزشت عالی بود و حرف نداشت ممنووووون
من از این به بعد به سایتت همیشه سر میزنم تا باز مطالب جالب تر یاد بگیرم…
لطفا هرچقدر می تونید در زمینه طراحی وب کم نذارید…
تشکر
خدانگهدار
[پاسخ]
ممنون . امید وارم آموزش های دیگری هم از شما ببینیم
[پاسخ]
سلام ممنون از گذاشتن آموزش های خوبتون من این کار رو انجام دادم یعنی طراحی شو تموم کردم ولی در قسمت گذاشتن کد HTML متوجه نمیشم چه جوریه آیا باید با برنامه ایی این کد ها رو جای گذاری کنی یا با notepad هم میشه این کار رو انجام داد ممنون میشم سریعتر جواب منو بدید؟
یه پیشنهاد هم دارم اگه میشه آموزش ها رو بیشتر کنی خیلی خوب میشه
ممنون
[پاسخ]
Mohamad Reza پاسخ در تاريخ اردیبهشت ۱۱م, ۱۳۹۰ ۵:۲۳ ب.ظ:
سلام . با notepad هم میشه…
[پاسخ]
سلام
ممنون از اینکه جواب سوالمو دادید میشه آموزش ساخت آلبوم با فتوشاپ رو بذارید؟؟؟
[پاسخ]
Mohamad Reza پاسخ در تاريخ اردیبهشت ۱۲م, ۱۳۹۰ ۹:۴۹ ق.ظ:
منظورتون رو دقیق تر میگید؟
[پاسخ]
ببخشید من کد ها رو ذخیره کردم حالا چه جوری باید بذارم توی وبلاگم؟؟؟
بجای این images/sprite.jpg آدرس عکسو رو گذاشتم درسته؟؟؟
[پاسخ]
Mohamad Reza پاسخ در تاريخ اردیبهشت ۱۲م, ۱۳۹۰ ۹:۵۰ ق.ظ:
وبلاگه یا سایت؟ اگر وبلاگ باشه یکم کار سخت میشه…چون هم به حجم قالب گیر میده هم به بعضی از کدها…آدرس ها رو جایگزین کنید . بعد کدهای سی اس اس و HTML رو هم توی قالب توی مکانی که میخواید قرار بگیره . بزارید . یکم سخته…
[پاسخ]
منظورم اینه که چه جوری میشه یه آلبوم عکس با فتوشاپ ساخت همین
درباره این کدها اصلاً نمیفهمم چه جوریه شما کی میتونی بیایی چت تا اونجا منو راهنمایی کنید؟؟؟
[پاسخ]
محمدرضا اگه میشه یکم سریعتر جواب منو بده تا کار ما راه بیفته
[پاسخ]
Mohamad Reza پاسخ در تاريخ اردیبهشت ۱۳م, ۱۳۹۰ ۷:۳۲ ب.ظ:
باور کن من منظورت رو نمیفهمم…میخوای متحرک باشه؟ دقیقا همه جزئیات رو بگو تا کمکت کنم…
[پاسخ]
ببین شما فعلاً آلبوم رو وللش بیا به من کمک کن تا کد منو رو تموم کنم همین
[پاسخ]
من کد ها رو که توی فایل مخصوص خودشون ذخیره کردم حالا چه جوری باید آدرس ها رو جای گذاری بکنم تا پیش نمایشش درست در بیاد؟؟؟
[پاسخ]
Mohamad Reza پاسخ در تاريخ اردیبهشت ۱۵م, ۱۳۹۰ ۸:۵۱ ق.ظ:
خوب فایل ها هرجا هستن آدرسشون رو بزار دیگه
[پاسخ]
نمی دونم شاید عیب از کامپیوتر بنده باشد ولی متاسفانه فایلتون در موزیلا باز نمی کند .
[پاسخ]