EQualizer.8m.com | اكولايزر :: Create a rollover button

rollover button

تو اين آموزش قصد داريم با استفاده از دو برنامه Adobe Photoshop و Adobe ImageReady يك دكمه دو وضعيتي درست كنيم.
در خيلي از وب سايت‌ها شما احتياج به يك دكمه داريد كه در حالت عادي يك شكل باشد ولي وقتي با موس روي آن قرار ميگيريم در يك شكل ديگر شود، اين كار در حالت عادي نياز به برنامه نويسي و ساخت دو شكل مجزا و بطور كلي كار زياد دارد، ولي ما اين كار را با استفاده از اين دو برنامه به راحتي انجام ميدهيم.

ابتدا برنامه فتوشاپ را باز كنيد و يك صفحه جديد در ابعاد دلخواه كه ميخواهيد دكمه شما در آن ابعاد ساخته شود ايجاد كنيد.(مثلا 200�200)
حالا يك لايه جديد ايجاد كنيد (Layer > New > Layer) يا (Ctrl + shift + N).
در اين لايه شكل اوليه دكمه خودتون رو طراحي كنيد...

خوب بعد از اين كار باز يك لايه جديد درست كنيد و در اين لايه حالت دوم دكمه خودتون رو طراحي كنيد ...

حالا روي لايه دوم از منوي Layer گزينه New Layer Based Slice رو انتخاب كنيد ...

با اين كار هم ميتوانيد با استفاده از ابزار Move اندازه تصوير دوم را با تصوير اول يكسان كنيد و هم براي قسمت بعدي اين كار الزامي است.
در اينجا كار ما با فتوشاپ تمام ميشود البته ميتوانيد اين تصوير را با فرمت PSD ذخيره كنيد تا در دفعات بعد اگر خواشتيد تغييري روي آن انجام دهيد براحتي اين كار را بكنيد.
بعد از اين بايد وارد نرم‌افزار ImageReady بشويم براي اين كار در برنامه فتوشاپ از منوي File گزينه Edit In ImageReady را انتخاب كنيد...
با اين كار وارد اين برنامه ميشويد و يك پيش نمايش از تصويري كه ساخته بوديد را ميبينيد...

حالا در اين برنامه در قسمت Web Content كه اگر اين قسمت را در صفحه نداريد ميتوانيد از اين مسير آن را پيدا كنيد :
Windows > WebContent
در اين قسمت لايه Normal را انتخاب كنيد سپس در قسمت Layer عكس اول را كه حالت اول دكمه ميباشد انتخاب كنيد، بعد از اين كار در قسمت Web Content قسمت Slices لايه موجود را انتخاب كنيد و در قسمت Layer حالت دوم دكمه را انتخاب كنيد.
(در اين قسمت منظور از انتخاب كردن پنهان و آشكار كردن ميباشد كه استفاده از اين دكمه ميتوانيد اين كار را بكنيد.)
حالا در قسمت Web Content در حالتي كه Slices را انتخاب كرده‌ايد روي اين دكمه كليك كنيد، يك لايه جديد زير اين لايه ايجاد ميشود، كه نام آن Over خواهد بود.
حالا براي اين دو لايه نيز همين كار را بكنيد بعني براي لايه اول در قسمت Slices حالت اول و براي لايه Over حالت دوم دكمه را فعال كنيد...

حالا بايد كار خود را تست كنيم، براي اين كار در قسمت ToolBox روي اين دكمه كليك كنيد با اين كار دكمه فعال ميشود...
حالا شما ميتوانيد اين صفحه را Save كنيد ولي در اين حالت يعني حالت فغال دكمه اين كار انجام نميشود ابتدا آن را از كار بيندازيد سپس Save كنيد...
فايل Save شده يك صفحه وب خواهد بود و تصاوير نيز با همان اندازه در پوشه‌اي به نام Images ذخيره خواهند شده.
براي Save كردن در فرمت وب از منوي فايل گزينه Save Optimized را انتخاب كنيد و براي Save كردن در فرمت فتوشاپ(PSD) از Save As استفاده كنيد...

نمونه كار :

[ Back ]