In Graphic | گفته‌هایی پیرامون گرافیک

چگونه favicon بسازیم و در صفحه وب قرار دهیم؟

یک راهنمای دو قدمی برای ساخت فویکن صفحات وب.

اول. چگونه favicon را بسازیم؟
برای ساخت فوآیکون چهار راه را می توانید انتخاب کنید:

1- اگر فقط یکی دوتا آیکون لازم دارید این بهترین راه است: طرح مورد نظر را در یک فایل 16x16 پیکسل یا 32x32 پیکسل آماده کرده و فایل را با فرمت jpg یا gif ذخیره کنید. حال برای تبدیل پسوند به این سایت ویا این سایت بروید، فایل jpg یا gif را به سایت می دهید و خیلی سریع و ساده فایل ico را پس می گیرید.

2- اگر از این آدمهای فتوشاپ باز هستید ویا هر روز میخواهید دویست سیصدتا از این faviconها بسازید بروید از اینجا پلاگین Ico Format را دانلود و روی فتوشاپ نصب کنید. حالا تا قیام قیامت آیکون طراحی کنید و مستقیم از فتوشاپ با فرمت ico ذخیره کنید.

3- اگر از پلاگین وحشت دارید یا اصلا نمیدانید پلاگین چیست: یک برنامه ای هم هست به اسم png2ico که اگر از اینجا دانلود و نصب کنید. می توانید فایلهای ذخیره شده با فرمت png را روی کامپیوتر خودتان تبدیل به فرمت ico کنید و حالش را ببرید.

4- و اگر خیلی از سه روش بالا سر در نیاوردید ویا حوصله نداشتید یا فتوشاپ خیلی راه دستتون نیست. این سایت را امتحان کنید. همانجا آیکون خود را بکشید و با یک کلیک دانلود کنید. انگار که باقلوا خورده باشید.

دوم. چطور در صفحه وب قرار دهیم؟
خب، حالا شما باید یک فایل به اسم favicon با پسوند ico داشته باشید. به این شکل: favicon.ico این فایل را در پوشه اصلی روی سرور خودتان آپلود کنید. و بعد دو خط کد ساده است که باید بین تگ <head>و <head\>صفحه وب تان قرار دهید. و تمام.

توضیح بیشتر: اگر در سایتتان صفحه ای دارید که می خواهید آیکون متفاوتی داشته باشد. آیکون مورد نظرتون رو در پوشه همان صفحه آپلود کنید.

توضیح بیشتر برای وبلاگ نویسها: اگر از سرویسهای مجانی وبلاگ استفاده می کنید هم می توانید برای وبلاگ خود favicon داشته باشید. اول یک سرور رایگان (مثل Sharemation) پیدا کنید تا بتوانید faviconخود را آپلود کنید، پس به قسمت "ویرایش قالب " رفته و همان کد بالا را بین تک <head> و <head\> قرار دهید. با این تفاوت که بجای favicon.ico آدرس کامل آیکون آپلود شده را باید جایگزین کنید. در این حالت شکل کد شما چیزی شبیه به این خواهد شد:

اگر مشکلی داشتید، بپرسید!

| | | | |

Posted by Majid a on September 25, 2007 1:43 PM | In School

چقدر به شکل و شمایل لینکها اهمیت می دهیم؟

جزئیاتی کلاسیک درباره لینکهای صفحه وب (خصوصا وبلاگ) برای اشنایی و ترغیب به استفاده از امکانات استایل برای دوست داشتنی تر شدن فضای وب؛

1- Color
رنگ لینکها را متفاوت از رنگ متن انتخاب کنید. این متفاوت بودن می تواند از چند پرده تا بیشترین کنتراستها را در بر بگیرد. اما چیزی که در اینجا مهم است هماهنگی آن با رنگ و لعاب صفحه تان است. این را هم بدانید که لینکها عناصر زنده صفحه شما هستند چه خوب که رنگهای زنده و شاد برایشان انتخاب کنیم.

2- Decoration
لینکها را - مگر در موارد خاص - Non-Decoration تعریف کنید: حالت Bold خیلی بی ریخت و ناخوانا است. Underline را هم به کل فراموش کنید، نقطه های زیر حروف را به کلی می پوشاند و خیلی از حروف را ناقص می کند.

3- Size
لزومي ندارد كه اندازه لينك ها را نسبت به متن بزرگ تر بگيريم. همين قدر كه رنگشان فرق داشته باشد كفايت مي كند. بزرگتر کردن لینکها فقط یکپارچگی صفحه شما را به هم می ریزد و شعور مخاطب را زیر سوال می برد.

4- Mouse Over
برای لینکها حتما حالت Over تعیین کنید. این کار باعث می شود مخاطب احساس خوشایندی پیدا کند. رنگ لینک را چند پرده روشن یا تیره کنید ویا کلا یک رنگ متفاوت اما - باز هم تاکید می کنم - هماهنگ با رنگ و لعاب صفحه انتخاب کنید. ظاهر شدن Underline در حالت Over هم شاید بد نباشد. اما حواسمان باشد به هیچ وجه در حالت Over اندازه فونت را تغییر ندهیم و آن را Bold نکنیم.

5- Visited
اگر در صفحه تان لينكهاي زيادي وجود دارد حتما حالت Visited را براي لينكهايتان تعريف كنيد. اين كار باعث مي شود مخاطب راحت تر متوجه شود که کدام لینکها را دیده و کدام لینکها را ندیده است.
توجه كنيد كه اين تغيير خیلی جزئی در حد یکی دو پرده روشن تر يا تيره تر بیشتر نباشد. اگر تفاوت زیاد باشد برای بار دیگری که صفحه شما باز می شود با یک آشفتگی روبرو خواهیم شد ویا فکر خواهیم کرد که شما بین لینکهایتان تبعیض قائل شده اید!

6- Active
شاید خیلی کم نیاز شود و مورد استفاده قرار گیرد - تقریبا هم فراموش شده - اما برای کامل بودن کار بهتره که فقط یک تغییر رنگ را در این حالت داشته باشیم. تاکید میکنم که فقط تغییر رنگ. همین.

7- The Last Note
اگر هیچ کدام از موارد بالا را نخواستید رعایت کنید یا حوصله نداشتید، یا هر چه، لطفا یک کار را یادتان نرود: رنگ لینکها را از آن حالت پیش فرض کذایی آبی بنفش قرمز خارج کنید!

پ.ن. این موارد برای صفحات فارسی و لینکهای داخل متن نوشته شده است.

| | | | |

Posted by Majid a on August 23, 2007 1:47 AM | In School

Home | Archive | Contact | RSS