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

پلاگین CSS3Ps خروجی CSS از فتوشاپ

در این نوشته یک پلاگین فتوشاپ رو معرفی میکنیم که شما به راحتی میتونید از لایه های مختلف به همراه استایل هاشون ، خروجی CSS بگیرید

GRAPHIC

سلام به همه دوستان و همراهان عزیز ،

امروز میخوام بهتون در این مقاله ، یک ابزاری رو معرفی کنم که بسیار بسیار برای کدنویسان عزیز جالب و کاربردی هست . در این نوشته میخوام یک پلاگین فتوشاپ رو معرفی کنم که توسط اون شما به راحتی میتونید از لایه های مختلف فتوشاپ به همراه استایل هاشون ، در کمتر از چند ثانیه خروجی CSS بگیرید 🙂 پس با من همراه باشین

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

 

پلاگین CSS3Ps

این پلاگین که توسط وب سایت css3ps.com تولید و ارائه شده ، به شما این امکان رو میده که به راحتی هر چه تمام تر بتونید از فتوشاپ خروجی CSS3 بگیرید .

 

این پلاگین از چه سیستمن عامل ها و نسخه های فتوشاپ رو پشتیبانی میکنه ؟

این پلاگین چند سالی هست که در حال ارائه نسخه های متعدد هست ولی در حال حاضر با ویندوز و مک قابل استفاده هست و همچنین امکان نصب بر روی فتوشاپ CS3 و CS4 و CS5 و  CS6 و به تازگی هم CSS رو هم داره .

 

این پلاگین رایگانه ؟

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

 

قابلیت های CSS3Ps

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

  • Multiple Layers : امکان تبدیل چند لایه به صورت همزمان و یا یک گروه لایه
  • Prefixes : پشتیبانی از -webkit- ها برای ارائه هتر در مرورگرهای مختلف
  • Blending : در حال حاضر در نسخه ی موجود تنها Mode های نرمال پشتیبانی میشه
  • Size : امکان تغییر اندازه Object ها پس از تبدیل به CSS

تنظیماتی که در پنجره Layer Style در فتوشاپ موجود هست رو به صورت کامل پشتیبانی میکنه :

  • Border Radius
  • Bevel and Emboss
  • Stroke
  • Inner Shadow
  • Inner Glow
  • Satin
  • Color Overlay
  • Gradients Overlay
  • Pattern
  • Outer Glow
  • Drop Shadow
  • Text Layers

 

مراحل نصب و استفاده از این پلاگین

۱ ) خب ابتدا نسخه اخر این پلاگین رو از زیر دانلود کنین :

  • نسخه مخصوص Adobe Photoshop CC [ دانلود ]
  • نسخه مخصوص Adobe Photoshop CS5 and CS6  [ دانلود ]
  • نسخه مخصوص : Adobe Photoshop CS3 and CS4 [ دانلود ]

 

۲ ) فایل نصب رو اجرا کرده و مراحل نصب رو طبق تصویر زیر ادامه بدید

Step3

 

۳ ) در این مرحله پلاگین نصب شده و در پلاگین های فتوشاپ شما قابل رویت هست

Step4

 

۴ ) در این مرحله میتونین فتوشاپ خودتون رو باز کنین و به منوی Window برید و جعبه ابزار این پلاگین رو در محیط کار فتوشاپ خودتون قرار بدید

Menu-item-Windows

 

۵ ) الان میتونید به راحتی و با استفاده از چند تا کلیک ساده از این پلاگین برای تبدیل PSD به کد CSS استفاده کنین

text-layers-support2

 

۶ ) خب تبریک میگم ، لایه های انتخابی شما به کد CSS3 تبدیل شد

xp-screen-4

 

 فیلم آموزشی کار با پلاگین CSS3Ps

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

خب امیدوارم که این پلاگین مورد استفاده همه شما عزیزان قرار بگیره و تونسته باشم راه کاری رو به شما اموزش بدم که بتونید سریعتر گرافیک های خودتون رو به کد CSS تبدیل کنین . در آینده ای نزدیک ابزار دیگری رو به شما معرفی میکنم که در فتوشاپ CC اضافه شده و خیلی راحت تر این کار رو برای شما انجام میده پس با من و آموزش های مدرسه مجازی ایرانیان همراه باشین 🙂

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

حسین همت یار

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

دیدگاه ۱۳

  • سلام آقای همت یار . خیلی جالب و مفید بود . سال خوبی را برای شما آرزو می کنم . عیدی ما فراموش نشود . منتظریم

  • با سلام و احترام
    و تبریک سال نو
    خیلی مورد جالبی بود و کار رو راحت میکنه ، فقط چند سوال دارم!
    ۱- برای فتوشاپ ccs5 هم موجود هست؟
    ۲- وقتی در فتوشاپ روی یک لایه استایل های مختلف مانند گراندینت و یا بوردر و یا هر نوع افکت دیگر قرار بدیم به راحتی این آموزش اون رو تبدیل میکنه؟ و مورد دیگه اینکه وقتی کدهای به دست آمده رو به محتوای کدنویسی شده اضافه کنیم در نمایش اون در مرورگر مشکلی پیش نمیاد؟ یعنی مرورگر از اون افکت ها پشتیبانی میکنه یا باید اصلاح کنیم؟

    ۳- حالا که این پلاگین موجود هست حتما پلاگینی هم وجود داره که پی اس دی رو به اچ تی ام ال تبدیل کنه؟
    اگر موجود هست لطفا معرفی کنید

    یه انتقادی هم خدمتتون داشتم
    بنده حدود ۹ سال هست که دارم روی طراحی رابط گرافیک فعالیت میکنم ، چند مورد فیلم که در این موضوع متشر کردید رو دیدم ، فقط موضوعی که وجود داره اینه که قیمت ها بالا هست. یعنی موضوع فیلم آنچنان حرفه ای یا پیچیده نیست که هزینه اون رو بالا در نظر گرفتید. لطفا کمی در قیمت گذاری ملاحظه دانشجوها رو بکنید. و یه مقدار سطح آموزش ها رو حرفه ای تر و به روزتر کنید تا رقبت به خرید به وجود بیاد.
    و مورد آخر
    اگر سرعت اینترنتمان کفاف دانلود فایل ها رو ندهد امکان انتخاب چند آموزش و پرداخت هزینه آن به صورت کارت به کارت رو داریم که بر روی سی دی به دستمان برسد؟
    شرمنده متن خیلی زیاد شد! 🙂

    • سلام به شما دوست عزیز ، سال نو شما هم مبارک ، مواردی که فرمودید رو یک به یک خدمتون پاسخ میدم :

      ۱ : بله از CS3 تا CC رو پشتیبانی میکنه .

      ۲ : بله این مورد رو هم پشتیبانی میکنه و کد های Webkit هم در اختیارتون قرار میده . البته امکانی در فتوشاپ نسخه CC موجود هست که همین کارو انجام میده که در شماره اول ماهنامه که تا ۱۵ فروردین منتشر میشه معرفی میکنیم .

      ۳ : تا به حال ندیدم ولی تحقیق میکنم اگر بود حتما معرفی میکنم .

      ۴ : بله این مورد هم صحیح هست و انشالله در سال جدید فیلم های جدیدی و البته به صورت رایگان قرار میدیم .

      ۵ : بله این مورد هم امکان پذیر هست که به زودی به سیت اضافه میکنیم 🙂

      از دیدگاه شما دوست عزیز بسیار ممنونم .

  • سلام و خسته نباشید
    خیلی خیلی جالب بود
    من روی پروژه ام تست کردم
    واقعا حجم قابل توجهی از پروژه کسر میشه
    روی اخرین ورژن کروم و فایرفاکس کاملا درست نشون میداد ولی روز مرورگر های قدیمی تست نکردم
    همینجا از متنی که در مورد پارالاکس گذاشتید هم تشکر میکنم
    لطفا در بخش نظر دهی اسم نظر دهنده را به سایت خودش لینک کنید 😉
    باتشکر

  • سلام;
    چطوری باید از CSS3Ps.zxp استفاده کرد؟
    الان دانلود کردم ولی با هیچ برنامه ای قابل اجرا نیست، با فتوشاپ cc هم باز می کنم نمی تونه این فایل رو بخونه. ممنون میشم راهنمایی کنید.
    با تشکر

  • سلام آقای همت یار
    جناب همت یار امکان این هست که برنامه Adobe Extension Manage را برای دانلود قرار بدید ؟ سایت ادوب ایران رو تحریم کرده و هیچ سایتی نرم افزار رو برای دانلود نزاشته !

  • برای من بعد از قبول شرایط وقتی میخواد نصب شه ارور میده 🙁
    the extension ‘css3ps’ does not contain valid signature.the extension will not be intaled.
    راه حلی وجود داره؟

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

پنل کاربران

بستن
*
*

نظرسنجی

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

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

اموزش تصادفی

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

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

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

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