آموزش ساخت لوگوهای گوشه بالای چپ و راست وبلاگ

حتما همه شما در وب گردی های روزانتون به وبلاگ ها و سایت هایی برخوردید که در گوشه های چپ و راست بالای صفحه یک بنر مورب به شکل مثلث قرار گرفته مثلا اینجا ، شاید شما هم دوست داشته باشید در وب گاهتون چنین چیزی داشته باشید ، در این مطلب قصد دارم آموزش ساخت این نوع لوگوها رو یاد بدم ، از ساخت تا قرار دادن اون در وبلاگ کمتر از ۵ دقیقه طول میکشه پس با ما همراه باشید:

کل آموزش رو میتونید در ادامه مطلب مشاهد کنید

مشترک فید نون وا شوید تا نان را به درب منزلتان بفرستیم!

۱- ابتدا فتوشاپ رو اجرا کنید و از منوی File ، گزینه New رو انتخاب و یک صفحه با اندازه ۲۰۰ در ۲۰۰ پیکسل ایجاد کنید.

۲-  تصویرتون رو یکبار zoom out کنید برای این کار از کلیدهای میانبر Ctrl و منفی استفاده کنید.

۳- حالا از جعبه ابزار گوشه چپ فتو شاپ ، ابزار  خط یا همون Line tool رو انتخاب کنید ، ما قصد داریم یک لوگوی برای گوشه سمت چپ ایجاد کنیم بنابراین یک خط مورب در گوشه بالا و سمت چپ تصویرتون ایجاد کنید ، به طوری که دو طرف خط از تصویر بیرون بزنه و تصویر از وسط به دو مثلث جدا بشه:

۴- حالا از جعبه ابزار گوشه چپ فتوشاپ ، ابزار paint bucket tool رو انتخاب کنید و رنگتون رو به قسمت بالای خط یعنی مثلث بالا بپاشید :

۵- آخرین جعبه سمت راست فتوشاپ ، جایی برای کار با لایه هاست ، برای این که فقط قسمت بالای کار شما دیده بشه لازمه قسمت پایین کار (یعنی مثلث پایین) محو بشه ، در جعبه لایه ها ، لایه background رو غیرفعال کنید ، برای این کار علامت چشم رو از کنار لایه بک گروند بردارید.

۶- حالا کافیه یک متن مطابق تصویر به کارتون اضافه کنید.

۷- میتونید با ابزار های مختلف کمی متن و تصویر رو زیباتر کنید ، به عنوان مثال از مسیر زیر برای زیباتر کردن متن استفاده کنید:
Layer – layer style – Blending optin

8- از منوی فایل save for web رو انتخاب و کارتون  رو با فرمت  Gif ذخیره کنید.کار چیزی شبیه دو تصویر زیر در میاد:

۹- حالا باید برای این تصویر یک کد بنویسیم تا تصویر کاملا از هر طرف به گوشه مانیتور بچسبه ، من این کد رو نوشتم ، شما میتونید دانلودش کنید ، تنها کاریکه برای چسباندن کامل تصویر به گوشه صفحه نمایش هست تابع  absolute  هست یعنی باید  position:absolute رو از هر طرف صفر تعیین کنید. به هر حال من کل کد رو برای نمایش چنین تصاویری نوشتم ، تنها کاری که شما کافیه انجام بدین اینکه کدها که فقط ۵ کیلوبایت هستند رو دانلود کنید و در نوت پد باز کنید ، به جای http://noonva.wordpress.com آدرس موردنظری که دوست دارید با کلیک روی تصویر کاربر به اون جا منتقل بشه رو وارد و به جای http://noonva.files.wordpress.com/2008/10/right-noonva.gif هم آدرس تصویرتون که در وب آپلود کردید رو قرار بدین ، همچنین برای نمایش نوشته مورد نظر در هنگام نگه داشتن موس روی تصویر به جای noonva عبارت مورد نظرتون رو وارد کنید.

دانلود کد لوگوی گوشه سمت راست – حجم ۲ کیلوبایت
دانلود کد لوگوی گوشه سمت چپ – حجم ۲ کیلوبایت
دانلود فونتی که من در این آموزش استفاده کردم

در پایان متذکر میشم از این آموزش در تمام سرویس ها وبلاگی که اجازه دسترسی به سرس رو میدن میتونید استفاده کنید.

مشترک فید نون وا شوید تا همیشه مطالب در کوتاه ترین زمان به دست شما برسد. اگر نمی دانید فید چیست این مطلب را بخوانید
اشتراک از طریق ایمیل :