Promo

Tampilkan posting dengan label Photoshop. Tampilkan semua posting
Tampilkan posting dengan label Photoshop. Tampilkan semua posting

31.1.11

Cara cepat mengubah psd menjadi css dan html

Sedang belajar membuat desain web? Kalau ya, berarti sama dengan saya. Seperti halnya kebanyakan orang, tentu selalu mencoba menempuh jalan yang sulit untuk mempelajarinya. Kalau sudah mentok, baru buka Google. Padahal, jika dari awal langsung mencari di Google, tentu tidak akan membutuhkan waktu yang lama.

Hari ini pun saya menemukan cara instan mengubah file psd (Photoshop) menjadi file CSS dan HTML. Meskipun masih banyak yang harus disesuaikan, setidaknya banyak proses yang harus dilewati bila dilakukan secara manual.

Bagi Anda yang mau mencobanya, silakan ikuti langkah yang saya berikan. Karena dilakukan secara online, tentu saja kita selalu berharap situs ini selalu ada dan gratis. Jika tidak, terpaksa mencari situs lain atau kembali dilakukan secara manual.

Siapkan desain dalam bentuk file .psd (Photoshop) lalu buka situs ini. Klik Pilih Berkas (browse).

clip_image002

Pilih file .psd lalu klik Open.

clip_image004

Klik Upload File.

clip_image006

Tunggu proses hingga selesai. Kalau sudah, silakan download.

clip_image008

Jika sudah didownload, lakukan penyesuaian seperlunya. Bisa menggunakan Dreamweaver atau notepad++. Misalnya, mengganti gambar dengan teks (semua objek yang dikonversi dalam bentuk gambar).

clip_image010

Silakan modifikasi lebih lanjut. Tentu saja, harus mengetahui/mendalami bahasa HTML, CSS, dan JavaScript supaya desain lebih bagus.

10.1.11

Mengubah ukuran foto otomatis di photoshop

Ketika akan mengupload gambar ke internet, baik untuk keperluan artikel di blog, album foto di facebook, maupun yang lain, tentu akan lebih baik kita mengubah ukurannya supaya tidak memenuhi kapasitas hosting dan juga tidak terlalu berat ketika meguploadnya. Mengubah ukurannya, bisa menggunakan aplikasi Photoshop. Namun, kalau jumlahnya banyak, tentu saja bisa merepotkan.

Supaya pekerjaan lebih ringan, kita bisa memanfaatkan fitur Action. Dengan fitur ini, setelah kita merekam sebuah aksi, bisa dijalankan aksi yang sama pada gambar/foto yang lain.

Berikut ini, salah satu contohnya. Saya akan mengubah semua foto dengan tampilan horizontal dengan ukuran, resolusi, dan tempat penyimpanan yang sama. Caranya sebagai berikut.

Buka Action dengan menekan tombol Alt + F9. Atau, menu Window > Actions.

clip_image002

Klik ikon Create new set.

clip_image004

Ketik namanya lalu klik OK. Misalnya, horizontal. Penamaan bebas, tetapi disarankan dengan nama yang mudah diingat.

clip_image006

Klik ikon Create new action.

clip_image008

Kasih nama lalu klik Record.

clip_image010

Sampai saat ini, aktivitas kita di Photoshop akan direkam. Kali ini, saya akan mengubah ukuran dan resolusi foto. Klik kanan pada jendela salah satu foto lalu klik Image Size.

clip_image012

Ubah ukuran dan resolusi lalu klik OK.

clip_image014

Klik File > Save for Web & Devices.

clip_image016

Pilih ukuran yang diinginkan lalu klik Save.

clip_image018

Tentukan lokasi penyimpanan. Beri nama lalu klik Save.

clip_image020

Tutup foto yang sudah diubah.

clip_image022

Klik No.

clip_image024

Klik ikon Stop playing/recording pada Actions.

clip_image026

Sekarang, semua foto yang horizontal bisa diperlakukan hal yang sama dengan foto sebelumnya. Caranya, buka foto yang akan diubah. Klik Action 1 lalu klik Play selection.

clip_image028

Pekerjaan lebih ringan, bukan? Kita tidak perlu lagi mengubah satu per satu foto. Photoshop akan melakukannya secara otomatis. Untuk action lain, silakan dicoba sendiri.