hiduptreda

Setting Warna Photoshop untuk Desain Web

Atreda Wicaksi — Tue, 15 May 2012 20:49:58 +0000

Warna merupakan elemen penting dalam desain. Pemilihan warna yang tepat akan membuat desain web menjadi enak dilihat. Saat membuat desain web di photoshop kita telah memilih perpaduan warna yang sesuai dengan yang kita inginkan tapi ketika desain di photoshop tersebut dijadikan image, warna jadi meleset, tidak sama seperti yang kita buat di photoshop. Untuk mengatasi ikuti cara berikut.

Perlu diperhatikan bahwa setting warna photoshop ini bukan untuk grafis cetak (printing) maupun foto.

Setting warna photoshop untuk desain web:
1. Color Settings memakai Monitor RGB
Untuk mengubah color settings bisa ketika membuat new document photoshop, seperti gambar dibawah ini.

Atau untuk document photoshop yang telah dibuat bisa diganti lewat menu Edit>Color Settings. Pada bagian RGB ganti dengan Monitor RGB, seperti gambar dibawah ini.

2. Ubah profile warna
Langkah ini harus dilakukan tiap membuka document desain photoshop.
Klik Edit>Assign Profile, kemudian pilih Profile: Display, seperti gambar berikut.

3. Pastikan pada menu View>Proof Colors TIDAK tercentang.

4. Setting untuk Safe for Web & Device
Langkah ini dilakukan ketika desain web selesai di slice dan akan menyimpan slice tersebut ke dalam format .jpg, .gif atau .png.
Menu ini ada di File>Safe for Web & Device. Pastikan bagian Convert to sRGB TIDAK dicentang. Apabila akan menyimpan dalam format .jpg, bagian Embed Color Profile TIDAK dicentang untuk slice grafis / elemen desain, tapi untuk slice foto pilihan ini BISA digunakan (tidak wajib).

Ketika kita sudah mensetting sampai langkah ketiga, warna-warna pada document photoshop akan tampak berbeda. Warna inilah yang akan tampak sama ketika tampil di browser komputer maupun gadget.

Bisa dibuktikan menggunakan aplikasi bawaan MacOSX, DigitalColor Meter. Aplikasi ini bisa membaca nilai RGB sebuah warna yang tampil di monitor.

Ini SEBELUM document di Assign Profile.

Terlihat di gambar, pada photoshop kita menggunakan warna merah solid (R:255 G:0 B:0) tetapi ternyata warna yang tampil pada monitor bukan warna merah solid (R:246 G:0 B:29), begitu juga dengan warna lainnya.

Ini SESUDAH document di Assign Profile.

Warna dari Photoshop sama dengan warna yang tampil di monitor.

Inspirasi Penggunakan Gambar Tangan untuk Desain Web

Atreda Wicaksi — Mon, 14 May 2012 15:22:09 +0000

Apabila kamu seorang yang pandai menggambar, kamu bisa gunakan kepandaian menggambarmu untuk dijadikan desain web. Desain web dengan gambar tangan akan memberi kesan unik dan kreatif. Berikut ini contoh penggunaan gambar tangan untuk desain web.

lojajoliejolie.com.br

xhtmlcafe.net

inthenameofgood.com

jollyduckbunting.co.uk

Membuat Apple Touch Icon untuk Web

Atreda Wicaksi — Sun, 13 May 2012 15:51:51 +0000

Bagi para pengembang web mungkin sudah familiar dengan yang namanya favicon. Favicon akan ditampilkan browser sebagai icon untuk pengenal ketika sebuah web di bookmark. Ternyata di product Apple seperti iPod, iPhone atau iPad ketika browsing menggunakan safari terdapat pilihan add to home screen. Pilihan ini akan membuat shortcut icon yang ditaruh di home screen supaya lebih mudah untuk akses ke web tersebut. Lalu, bagaimana dengan icon nya?

Kita tahu ukuran icon di iOS (OS buatan Apple untuk gadget iPod, iPhone, iPad) itu gede-gede dan tidak mungkin akan menjadikan favicon sebagai icon di iOS. Maka iOS akan mengcapture halaman web tersebut dan dijadikan icon di home screen. Tapi apabila ingin mengganti icon hasil capture halaman web tersebut dengan logo web supaya lebih keliatan kece, bisa dengan membuat icon dengan nama file “apple-touch-icon.png”. Eits, tapi ada aturannya, bisa baca disini atau ikuti langkah-langkah berikut:

1. Buat Apple Touch Icon
Siapkan logo web. Karena kita akan membuat 4 ukuran icon yang berbeda, untuk memudahkan membuatnya bisa download template berikut HTML5 Boilerplate Favicon PSD-Template. Dalam template tersebut sudah disediakan tempat untuk icon ukuran 144×144 px (untuk iPad 3), 114×114 px (untuk iPhone 4, iPod Touch 4), 72×72 px (untuk iPad 1-2), 57×57 px (untuk iPhone 3, iPod Touch 3 kebawah).
Setelah selesai me-resize keempat icon sesuai dengan masing-masing ukuran, kemudian kita save masing-masing logo tersebut dengan cara di crop satu-satu atau yang biasa slice bisa di slice dan save for web and device.
Format file .png dengan nama apple-touch-icon-57×57 atau apple-touch-icon-57×57-precomposed, angka 57 diganti sesuai ukuran dimensi logo. Nama icon tanpa -precomposed, iOS akan menambahkan effect glossy di icon tersebut, jika memakai -precomposed iOS tidak akan menambahkan effect apa-apa.
Sehingga kita akan punya file seperti ini:

Dari gambar ada file apple-touch-icon.png (tanpa angka dimensi) itu adalah file apple-touch-icon-57×57-precomposed.png yang saya copy dan di-rename untuk nanti memudahkan pemanggilan.

2. Upload icon di hosting
Semua icon diletakan dalam satu folder yang sama.

3. Link element icon di html
Pemanggilan apple touch icon dengan membuat link element di dalam tag , seperti berikut:


   ...
   
   ...

Kita bisa hanya membuat 1 link seperti code diatas atau membuat link spesifik untuk tiap device seperti berikut:


   ...
   
   
   
   
   ...

Jika kita tidak menentukan link icon spesifik, iOS yang akan memilihkan icon yang cocok untuk device tersebut.
Misal memakai iPhone 4, maka kira-kira begini urutannya:
iOS akan mencari filename
1. apple-touch-icon-114×114-precomposed.png
2. apple-touch-icon-114×114.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png

Uji coba
Pada blog ini saya memakai link element contoh pertama yang cuma 1 link, karena lebih simple dan nggak bikin penuh code di tag .

Hmmm.. kece ya??

Contoh Keren Parallax Scrolling Web Design

Atreda Wicaksi — Sat, 12 May 2012 14:08:09 +0000

Desain web parallax scrolling selalu membuat saya terkagum-kagum. Web dengan layout parallax scrolling ini akan terasa berat waktu dibuka karena layout ini menggunakan banyak layer image. Coba saja liat web-web berikut ini:

nike.com/jumpman23/aj2012/

artofflightmovie.com

frankchimero.com

michelbergerbooze.com

beautifulexplorer.com

mortenstrid.no

grabandgo.pt

Desain Blog Baru hiduptreda

Atreda Wicaksi — Sat, 12 May 2012 02:44:41 +0000

Kabar gembira telah datang. Blog hiduptreda.com kini kembali hidup dengan desain baru bernuansa vintage. Desain blog hiduptreda, kini dengan layout responsive web design. Berbahagialah bagi yang suka browsing pakai smartphone ataupun tablet karena kini blog ini akan nyaman untuk di singgahi.

Dalam pengembangan desain baru ini ada banyak sumbangsih dari content di internet, baik itu tutorial ataupun elemen-elemen desain. Saya akan coba list apa saja content-content tersebut, itung-itung sharing ilmu. Okey, langsung saja..

1. Elemen-elemen desain
- pixeden
Salah satu penyedia macam-macam elemen desain gratis dengan kualitas tinggi. Dari web ini saya pake vintage badges dan retro ribbons.
Oh iya, sama vector Apple product.

- vectorpatterns
Ini juga penyedia elemen desain gratis. Dari web ini saya pake circles pattern buat background.

Kalo yang floral ornamen itu saya lupa dapet dari mana, tapi yang jelas gratisan juga.

2. Tutorial
Background footer itu dari tutorial Create a Lost Fantasy Micro World, cuma beberapa step di skip karena cuma butuhnya seperti yang sekarang itu.

3. Coding
- WordPress themes ini (hdptrd-v2) dibuat pake framework themehybrid.
- Default html5 templates starter pake initializr.
Oh iya, hampir kelupaan, itu foto saya yang di header hasil jepretan teman saya (neo). Alhasil, akhirnya saya punya foto kece juga. haha..

4 Hal Pokok CSS3 Media Queries untuk Responsive Web Design

Atreda Wicaksi — Fri, 11 May 2012 18:40:03 +0000

Bagi yang ingin membuat responsive web design layout, css3 media queries adalah kuncinya. Apa saja yang perlu diketahui tentang CSS3 media queries? Berikut 4 hal pokok tentang media queries.

1. Penggunaan Media Queries
Ada dua cara menggunakan media queries:
- menggunakan sintax @media
Sintax @media dapat dituliskan di file css, contoh seperti berikut:

/* css tampilan normal */
body {
   width: 1024px;
}
...

@media only screen and (min-width: 768px) and (max-width: 991px) {
   /* Css untuk layout tablet  di tulis pada bagian ini */
   body {
      width: 768px;
   }
   ...
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
   /* Css untuk layout wide mobile di tulis pada bagian ini */
   body {
      width: 480px;
   }
   ...
}

Sintax diatas membuat 2 aturan media queries yaitu untuk wide mobile (mobile posisi landscape) dan untuk tablet. Pertama css akan me-set body di ukuran 1024px, ketika resolusi layar di 480px sampai 767px maka akan menggunakan media queries yang bawah maka lebar body menjadi 480px. Begitu juga saat resolusi 768px sampai 991px maka lebar body menjadi 768px.

- inisialisasi css spesifik tiap layout
Inisialisasi file css ini ditulis di dalam tag html

...


...

Cara kedua ini menggunakan file css berbeda untuk tiap layout. Aturan media queries ditulis pada tag link.

2. max-width / min-width
Max-width dan min-width digunakan untuk memberikan kondisi ukuran lebar resolusi. Nilai min-width dan max-width akan memberi rentan resolusi kapan menggunakan layout tersebut. Berikut contoh kondisi max-width dan min-width media queries yang saya gunakan untuk membuat 4 tampilan layout (normal, tablet, wide mobile, mobile):

/* mobile layout */
body{
   ...
}
...

/* default wide mobile layout */
@media only screen and (min-width: 480px) and (max-width: 767px) {
   body {
      ...
   }
   ...
}

/* default tablet layout */
@media only screen and (min-width: 768px) and (max-width: 991px) {
   body {
      ...
   }
   ...
}

/* default monitor layout */
@media only screen and (min-width: 992px) {
   body {
      ...
   }
   ...
}

Oh iya, biar enak setting layout css, mobile layout sebagai default layout (mobile first design) seperti contoh diatas monitor layout menggunakan media queries.

3. orientation
Orientation digunakan untuk memberikan kondisi device orientation apakah landscape atau portrait. Kalo saya lebih suka menggunakan kondisi max-width / min-width karena lebih spesifik.

4. meta name=”viewport”
Ini sebenarnya bukan media queries tapi tag meta html. Tag meta name=”viewport” bertugas membaca resolusi width, tanpa setting meta viewport media queries tidak berfungsi. Tag ini di letakkan di dalam tag html , seperti ini setting meta viewportnya:


   ...
   
   ...

Yang penting dari code diatas adalah width=device-width yang akan men-set ukuran resolusi device, sedangkan initial-scale=1.0 untuk inisialisasi tanpa pembesaran.

Contoh Responsive Web Design

Atreda Wicaksi — Thu, 10 May 2012 23:46:23 +0000

Responsive web design merupakan sebuah cara untuk mempresentasikan sebuah web di beberapa device supaya lebih enak dilihat dan digunakan. Bagi yang ingin mencoba atau belajar membuat responsive web design bisa melihat contoh web berikut sebagai inspirasi ketika akan mulai mendesain layout web.

alistapart.com example

Layout Desain Web dengan Box Model

Atreda Wicaksi — Wed, 09 May 2012 19:19:29 +0000

Tabel dulu sering digunakan sebagai layout desain web. Penggunaan tabel sebagai layout kurang fleksibel dan terlihat kaku. Desain web modern kini menggunakan css box model sebagai layout. Berikut hal dasar yang perlu diketahui tentang box model.

Apa itu box model
Box model merupakan istilah untuk layout desain web yang menggunakan css untuk layout. Misal kita akan membuat desain web dengan 4 bagian utama yaitu header, content, sidebar, footer.

Pertama kita akan membuat 4 box biasanya menggunakan tag html

, seperti berikut:

Kemudian kita bisa mengatur posisi box-box tersebut sesuai yang kita inginkan di css, seperti berikut:

#header { .. }
#content { .. }
#sidebar { .. }
#footer { .. }

* css positioning baca disini.

Atribut Margin dan Padding
Setiap box bisa diatur jarak antar box atau jarak dengan content box tersebut. Perhatikan gambar berikut:

Box model

Dari gambar terlihat margin membuat area diluar box, sedangkan padding membuat area didalam box. Area margin inilah yang memberi efek jarak dengan box lainnya. Area padding memberi jarak box dengan content box tersebut. Apabila box tersebut diberi css background-color misalnya warna merah, maka background tersebut akan mengisi area padding juga karena area padding ada didalam box, seperti gambar berikut:

Atribut Width, Height dan Border
Setiap box dapat diatur panjang dan lebarnya menggunakan atribut width dan height. Kadang kita sudah menentukan ukuran yang pas pada tiap box, tapi hasilnya tidak sesuai. Hal tersebut terjadi karena sebenarnya panjang box = width + margin kanan kiri + border kanan kiri + padding kanan kiri.

Berbagai Macam Layout Desain Web

Atreda Wicaksi — Wed, 09 May 2012 00:53:57 +0000

Ada beberapa macam layout desain web saat ini yang semakin menghiasi dunia web. Berikut adalah macam-macam layout desain web:

1. Static
Layout static pada web desain memiliki ukuran tetap pada semua resolusi browser. Lebar layout static ini menggunakan satuan pixel (px) sehingga akan menghasilkan layout yang statis.
Contoh layout static: Facebook, Twitter.

2. Fluid
Layout fluid memiliki kemampuan untuk menyesuaikan lebar layout sesuai dengan resolusi browser. Hal tersebut terjadi karena lebar layout menggunakan satuan percent (%) sehingga lebar layout akan mengikuti resolusi browser saat dikecilkan atau dibesarkan (resize).
Contoh layout fluid: gmail, yahoo mail.

3. Responsive
Layout responsive memiliki kemampuan untuk berganti layout pada resolusi tertentu. Layout bisa berganti ini berkat kehadiran CSS3 dengan sintax media queries nya. Kalo di pemrograman fungsinya mirip ‘if‘, tapi ini di css. Jadi sebuah web bisa memiliki tampilan berbeda saat dibuka dengan pc, tablet atau smartphone.
Contoh layout responsive:
fork-cms.com

contoh responsive web design lainnya bisa dilihat disini.

4. Responsive-fluid
Layout responsive-fluid merupakan gabungan antara responsive dengan fluid sehingga lebar layout akan mennyesuaikan resolusi dan akan berganti layout pada resolusi tertentu. Layout ini menggunakan media queries dan satuan percent (%) untuk ukuran.
Contoh layout responsive-fluid:
forefathersgroup.com

contoh responsive web design lainnya bisa dilihat disini.

5. Horizontal Scrolling
Layout horizontal scrolling adalah dengan menata content web kesamping, sehingga untuk melihat content web tersebut menggunakan scroll horizontal.
Contoh layout horizontal scrolling:
deanoakley.com

6. Parallax Scrolling
Layout parallax scrolling menggunakan beberapa layer dan setiap layer memiliki kecepatan perpindahan yang berbeda-beda saat di scroll sehingga menimbulkan efek yang menarik.
Contoh parallax scrolling:
ascensionlatorre.com

contoh parallax scrolling web design lainnya bisa dilihat disini.

CSS position

Atreda Wicaksi — Wed, 11 Apr 2012 01:08:17 +0000

Css position salah satu hal yang perlu dipahami untuk membuat desain web dengan box model. Css position ini akan mengatur bagaimana hubungan antar box.Pada artikel box model kita akan membuat layout seperti gambar berikut:

Membuat box tampil di sebelah kanan atau di kiri biasanya digunakan property float: left / float: right. Namun property float membuat box jadi mengambang sehingga box yang berikutnya akan tertumpuk atau gampangnya tidak sesuai yang kita harapkan. Untuk bisa memperbaiki hal tersebut, maka perlu dipahami css position.

Waktu mau menulis ini, saya browsing-browsing dulu dan menemukan artikel tentang css position yang menurut saya sudah bagus. Daripada saya nulis ulang nanti malah bikin bingung silahkan baca langsung di web ini Learn CSS Position in Ten Step saja… hehe.