۱۶استایل بندی تصاویر

    7,223 views

ممکنه تا به حال واستون این مسئله یا این سوال پیش اومده باشه که چجوری بعضی از سایت ها کاری می کنند که موقعی که موس روی یک عکس میره حاشیه دور عکس رنگش عوض میشه. توی اسکرین شات دارین یکی از پست های من رو می بینید که با رفتن موس روی اون رنگ حاشیه عکس عوض میشه… اگه واستون جذاب بود و دوس دارین این آموزش رو دنبال کنید با ما در ادامه مطلب همراه باشید…

اولین قدم آشنایی خیلی کوچیک با سی اس اس هست. حالا لازمه که فایل استایل قالبتون رو باز کنید و قسمتی رو که برای چارچوب پست هست رو پیدا کنید. مثلا توی استایل قالب ما آی دی پست (post#) برای پست هامون در نظر گرفته شده. خوب حالا کدهای پایین رو به زیر استایل پستتون منتقل می کنید. (توصیه میشه که تک به تک کدها رو بنویسید)

#post img {
border: 2px solid #d3d3d3;
padding: 4px;
max-width: 600px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}#post a:hover img, #post img:hover {
background-color: #f5f5f5;
}
#post img.no-border, #post img.no-border:hover, #post a:hover img.no-border {
border: 1px solid #fff;
background-color: #fff;
}

حالا به توضیح کدهای بالا می پردازیم…

قسمت اول : همونطور که توی بخش اول می بینید ما اومدیم تمام تصاویری رو که توی آی دی پست قرار گرفته اند رو انتخاب کردیم و یه حاشیه با سایز ۲ پیکسل و رنگ #d3d3d3 بهشون دادیم.
خط ۲ گفته که از هر ۴ طرف به اندازه ۴ پیکسل فاصله بگیر.
خط ۳ گفته بیشترین پهنای عکس رو ۶۰۰ پیکسل قرار بده که شما می تونید از این برای مواقعی استفاده کنید که با بزرگ شدن پهنا از یه اندازه با به هم ریزی قالب مواجه میشین.
خط ۴ و ۵ و ۶ برای گرد کردن گوشه های حاشیه هست. هرچی عدد زیادتر بشه به دایره نزدیک میشیم.

قسمت دوم: توی خط اول تعریف کردیم وقتی عکس ما بصورت لینک دراومد یا حتی اگه لینک هم نبود با رفتن روی عکس پشت زمینه تصویر ما رنگش به #f5f5f5 در بیاد.

قسمت سوم: قسمت سوم برای کسانی هست که میخوان بعضی از مطالبشون حاشیه داشته باشه؛ بعضی هاش نداشته باشه. توی این قسمت تعریف می کنیم که اگه کلاس (div class) عکس ما no-border قرار گرفت عکس یه حاشیه به اندازه ۱ پیکسل و با رنگ سفید داشته باشه. همچنین توی خط دوم پشت زمینه عکس رو هم سفید (#ffffff) قرار دادیم.
پاورقی: راستی یه چیز رو یادم رفت بگم؛ لازمه شما آی دی (id) یا کلاس (class) پستتون رو بجای #post قرار بدید.
کار راحتی بود!!! نه؟؟؟

توضیحاتی در باب نویسنده

علی هستم؛ سومین نفری بودم که به جمع تک تمپ اضافه شدم... ریاضی میخونم و عاشق طراحی و وردپرسم :) بیشتر میتونید من رو توی فرندفید پیدا کنید

Visit Ali's Website

آموزش اسرار فتوشاپ به زبان فارسی Photoshop Top Secret

پجموعه پیش رو یکی از کامل ترین و برترین مجموعه های آموزشی در زمینه فتوشاپ می باشد که  ویژگی های خاص این مجموعه آن را از سایر مجموعه های مشابه متمایز نموده، از جمله این ویژگی ها قرار گیری هفت دوره آموزشی Adobe Photoshop CS4 ارائه شده توسط برترین اساتید جهان، به همراه مجموعه ای از نکات و ترفند های کار با فتوشاپ در قالب 101 پروژه آموزشی توسط آقای Mark Monciardini مدرس مجموعه Photoshop Top Secret، همچنین مجموعه ی بی نظیر و نفیس Photoshop Top Secret با زبان و محیط 100% فارسی (با کمترین دستکاری)، در قالب 6 دی وی دی است، که در بسته بندی اختصاصی تقدیم شما می گردد.

چگونه در فتوشاپ کمربند مشکی بگیریم؟!
مجموعه ی نفیس Photoshop Top Secret همان گونه که از نامش می توان حدس زد مجموعه ای کم نظیر، حرفه ای و محرمانه است که دریچه ای از اسرار و ترفند های ناشناخته فتوشاپ را پیش روی کاربران قرار می دهد. اکثر کاربران نرم افزار فتوشاپ همیشه دنبال آموزش ها و در واقع یادگیری نکات جدید و ترفندهایی از این نرم افزار در جهت ارتقاء سطح کار و توانائی های خود بوده اند که این امر باعث بوجود آمدن هزاران سایت آموزشی در این زمینه، کتب مختلف آموزش ترفند ها، نکته ها و نیز دوره های آموزشی با هزینه های بالا تحت عناوینی مانند جلوه های ویژه فتوشاپ و ... شده است. این مجموعه گرانبها که شامل بیش از 18 گیگابایت فیلم آموزش است در بردارنده ی آموزش های فوق العاده کاربردی و حرفه ای در زمینه های مختلفی، مانند آموزش ترکیب تصاویر، ساخت پوستر های سینمایی و تبلیغاتی، آموزش های حرفه ای روتوش تصاویر، ایجاد جلوهای ویژه، ساخت افکت های هیجان انگیز و رویایی، کار با متون، گرافیک وب و Digital Painting و موارد دیگری است. که در ادامه تصاویر آنها، به همراه توضیحات اجمالی از هر آموزش قرار داده شده است.

"کمربند مشکی" در نرم افزار Adobe Photoshop را از آن خود کنید !

iconقیمت : 10000 تومان
icon تعداد: DVD 5

پروژه های آموزشی این مجموعه ی نفیس عبارتند از: :: پروژه های DVD 1


alt
Movie Poster Design I : در این پروژه شما با هنر مونتاژ تصاویر افراد که یکی از بارزترین کارها در ساخت پوستر فیلم های سینمایی می باشد آشنا می شوید. Movie Poster Design II : دراین آموزش شما مشاهده می کنید که چگونه با تصاویری بسیار ساده و فقط با اعمال افکت ها و ترکیب تصاویر با یکدیگر پوستر فیلم بسیار حرفه ایی طراحی می شود.

.
altMovie Poster Credits : دراین پروژه شما با نحوه درست نمودن یک بلوک اعتباری یا همان Credit Block واقعی جهت پوستر فیلم های خود آشنا می شوید. Dark Faces : در این پروژه شما با خلق تصویر ترسناک آشنا می شوید که کاربرد این افکت در شکل های دیگر در مجلات و تصاویر تبلیغاتی زیاد می باشد. .
  • ادامه مطلب را بخوانید »

    • ۱۶ دیدگاه ارسال شده شما هم دیدگاهتان را ارسال کنید »

      فرید در گفت:

      ممنون اما اینجا یه فرقی داره اونم اینکه با این کار همه ی تصاویر استایل بندی می شن ، اما تویه این سایت(تک تمپ) فقط مطالب شما دارای این استایل هستن.به نظرم باید از زمنیه های دلخواه یا یک کلاس جدا استفاده کردید ؛ درسته ؟

      پاسخ ↓
        علی در گفت:

        از هیچ کدوم نیستش، چون شاید بعضی از عکس ها این حاشیه رو نخوان؛ بنابراین یه کلاس جداگونه تعریف کردم و هر عکس با اون کلاس به این شکل درمیاد….

      ames در گفت:

      سلام-واقعا از آموزشهای که گذاشتین ممنون-لطفا نحوه قرار دادن عکس رو توی قابهای آماده فتوشاپ رو هم بگین که هر جا گشتم پیدا نکردم-ممنون

      پاسخ ↓
      Amincool در گفت:

      سلام، مثل همیشه عالی بود.
      یه چند تا سوال:
      اینکه می گی “خط ۳ گفته بیشترین پهنای عکس رو ۶۰۰ پیکسل قرار بده که شما می تونید از این برای مواقعی استفاده کنید که با بزرگ شدن پهنا از یه اندازه با به هم ریزی قالب مواجه میشین.” یعنی عکس ما هر اندازه بود تبدیل می شه به این اندازه؟
      پاورقی رو هم نفهمیدم ممنون می شم کمک کنی.
      ممنون

      پاسخ ↓
        علی در گفت:

        در مورد سوال اولت باید بگم که درسته. پهنای عکس به ۶۰۰ پیکسل تبدیل میشه و عرض هم بصورت اتوماتیک کم میشه تا مشکلی برای عکس پیش نیاد.
        مسئله دوم هم که گفتی پاورقی رو نفهمیدی؛ منظورم اینه که توی فایل css قالبت یه آی دی یا به کلاسی واسه پست های قالب تعریف شده که باید اسم اون رو بجای #post بذاری… همین

      محمد حسین در گفت:

      عالی بود ولی من یه سوال دارم
      -moz-border-radius: 5px;

      این کد میدونم که مربوط به گرد کردن بوردر یا همون خط دورش ولی یعنی اون کد بالای به تنهایی گرد میکنه
      پس کار این دو کد چیه ؟
      -khtml-border-radius: 5px;
      -webkit-border-radius: 5px;

      پاسخ ↓
        علی در گفت:

        کد اولی برای گرد کردن گوشه ها توی مرورگرایی هست که این قابلیت رو دارند
        کد دومی هم برای گرد کردن توی مرورگر سافاری هستش

    ارسال دیدگاه