آموزش ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )

 

گام 1
یک سند جدید با بوم خاکستری ایجاد کنید.سپس با Rectangular Marquee Tool چهار مستطیل مانند نمونه رسم کنید:
گام 2
سپس به منویlayer بروید و در پنجره بازشده تنظیمات زیر را انجام دهید:
حال باید شکلی شبیه زیر داشته باشید:
 
 می خواهیم مربع بعدی شبیه آیکن facebook باشد.پنجره layer style را باز کرده و تنظیمات زیر را انجام دهید:
 
سومین مربع را مطابق زیر تنظیم کنید:
و مربع آخر را به صورت زیر درآورید:
حال وقت آن است که آیکنها را اضافه کنید.
آیکنها را در وسط هر مربع اضافه کرده وبرای هر آیکنdrop shadow اعمال کنید.
شما باید شکلی مانند نمونه داشته باشید:
اضافه کردن محتوا به مربع ها:
مستطیلی به کنار هر یک از مربع ها اضافه کرده ومتنهای زیر را تایپ کنید و هر مستطیل را مانند نمونه رنگ کنید:
اضافه کردن کدhtml و css :
قبل از اینکه شروع به کدنویسی کنید، همه لایه ها را مخفی کنید.
آیکنها را به یکدیگر بچسبانید.
باRectangular Marquee Tool مستطیلی دور همه آیکنها بکشید تا همه فاصله ها را از بین ببرید.
حال از منویedit>copy merged را انتخاب کرده،سپس از منوی file>new و سرانجام از منویedit> past را برگزینید.عکس را با پسوندpng داخل یک پوشه ذخیره کنید.
تنظیمات سندhtml:
یک سند html و cssایجاد کرده ودر پوشه ای که عکس را ذخیره کردید،اسناد را save کنید.
لینک زیر را در سند html وارد کنید:
<link rel="stylesheet" type="text/css" href="styles.css" />
 
حال باید کد منو را وارد کنیم. منو از یک لیست نامرتب تشکیل شده است.داخل این لیست تگ    
 وجود دارد که عناصر مخفی منو را نگه می دارد. هر تگ کلاسی دارد که شامل نام دکمه span
هاست.
<ul id="social-menu">
<!------ Twitter Button Starts ------>
<li>
<a class="twitter" href=http://www.Website1.com> <span>5628 Followers</span> </a>
</li>
<!------ Twitter Button Ends ------> 
 
 
<!------ Facebook Button Starts ------>    
<li>
<a class="facebook" href=http://www.WebSite2.com> <span>1500 Fans</span> </a>
</li>
<!------ Facebook Button Ends ------>    
 
 
<!------ Photoshop Plus Button Starts ------>   
<li>
<a class="ps" href=http://www.Website3.com> <span>120 Tutorials</span> </a>
</li>
<!------ Photoshop Plus Button Ends ------> 
 
 
<!------ RSS Button Starts ------>    
<li>
<a class="rss" href=http://www.Website4.com> <span>350 Subscribers</span> </a>
</li>
<!------ RSS Button Ends ------> 
</ul>
      شویدو کدهای زیر را وارد نمایید: cssسپس وارد
#social-menu li {
    list-style: none;
    margin-bottom:10px;
}
#social-menu a {
    background: url('icon-sprite.png') no-repeat;
    height: 39px;
    width: 38px;
    display: block;
    position: relative;
}
#social-menu span {
    width: 0;
    left: 38px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -1px;
    white-space: nowrap;
    line-height: 39px;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;
}
#social-menu a:hover span {
    width: auto;
    padding: 0 20px;
    overflow: visible;
}
های مناسب برای آیکنها: style
/* TWITTER BUTTON STYLES -------
------------------------------*/
#social-menu .twitter {
    background-position: left top;
}
#social-menu .twitter span {
    background-color: #00aced;
    color: #fff;
}
/* FACEBOOK BUTTON STYLES ------
------------------------------*/
#social-menu .facebook {
    background-position: left -39px;
}
#social-menu .facebook span {
    background-color: #325396;
    color: #fff;
}
/* PHOTOSHOP PLUS BUTTON STYLES 
------------------------------*/
#social-menu .ps {
    background-position: left -78px;
}
#social-menu .ps span {
    background-color: #1f75bf;
    color: #fff;
}
/* RSS BUTTON STYLES -----------
------------------------------*/
#social-menu .rss {
    background-position: left bottom;
}
#social-menu .rss span {
    background-color: #f5a33f;
    color: #fff;
}
فایل را ذخیره کرده و آن را بچرخانید.
 
 
 










نظرات و پیشنهادات خود را در رابطه با آموزش ایجاد دکمه های یک منوی انیمیشنی از قسمت زیر ارسال کنید

 ارسال نظر :

نام: *
ايميل: *
نظر: *
كد امنيتي:           كد امنيتي
کراکترهای نمايش داده شده در تصوير را در فيلد كد امنيتي وارد كنيد.


برچسبها:
آموزش ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )    مقاله ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )    آموزش گام به گام ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )    آموزش تخصصی ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )    آموزش رایگان ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )    آموزش تصویری ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )    آموزش چندرسانه ای ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )    مقاله کاربردی ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )    آموزش حرفه ای ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )    آموزش فارسی ایجاد دکمه های یک منوی انیمیشنی در فتوشاپ (Adobe Photoshop )   
News Portal Designed & Powered By Eleworks . © 2017 IT Channel. All Rights Reserved.