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

آموزش تبدیل ساده طرح های فتوشاپ به CSS با یک کلیک

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

شما به عنوان طراح وب سایت، پس از آماده شدن طرح نهایی چگونه آن را به HTML و CSS تبدیل می کنید؟ در ادامه مطلب قصد داریم ابزار مفید و البته رایگانی را معرفی کنیم که با یک کلیک دستورات سی اس اس را محاسبه و تولید می کند.

پلاگین CSS3Ps

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

تا لحظه نگارش این مطلب، CSS3Ps قادر است تبدیل های زیر را انجام دهد. (خوشبختانه این پلاگین به روز رسانی مناسبی دارد)

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

به عنوان مثال، تصمیم داریم لایه ای که در تصویر زیر مشخص شده است را با استفاده از CSS3Ps به دستورات سی اس اس تبدیل کنیم.

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

برای تبدیل کافی است لایه مورد نظر را انتخاب و روی دکمه مربوطه در پنل CSS3Ps کلیک کنیم.

نکته: پنل CSS3Ps را می توانید از منوی window > Extensions فعال کنید.

پس از آن به صورت خودکار به وب سایت CSS3Ps وارد شده و سیستم کدهای نهایی را تولید می کند.

در مثال ذکر شده، دستورات زیر به عنوان خروجی محاسبه و تولید شد:

controls base

}

;width: 500px

;height: 40px

; webkit-border-radius: 4px-

;moz-border-radius: 4px-

;border-radius: 4px

;(background-color: rgba(34,36,38,.9

;(webkit-box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15-

;(moz-box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15-

;(box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15

;border: solid 1px #000

;(background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35

;(background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35

;(background-image: -o-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35

;(background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35

;(background-image: linear-gradient(to top, rgba(0,0,0,.35), rgba(255,255,255,.35

{

همانطور که مشاهده می کنید، CSS3Ps بسیار هوشمندانه عمل کرده و حتی opacity لایه را با استفاده از دستور rgba تولید کرد.

منبع : نردبان



همچنین می توانید از مطالب زیر دیدن فرمایید:

کتاب آموزش ابتدایی تا متوسط فتوشاپ ، نوشته آرش اصغری

این کتاب به گونه ای می باشد که می تواند مرجع خوبی برای افراد مبتدی …

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *