205
Member
سلام
خيلي وقت بود مي خواستم يه آموزش بزارم!
هي اين ور اونور ميکردم يه آموزش خوب ترجمه کنم!
ولي امروز ديدم يکي از بچه ها در مورد وب و.... سوال کرده بود,
گفتم آموزش ساختن دکمه هاي Rollover و لينک دادن و.... رو بدم!
-------------------------------
1. دکمه, Toolbar يا هر چي رو که ميخواهيد به حالت Rollover در بياريد تو فوتوشاپ باز کنيد.
من خودم از اين استفاده کردم:
(کار خودم نيست! يه ذره فقط باهاش ور رفتم!)
------
2. حالا تو فوتوشاپ اون حالتي رو که ميخواهيد وقتي موس
رفت رو دکمه , ايجاد بشه رو درست کنيد!
مثلا من اين رو انتخاب کردم!!
شما هر چي خواستيد استفاده کنيد, مثلا رنگشون رو عوض کنيد يا
UnderLine شون کنيد و....!
فقط دقت کنيد اينا بايد جدا از فايل اصلي باشن!
بايد تو يه لايه ي ديگه باشن! هر کدوم جدا از هم!!
اگه فايل PSD رو ببينيد مي فهميد منظورم چيه!!
-----
3. حالا Image Ready رو باز کنيد!! Ctrl+Shift+M -----------
-----
4. حالا از اينجا سعي مي کنم بيشتر جزيي توضيح بدم تا همه متوجه بشن!
----
5. با توضيح Palette ها و ابزارهاي ImageReady که در اين آموزش لازم هست شروع مي کنم!!
هر کدوم از Palette ها رو نداريد از منوي Windows بياريد!
فکر نکنم احتياجي به توضيح باشه!
فقط يه نکته اونم اين که فرق بين Slice و Image Map در اين هست که
با Slice فقط ميشه مربع و مستطيل انتخاب کرد در صورتي که با
Image Map دايره, مستطيل, مثلث و..... ميشه انتخاب کرد!!
براي رسم مثلث و..... بايد از زير مجموعه هاي Image Map Tool استفاده کنيد.
يه نکته ي مهم در مورد عکس دوم اينه که هر Slice و Image Map
State مخصوص به خودش رو داره . يعني مثلا Image Map 1
Over Click داره! با راست کليک ميتونيد State ها رو عوض کنيد.
------------
از اين به بعد ميرم سر آموزش!!
-----------
الان باید فایلتون تو ImageReady باز باشه!
----------
1. دکمه ی Home :
ساده ترین راه برای ساختن Rollover Button استفاده از Slice هست!
با ابزار Slice اطراف نوشتتون یه Slice بکشید!
سعی کنید Slice دقیقا دور نوشته Fit باشه!
همین که Slice کشیدید یه Slice State توی Rollover Palette ایجاد میشه!
روش کلیک راست کنید و Add Rollover State رو انتخاب کنید!
یه زیر مجموعه زیر همون Slice State میسازه به نام Over State .
از اینجا به بعد باید خیلی دقت کنید!
حالا روی Slice State کلیک کنید.
و لایه ای رو که می خواهید حالت معمولی ( قبل از اینکه با موس کلیک بشه) داشته باشه,
(اگه پنهان هست) ظاهرش کنید.
در این عکس Home حالت معمولی ( اولین عکس از بالا) است که در Slice State
ظاهر است و Home-1 حالت بعد از رفتن موس بر روی دکمه هست( عکس دوم از بالا ی صفحه)
است که مخفی هست!
حالا بری روی Over State کلیک کنید و حالت بعد از رفتن موس بر روی دکمه رو ضاهر و حالت معمولی رو پنهان کنید.
این عکس باالعکس, عکس بالاست, یعنی Home-1 ظاهر و Home مخفی است!!
---------
حالا می تونید Preview رو بزنید و نتیجه ی کارتون رو ببینید!!
هر وقت میرید روی نوشته حالت یا رنگش عوض میشه!!
از حالت Preview خارج شید.
----------
فقط لینک دادن مونده!:
برید به Slice Option Palette و تو کادر URL , لینکی رو که می خواهید بنویسید.
حالا برید به File------->Save Opimized as و کارتون رو به صورت HTML and Images سیو کنید.
توجه کنید که اون لینکی که برای دکمه دادید , حتما باید در مسیری که کارتون رو سیو کردید به
صورت HTML موجود باشه وگرنه ارور میدهد.!!!
--------
بعد از یه بار Open کردن فایل در Browser اون لینک تبدیل به فایل اجرایی میشه!!
که من هم نمیدونم دلیلش چیه!!
--------
ببخشید اگه اشکالی چیزی داشت!!
هر سوال,انتقاد و... که دارید حتما بگید.
راستش برای ساخت این جور دکمه ها 3-4 روش هست.
می خواستم همه رو آموزش بدم ,دیدم خیلی طولانی میشه و خسته کننده
خودم هم خسته شده بودم!
برای همین هم اون تولبار رو انتخاب کرده بودم که با هر دکمه ای یه روش رو یاد بدم!!
شرمنده دیگه!!!
امیدوارم به دردتون بخوره!!!
اینم PSD و فایلهای HTML کار من با حجم 1.70مگ
PSD
تا بعد
خيلي وقت بود مي خواستم يه آموزش بزارم!
هي اين ور اونور ميکردم يه آموزش خوب ترجمه کنم!
ولي امروز ديدم يکي از بچه ها در مورد وب و.... سوال کرده بود,
گفتم آموزش ساختن دکمه هاي Rollover و لينک دادن و.... رو بدم!
-------------------------------
1. دکمه, Toolbar يا هر چي رو که ميخواهيد به حالت Rollover در بياريد تو فوتوشاپ باز کنيد.
من خودم از اين استفاده کردم:
(کار خودم نيست! يه ذره فقط باهاش ور رفتم!)
------
2. حالا تو فوتوشاپ اون حالتي رو که ميخواهيد وقتي موس
رفت رو دکمه , ايجاد بشه رو درست کنيد!
مثلا من اين رو انتخاب کردم!!
شما هر چي خواستيد استفاده کنيد, مثلا رنگشون رو عوض کنيد يا
UnderLine شون کنيد و....!
فقط دقت کنيد اينا بايد جدا از فايل اصلي باشن!
بايد تو يه لايه ي ديگه باشن! هر کدوم جدا از هم!!
اگه فايل PSD رو ببينيد مي فهميد منظورم چيه!!
-----
3. حالا Image Ready رو باز کنيد!! Ctrl+Shift+M -----------
-----
4. حالا از اينجا سعي مي کنم بيشتر جزيي توضيح بدم تا همه متوجه بشن!
----
5. با توضيح Palette ها و ابزارهاي ImageReady که در اين آموزش لازم هست شروع مي کنم!!
هر کدوم از Palette ها رو نداريد از منوي Windows بياريد!
فکر نکنم احتياجي به توضيح باشه!
فقط يه نکته اونم اين که فرق بين Slice و Image Map در اين هست که
با Slice فقط ميشه مربع و مستطيل انتخاب کرد در صورتي که با
Image Map دايره, مستطيل, مثلث و..... ميشه انتخاب کرد!!
براي رسم مثلث و..... بايد از زير مجموعه هاي Image Map Tool استفاده کنيد.
يه نکته ي مهم در مورد عکس دوم اينه که هر Slice و Image Map
State مخصوص به خودش رو داره . يعني مثلا Image Map 1
Over Click داره! با راست کليک ميتونيد State ها رو عوض کنيد.
------------
از اين به بعد ميرم سر آموزش!!
-----------
الان باید فایلتون تو ImageReady باز باشه!
----------
1. دکمه ی Home :
ساده ترین راه برای ساختن Rollover Button استفاده از Slice هست!
با ابزار Slice اطراف نوشتتون یه Slice بکشید!
سعی کنید Slice دقیقا دور نوشته Fit باشه!
همین که Slice کشیدید یه Slice State توی Rollover Palette ایجاد میشه!
روش کلیک راست کنید و Add Rollover State رو انتخاب کنید!
یه زیر مجموعه زیر همون Slice State میسازه به نام Over State .
از اینجا به بعد باید خیلی دقت کنید!
حالا روی Slice State کلیک کنید.
و لایه ای رو که می خواهید حالت معمولی ( قبل از اینکه با موس کلیک بشه) داشته باشه,
(اگه پنهان هست) ظاهرش کنید.
در این عکس Home حالت معمولی ( اولین عکس از بالا) است که در Slice State
ظاهر است و Home-1 حالت بعد از رفتن موس بر روی دکمه هست( عکس دوم از بالا ی صفحه)
است که مخفی هست!
حالا بری روی Over State کلیک کنید و حالت بعد از رفتن موس بر روی دکمه رو ضاهر و حالت معمولی رو پنهان کنید.
این عکس باالعکس, عکس بالاست, یعنی Home-1 ظاهر و Home مخفی است!!
---------
حالا می تونید Preview رو بزنید و نتیجه ی کارتون رو ببینید!!
هر وقت میرید روی نوشته حالت یا رنگش عوض میشه!!
از حالت Preview خارج شید.
----------
فقط لینک دادن مونده!:
برید به Slice Option Palette و تو کادر URL , لینکی رو که می خواهید بنویسید.
حالا برید به File------->Save Opimized as و کارتون رو به صورت HTML and Images سیو کنید.
توجه کنید که اون لینکی که برای دکمه دادید , حتما باید در مسیری که کارتون رو سیو کردید به
صورت HTML موجود باشه وگرنه ارور میدهد.!!!
--------
بعد از یه بار Open کردن فایل در Browser اون لینک تبدیل به فایل اجرایی میشه!!
که من هم نمیدونم دلیلش چیه!!
--------
ببخشید اگه اشکالی چیزی داشت!!
هر سوال,انتقاد و... که دارید حتما بگید.
راستش برای ساخت این جور دکمه ها 3-4 روش هست.
می خواستم همه رو آموزش بدم ,دیدم خیلی طولانی میشه و خسته کننده
خودم هم خسته شده بودم!
برای همین هم اون تولبار رو انتخاب کرده بودم که با هر دکمه ای یه روش رو یاد بدم!!
شرمنده دیگه!!!
امیدوارم به دردتون بخوره!!!
اینم PSD و فایلهای HTML کار من با حجم 1.70مگ
PSD
تا بعد
