تبدیل لایه های psd به css3 تنها با یک کلیک !

[m3hdi 15]

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

خوب من به عنوان یه گرافیست وب و همچنین برنامه نویس وب بعضی وقت ها به مشکلات اساسی بر میخوردم که شاید اکثر شما هم به آن برخوردید " مشتری دقیقا همان چیزی را میخواهد که در طرح قالب دیده است "

به عنوان مثال یک Botton دارای گرادینت هاییی هستش که شاید برنامه نویس به خوبی نتواند این را اجرا کند ... به عنوان مثال به طرح زیر یک نگاه بندازید ::

[ATTACH=CONFIG]4160[/ATTACH]

این طرح دارای یک سری border-radius و همچنین linear-gradient و box-shadow هایی می باشد که هر قدر هم برنامه نویس وب حرفه ای باشید چیزی در حدود 2 تا 4 دقیقه وقت باید براش صرف کنید تا به این شکلی که میخواهید در بیایید...

این همه مقدمه چینی کردم تا امروز بهتون ابزار یا همان Extension رو بهتون معرفی کنم به نام CSS3.ps .

این ابزار به راحتی هر لایه ای که شما در فتوشاپ طراحی کنید رو به صورت کدهای پیشرفته CSS3 در عرض کمتر از 5 ثانیه در اختیار شما کاربران قرار می دهد !

لازم به ذکر هستش که این Extension بروی نسخه های :

Adobe Photoshop CC

Photoshop CS5 and CS6

Adobe Photoshop CS3 and CS4

قابل نصب هستش ..

کار با این ابزار بسیار راحت هستش ... شما می توانید به برای دانلود و آموزش نصب به آدرس زیر بروید :

CSS3Ps - Download Plugin

همچنین فایل مربوط به نسخه های مختلف فتوشاپ براتون در انتهای همین پست قرار میدم .

بعد از نصب فایل می توانید به منوی window > Extensions و پنل CSS3Ps را فعال کنید .. حال لایه مربوطه را انتخاب کنید و سپس بروی آیکن CSS3Ps کلیک کنید بعد از چند ثانیه مرورگر شما اجرا می شود و وارد سایت CSS3Ps - free cloud based photoshop plugin that converts layers to CSS3 styles. می شود و بعد از آنالیز چند ثانیه از لایه شما که بستگی به لایه دارد کد مربوط به CSS3 شما ظاهر می شود ...

[ATTACH=CONFIG]4161[/ATTACH]

Rounded Rectangle 4 { width: 89px; height: 78px; -webkit-border-radius: 40px 10px 10px; -moz-border-radius: 40px 10px 10px; border-radius: 40px 10px 10px; background-color: #00d2ff; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.75), inset 0 1px rgba(255,255,255,.65), inset 0 0 25px rgba(255,255,190,.41); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.75), inset 0 1px rgba(255,255,255,.65), inset 0 0 25px rgba(255,255,190,.41); box-shadow: 0 1px 3px rgba(0,0,0,.75), inset 0 1px rgba(255,255,255,.65), inset 0 0 25px rgba(255,255,190,.41); border: solid 1px #07a1d3; background-image: -webkit-linear-gradient(bottom, rgba(0,126,255,.74), rgba(0,255,234,.74)); background-image: -moz-linear-gradient(bottom, rgba(0,126,255,.74), rgba(0,255,234,.74));

این همان کد مربوط به همان لایه ای است که در تصویر بالا قرار داده ام . کمتر از 5 ثانیه آنالیز کرد و کد بهم داد .

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

-----------------------------------------------------------------------------

Download for Adobe Photoshop CC

Download for Adobe Photoshop CS5 and CS6

Download for Adobe Photoshop CS3 and CS4

و همچنین یک مثالی که خود سایت در اختیارتون قرار داده هم براتون در اینجا قرار میدم ::

Example PSD

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

منبع :: http://css3ps.com/

[m3hdi 15]

نحوه نصبش در فتوشاپ نسخه های CS5, CS6 , CC

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

2. فایل CSS3Ps.zpx را اجرا میکنم .

3. برنامه Adobe Extension Manager باز میشود که بروی کلید "Accept" کلیک میکنیم .

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

5. برای فعال کردن این پنل به منوی "Window -> Extensions -> CSS3Ps" میرویم .

به همین راحتی !

[m3hdi 15]

نحوه نصبش در فتوشاپ نسخه های CS4 , CS3

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

1- وقتی فتوشاپ باز هستش بروی لایه مربوطه کلیک کنید .

2. به منوی File -> Scripts -> Browseمیرویم

3. حال فایلی که برای نسخه فتوشاپ مربوطه بودش و دانلود کردیم را انتخاب میکنیم CSS3Ps.jsx

4. اسکریپ اجرا میشود و وارد سایت CSS3ps می شود و سپس بعد از آنالیز کدهای مربوطه را در اختیار شما قرار میدهد .

[majid.fathi 44]

[APARAT]lCxLJ[/APARAT]

فیلم اموزشی تبدیل psd به css3

[m3hdi 15]

فیلم آموزش شماره 2 :

[APARAT]JdKU9[/APARAT]

ویرایش شده در مرداد 92 توسط m3hdi
اضافه کردن ایتم اپارات!

[m3hdi 15]

فیلم آموزش شماره 3 ::

این فیلم بسیار کوتاه هستش . برای دوستانی که سرعت اینترنت پایینی دارند با یک مثال کوتاه آموزش استفاده از این نرم افزار رو توضیح داده است ::

[APARAT]8sH0c[/APARAT]

[ehsan1989 10]

با سلام

مطلب خیلی خوبی بود و برای ما که به کدنویسی اطلاع چندانی نداریم خیلی مفیده اما من نتونستم نصبش کنم.

فوتوشاپ من cs6 ورژن 13 هست ولی وقتی نصبش می کنم پیام خطا میده که باید فوتوشاپ ورژن 11 به بالا باشه!!

نسخه cs6 رو هم دانلود کردم

ممنون میشم راهنمایی کنید چون واسم مهمه

[gilar 11]

فتوشاپ من ورژن css5 پیام خطا میده که باید فوتوشاپ ورژن 11 به بالا باشه!!