Memakai Fasilitas Copy CSS Dari Photoshop CC


Sebagai seorang developer, saya hanya sesekali memakai Adobe Photoshop untuk melakukan photo retouching. Tapi bagi web designer, Photoshop adalah tool yang sangat berguna untuk membuat konsep website yang hendak dirancang. Setelah klien setuju dengan rancangan di Photoshop, maka tim front-end bisa segera mengubah gambar statis di Photoshop tersebut menjadi sebuah website yang responsif melalui Adobe Edge Reflow, Adobe Dreamweaver, dan sebagainya. Website yang responsif biasanya dihasilkan dengan menggunakan CSS layout (kebalikannya, website yang tidak responsif hanyalah komposisi gambar yang di-slice dari Photoshop dengan ukuran yang fixed).

Salah satu fitur menarik dari Photoshop yang berguna bagi saya adalah fasilitas Copy CSS. Fasilitas ini memungkinkan Photoshop untuk menghasilkan CSS berdasarkan layer yang sedang saya pilih. Fitur ini berguna bagi saya karena saya tidak mempublikasikan seluruh rancangan ke Adobe Edge Reflow tapi hanya sesekali perlu men-copy CSS berdasarkan apa yang telah dibuat di Photoshop.

Sebagai contoh, saya memiliki dokumen Photoshop dengan 3 layer seperti pada gambar berikut ini:

Dokumen Photoshop Dengan 3 Layer

Dokumen Photoshop Dengan 3 Layer

Saya kemudian memilih layer dengan nama header, lalu memilih menu Layer, Copy CSS seperti pada gambar berikut ini:

Memilih menu Copy CSS

Memilih menu Copy CSS

Photoshop akan men-copy CSS seperti berikut ini pada clipboard:

.header {
  background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(0,0,0) 18%);
  background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(0,0,0) 18%);
  background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(0,0,0) 18%);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 4608px;
  height: 822px;
  z-index: 2;
}

CSS ini bisa langsung saya pakai pada HTML. Sebagai contoh, untuk membuktikan bahwa CSS tersebut sesuai dengan tampilan di Photoshop, maka saya membuat sebuah file HTML dengan nama latihan.html yang isinya seperti berikut ini:

<html>
<head>
<title>Latihan</title>
<style>
.header {
   background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(0,0,0) 18%);
   background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(0,0,0) 18%);
   background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(0,0,0) 18%); 
   position: absolute;
   left: 0px;
   top: 0px;
   width: 4608px;
   height: 822px;
   z-index: 2;
}
</style>
</head>
<body>
<div class='header'>
</div>
</body>
</html>

Bila saya menampilkan HTML tersebut di browser, saya akan memperoleh hasil seperti pada gambar berikut ini:

Hasil di browser

Hasil di browser

Hampir sama seperti di Photoshop, bukan? Hanya saja saya perlu melakukan sedikit pengaturan lagi untuk ukuran dan posisi. Misalnya saya bisa menghilang position: absolute dan mengganti ukuran menjadi seperti left: 0px; top: 0px; width: 100%; height: 200px;.

Bagaimana dengan tulisan? Apakah Photoshop CC juga bisa men-copy drop shadow effect dengan baik? Saya akan mengujinya dengan memilih layer dengan nama title, lalu memilih menu Layer, Copy CSS. Saya akan memperoleh CSS seperti berikut ini di clipboard:

.title {
  font-size: 222.5px;
  font-family: "Charlemagne Std";
  color: rgb( 255, 255, 255 );
  font-weight: bold;
  text-align: center;
  text-shadow: 0px 0px 79px rgb( 210, 248, 93 );
  position: absolute;
  left: -36.363px;
  top: 144.887px;
  width: 2350px;
  height: 365px;
  z-index: 3;
}

Saya akan coba menambahkannya di HTML sehingga isi file latihan.html terlihat seperti berikut ini:

<html>
<head>
<title>Latihan</title>
<style>
.header {
   background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(0,0,0) 18%);
   background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(0,0,0) 18%);
   background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(0,0,0) 18%);
   left: 0px;
   top: 0px;
   height: 200px;
}
p.title {
   font-size: 3em;
   font-family: "Charlemagne Std";
   color: rgb( 255, 255, 255 );
   font-weight: bold;
   text-align: center;
   text-shadow: 0px 0px 15px rgb( 210, 248, 93 );
   margin-top: 0px; padding-top: 40px;
}
</style>
</head>
<body>
<div class='header'>
   <p class='title'>The Solid Snake</p>
</div>
</body>
</html>

Saya melakukan sedikit perubahan pada CSS yang dihasilkan oleh Photoshop untuk menyesuaikan dengan posisi yang ada di HTML. Bila saya menampilkan latihan.html di browser, kali ini saya akan memperoleh hasil seperti pada gambar berikut ini:

Hasil di browser

Hasil di browser

Hampir mirip dengan yang ada di Photoshop. Hanya saja saya perlu menyesuaikan posisi dan ukuran sesuai dengan yang dibutuhkan di HTML. Misalnya saya memilih memakai 3em daripada 222.5px karena ukuran dalam satuan px bisa sangat berbeda dari satu platform ke platform lainnya.

Perihal Solid Snake
I'm nothing...

One Response to Memakai Fasilitas Copy CSS Dari Photoshop CC

  1. depalpiss mengatakan:

    wes matap makin keren aja nih photoshop makasih sharingnya sobat, salam kenal …🙂

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: