آموزش طراحی وب

به راحتی از فتوشاپ و با فتوشاپ خروجی CSS بگیرید !

در این نوشته شما میتونید در حقیقت PSD رو به CSS تبدیل کنین و در کدهای خودتون ازش استفاده کنید

GRAPHIC

سلام به همه شما دوستان ،

ابتدا از شما پوزش میخوام که بخش گرافیک خیلی دیر به دیر به روز میشه . قول میدم که از این به بعد علاوه بر بروزرسانی های متداول روزانه ، شاهد اتفاقات شگفت انگیزی هم در نحوه آموزش ها باشید 🙂 خب بریم سراغ موضوع اصلی این نوشته که یکی از نوشته های منتخب و پر طرفدار اولین شماره ماهنامه طراحی وب بود که استقبال بسیار خوبی ازش شد .

 

به راحتی از فتوشاپ و با فتوشاپ خروجی CSS بگیرید !

من در حدود ۲ ماه پیش یک افزونه و یا در حقیقت Extention رو تحت عنوان CSS3PS معرفی کردم که توسط اون میتونستید از لایه های مختلفی که در فتوشاپ ساختید خروجی CSS3 بگیرید که زحمت کدنویسان عزیز رو خیلی خیلی کم میکنه .

 

اما نکته جدید و جالب

باید به خدمتتون عرض کنم که دیگه نیاز به استفاده از اون افزونه نیست 🙂 چون نسخه جدید فتوشاپ تحت عنوان CC یا در حقیقت Adobe Photoshop Creative Cloud امکانی فراهم شده که شما تنها با ۱ کلیک میتونید خروجی CSS خودتونو تحویل بگیرید و چه جالبتر اینکه CSS3 هم پشتیبانی میشه .

 

در منوی Layer فتوشاپ نسخه CC امکانی با نام Copy CSS اضافه شده . شما با این امکان به راحتی و فقط با ۱ کلیک میتونین از لایه و یا لایه هایی که در پنجره Layer فتوشاپتون Select هستن خروجی CSS بگیرین . واسه اینکه بهتر موضوع رو درک کنین بهتره مثال عملی بزنیم . پس به مراحل زیر دقت کنین :

 

مرحله اول

ابتدا یک کلید ساده که در بر دارنده چند FX هست رو طراحی میکنیم و سپس یک نوشته هم روی اون کلید قرار میدیم :

bt

مرحله دوم

حالا هر دو لایه رو انتخاب میکنیم و کلید CTRL+G رو روی صفحه کلیدمون فشار میدیم تا به یک گروه تبدیل بشن

 

مرحله سوم

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

css3

 

مرحله چهارم

حالا به منوی Layer میریم و گزینه Copy CSS رو انتخاب میکنیم و یا میتونیم روی گروهی که ساختیم کلیک راست کنیم و از گزینه های موجود Copy CSS رو انتخاب کنیم

copycss

 

مرحله پنجم

حالا فقط کافیه که یک سند Notepad باز کنین و کلید CTRL+V رو فشار بدید . میبینین که کُد CSS نمایان میشه

 

به همین راحتی تونستیم از لایه های مختلف موجود در فایل گرافیکیمون خروجی CSS بگیریم . دقت داشته باشین این خروجی ، کلیه افکت های موجود در FX هر لایه رو میتونه به کد تبدیل کنه . به عنوان مقال ما در کلید طراحی شده از Drop Shadow ، Gradient Overaly , Strock , Bevel استفاده کرده بودیم و این موتور خروجی به راحتی همه این مقادیر رو طبق اختیاراتی که CSS در دسترس قرار میده به کد CSS3 تبدیل کرد . خب امیدوارم که این آموزش براتون جذاب و مفید واقع بشه .

درروزهای آتی منتظر آموزش های جدید و فیلمهای آموزشی جدید باشید 🙂

 

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲۲

  • با سلام و ممنون از توضیحات مفیدتون .
    من وقتی لایه ها رو به css تبدیل می کنم عکس پس زمینه من به جای اینکه به صورت rgb باشه به صورت یک عکس با فرمت png و به صورت url ظاهر میشه . تنظیمات خاصی وجود داره که من تعیین نکردم ؟
    ممنون میشم کمکم کنید .

    • سلام ، تنظیمات خاصی نیست ولی شما بهتره که بک گراندتون اگر عکس هست رو مجزا در سی اس اس خودتون کد اضافه کنین و سایر آبجکت ها رو با این ابزار خروجی بگیرید . وقتی شما یک لایه دارید که اون لایه به صورت خام هست و رنگ اون لایه بک گراند FX و یا در حقیقت Color Overlay نیست پس فتوشاپ نمیتونه این مورد رو تشخیص بده . تشکر

  • سلام
    تگ های دیو رو چگونه تنظیم کنیم تا این کدها دقیقا همون طرح فتو شاپ بشه، یعنی کدوم دیو داخل کدوم قرار بگیره اگه میشه کد html رو هم بذارین، ممنون.

  • سلام
    جواب شما خیلی کلی و بدیهی است. به قول قدیمی ها ” چشم بسته غیب گفتین” 🙂 دوست عزیز اگه کسی css را کاملا بلد و مسلط باشد، سوال برایش پیش نمی آید که نیاز داشته باشه از شما یا سایرین بپرسه، البته بنده از سایرین (دیگر سایت ها) پرسیدم و کدهای خروجی فتو شاپ رو تحلیل کردم.
    جواب سوالم اینه:
    به دلیل اینکه از دستور z- index در سه سلکتور استفاده شده است دیگه نیازی نیست div ها به صورت تودرتو نوشته شوند. با نام گذاری فایل متنی به نام style.css وایجاد کدهای html به صورت زیر، کار به پایان می رسد.

    سلام مدرسه مجازی ایرانیان

    • سلام ، این مقاله مربوط به بخش گرافیک بوده و ما در این بخش موظف به حل مشکلات کدنویسی نیستیم . بنده صرفا سعی کردم شما رو راهنمایی کنم ولی اگر به دنبال پاسخ دقیقتر هستید باید سوالتون رو همانند سایر دوستان در بخش پرسش و پاسخ مطرح کنین تا در اونجا متخصیص پاسخ جامع تری رو به شما بدهند .

      تشکر

  • با عرض سلام و خسته نباشید.
    برای باز کردن پلاگین ها به برنامه Adobe Extension Manager نیاز داریم لطفا نسخه cc از این نرم افزار را در سایت مفیدتون قرار دهید و یا لینک بدید دانلود کنیم.
    باتشکر/آموزش ها مفیدی دارید و خیلی استفاده کردیم ….

  • ببخشید میشه این پلاگین رو در سایت قرار بدید چون سایت adobe ما رو تحریم کرده و بنده نمیتونم این پلاگین رو دریافت کنم ممنون میشم برای دانلود در سایت بزارید
    با تشکر

  • سلام
    ما اومدیم سند html رو هم طبق خروجی css تنظیم کردیم ؛ یه سوال اینکه:
    این عکسهایی که تو فایل css آدرس داده ؛لینکشون ناقصه یعنی همینکه این فایل css و html رو آپلود کنیم و استفاده کنیم جواب میده؟

    • سلام ، نمیدونم شما چه فایلیو با این ابزار خروجی css گرفتین ولی دقت داشته باشین که این ابزار برای کارهای جزئی استفاده میشه مثلا دریافت استایل یک دکمه که استایل های مناسبی داره نه اینکه بخوایم یه طرح کاملو با این ابزار css کنیم !

  • عالــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــِیه

  • سلام ممنون به خاطر مطالب علمی خوبتون.یه سوال من فتوشاپم cc 2015 و در قسمت لایر copy css فعال نیست چکار کنم ؟؟؟ ممنون

    • سلام، غیر ممکن هست. مجدد و با دقت بررسی کنین اگر باز هم نبود اسکرین شات بفرستید و سوالتون رو در بخش پرسش و پاسخ مطرح کنید جواب داده میشه. تشکر

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین