Tutorial Membuat Gradien Background

Tutorial membuat gradien background merupakan tutorial yang menarik. Pada tutorial kali ini kita akan belajar membuat gradien background namun bikinan sendiri...

Tanpa panjang dan lebar serta gak pake lama (GPL) ayo kita buat GRADIEN!!!

1. Jalankan program photoshop.
Caranya: Start --> All Program --> Adobe Photoshop

2. Buat Lembar kerja baru
Caranya: tekan [Ctrl] + [N]
Anda bisa membuat pengaturan anda sendiri, tapi
Disini saya atur seperti ini:
Name = Gradien
preset Sazes = 800 x 600
Width = 800
Height = 600
Resolution = 72 pixels/inch
Mode = RGB Color
Contents = Transparent (*recommended)
Tekan [ok]

2. Setelah itu klik Gradient Tool dengan gambar icon pada tool box sebelah kiri

Gradien Tool

3. Pada layar sebelah atas terdapat properties dari gradien


Klik kiri pada bagian yang saya beri lingkakaran sehingga muncul kotak dialog
Gradien Editor

ini adalah pengaturan normal pada komputer saya


4. Sekarang waktunya mengedit gradien yang diinginkan, sebagai contoh saya akan membuat gradien
"merah - hitam - merah - hitam - merah"
Caranya:
Ubah Name = merah - hitam - merah - hitam - merah
Gradien Type = Solid
Smoothness = 100%

Klik tanda lingkaran dengan no. 1
Lalu ke lingkaran no.2 dan pilih warna merah [OK]

Selanjutnya

Sama seperti langkah sebelumnya
namun kali ini pada no. 4 kalian pilih warna hitam [OK]

Selanjutnya

Yup masih sama namun kali ini pada no. 6 pilih warna merah

Selanjutnya

Sama, ubah warna no. 8 menjadi hitam

Selanjutnya

Sama, ubah warna no. 10 menjadi merah

Hasilnya:


Setelah itu klik tombol new pada dialog Gradien Editor tersebut
Dan Jadi deh........
Anda bisa mengembangkannya sendiri sesuai dengan kreatifitas anda


Sedikit tambahan
Coba dengan mode gradian yang anda buat
Ada 5 Macam mode gradien:


a. Linear Gradien
Gradien searah garis lurus
Pada Lembar kerja tahan klik kiri lalu sapukan dari kiri ke kanan, hasilnya:


b. Radial Gradien
Gradien seolah-olah muncul dari pusat suatu lingkaran
hasilnya:


c. Angle Gradien
Gradien dengan sudut tertentu namun tetap berpusat pada inti
Hasilnya:


d. Reflected Gradien
Sama seperti linear namun dengan effek terbalik


e. Diamond Gradien
Gradien dengan effek belah ketupat / diamond
Hasilnya:


Kegunaan:
Dengan menguasai teknik gradien maka akan membuat disain anda semakin atraktif dan nyata

SEMOGA BERMANFAAT

http://www.ilmugrafis.com/photoshop_dasar.php?page=tutorial-membuat-gradien-background

Hubungi Kami

Alamat Kami :

Jl. Tebet Utara IV F/14, Tebet
Jakarta Selatan, 12820
Indonesia

Website : www.dsigntecture.co.nr.

Hp : +62 856 1056 346/ +62 21-9993 9190 (akbar)

Email : dsign.tecture@gmail.com

Follow Us : www.twitter.com/dsigntecture

PORTFOLIO KAMI

Animasi Efek Ledakan (Photoshop/ImageReady)

Tutorial kali ini kita akan membuat animasi efek ledakan di udara. Berikut ini adalah tehnik mudah untuk diterapkan pada photoshop dan juga untuk kemudian dibuatkan animasinya dengan Image Ready. Mari kita mulai..!!!

1. Persiapkan Background
Buat image baru, 400x300 atau sesuai keinginan masing-masing, tapi cobalah dahulu dengan ukuran kecil agar mudah dipergunakan dalam tutorial ini. Sepanjang Anda menggunakan ukuran ini, akan banyak penyelesaian masalah yang mungkin dihadapi. Namun tutorial kali ini tidak memiliki banyak tips atau trik untuk kendala yang dihadapi bila Anda menggunakan ukuran yang lebih besar.

Tekan [D] pada keyboard untuk menukar posisi warna putih menjadi foreground dan hitam menjadi warna background.

Kini klik Paint Bucket tool dari toolbar and isi background dengan warna hitam, lalu klik pada Tab Layer dan buatlah layer baru

2. Rubah warna Foreground menjadi merah Klik warna foreground dan pilih pada pojok warna merah (A), disini saya buat contoh dengan FF0000(B).

3. Pilih ukuran brush
Select the proper brush
Pada toolbar klik tool brush. Pilih diameter Softrounds 100px , ini akan menimbulkan efek lembut pada saat melakukan brush. Diameter brush tergantung pada besar kecilnya ukuran image yang Anda buat di awal.

4. Gambar bentuk dasar
Sedikitnya kita gunakan 3 warna : merah, kuning dan putih.

Pertama kita mulai dengan warna merah, buatlah gambar bentuk bebas, pastikan gambar yang Anda buat terlihat acak, jadi jangan buat bentuk sebuah lingkaran atau kotak. Juga jangan nampak seperti gambar dengan outline, dan buatlah sisi dalam bentuk tadi menjadi lebih gelap. (Anda bisa saja bereksperimen dengan bentuk outline, namun kali ini hal itu kita lewati dahulu).
Setelah selesai, kita pilih warna kuning, saya gunakan nilai #FFFC00.

Buat bentuk baru dengan warna kuning tersebut berada di sisi dalam bentuk merah, usahakan jangan terlalu dekat dengan garis pinggir. Pertimbangkan pula untuk menjadikan 2 atau lebih bentuk terpisah dari bentuk kuning tadi selama masih dalam area merah. Jika ukuran brush terlalu besar, rubah diameternya ke ukuran lebih kecil, misalnya dengan memilih [soft round 45 pixels].

Terakhir rubah foreground dengan warna putih (#FFFFFF). Kali ini warna putih harus berada di dalam area kuning, seperti halnya tadi, rubahlah ukuran brush menjadi lebih kecil, misal dengan [soft round 27 pixels].


Bila Anda lakukan sesuai petunjuk, maka hasilnya akan tampak seperti ini :

5. Penyatuan warna
Klik menu Filter/Blur/Gaussian Blur... ketik radius 40 pixels (besarnya radius tergantung dari besar image yang Anda buat di awal) dan klik OK.

Pada menu layer klik [Create new fill or adjustment layer] lalu pilih Hue/Saturation... dan klik OK.

Kini kita memiliki sebuah Hue & Saturation Adjustment Layer dan akan kita rubah menjadi potongan layer dengan bentuk blur yang berada di atas semua layer dengan cara klik [layer] pada menu, pilih [Group with previous] atau langsung saja ketik Ctrl-G

6. Tambahkan layer berawan
Beralihlah ke tab layers dan klik ikon Create a New Layer untuk menambah layer baru.
Langkah pertama, kita atur kembali warna pada foreground dan background; tekan D pada keyboard, ini akan membuat foreground menjadi hitam dan background menjadi putih.

Kemudian isi layer dengan warna hitam, gunakan Paint Bucket tool atau tekan bersamaan Alt+Backspace.
Pada menu bar, klik select Filter/Render/Clouds.

Hasilnya adalah tampilan acak yang bagus, jika merasa kurang lakukan lagi proses Filter/Render/Clouds atau tekan Ctrl+F sampai Anda temukan hasil yang sesuai..

Atur blending mode pada layer ini menjadi Color Dodge

7. Tambahkan levels adjustment layer
Klik ikon Create an Adjustment Layer pada bar layer kemudian pilih Levels... lalu klik OK.

Kini kita mempunyai sebuah Levels Adjustment Layer dan seperti pada langkah 5, kita akan mengubahnya menjadi Clipping Layer, dan kali ini berada di atas layer Clouds, dengan cara menekan Ctrl + G. Dengan melakukan clipping Layer, maka dapat dipastikan bahwa adjustment hanya berefek pada layer yang kita pilih (levels 1).

8. Pilih Brush yang tepat
Kini buka Levels Adjustment Layer dengan mengklik dua kali ikonnya pada palette layer.

Geser slider abu-abu /tengah, Anda bisa menggesernya ke kiri atau kanan tergantung rencana pembuatan.


Hasil akhir
Ini adalah hasil akhir dari yang kita kerjakan, mungkin agak berbeda karena seperti saya katakan di awal bahwa hasilnya tergantung eksperimen atau percobaan yang Anda buat.

9. Hue & Saturation adjustment layer
Kini buka Hue & Saturation Adjustment Layer dengan mengklik dua kali ikonnya pada palette layer.
Anda dapat menggeser slider Hue untuk merubah warna atau menggeser slider Saturation untuk merubah saturasinya.

10. Animasi
Ada banyak hal dalam tutorial ini yang membuat lebih mudah untuk dijadikan animasi, hal ini antara lain dapat dibuat dengan :

- Ctrl+F merender ulang efek awan/clouds
- Adjustment layer tiap perubahan hue atau saturation
- Adjustment layer tiap perubahan level
Sebab kemudahan ini dapat kita buat menggunakan program ImageReady yang telah disertakan dalam Photoshop.

 

http://mugi-desain.blogspot.com/2007/03/animasi-ledakan-photoshop-imageready.html

Tips dan Trik Desain Web Profesional

Website yang bagus adalah website yang banyak pengunjungnya. Agar banyak pengunjungnya, selain promosi yang bagus, web Anda juga harus disenangi oleh pengunjung. Salah satu faktor yang menjadikan
pengunjung senang pada website Anda adalah desain yang menawan dan memiliki nafigasi yang mudah. Berikut ini Anda akan mengetahui apa saja yang dibutuhkan untuk mendesain suatu website profesional.
1. APA YANG INGIN DITONJOLKAN DALAM SUATU WEBSITE

Banyak orang yang ingin menawarkan semua produk/infonya dalam suatu website. Tetapi hal ini akan membuat pengunjung bingung dan berpikir. Kebanyakan orang tidak suka berpikir. Seperti mengunjungi suatu restoran pertama kali, kita hanya ingin tahu apa makanan dan minuman yang paling enak dan terbaik di sini. Dan kemudian kita akan pesan itu.

Oleh karena itu, bila Anda mempunyai ratusan bahkan jutaan info/produk. Pilih satu atau beberapa info/produk saja yang ingin ditonjolkan dalam suatu website. Sehingga pengunjung tidak bingung dan dapat memilih dengan cepat apa yang ditawarkan.

Contohnya agusjafar.com yang mempunyai begitu banyak konten informasi mulai dari Teknologi hingga Tips. Tetapi yang difokuskan hanya satu, yaitu posting terkini.

Kalau Anda sudah punya website, lihat lagi apakah Anda menawarkan semua informasi pada saat pengunjung masuk ke halaman depan website Anda.


2. APA YANG INGIN DITAMPILKAN DALAM SUATU WEBSITE

Setelah Anda mengetahui apa yang ingin ditonjolkan, tentukan apa saja yang ingin ditampilkan dalam suatu website. Dengan begitu Anda bisa membuat sitemap, mulai membuat layout dan memikirkan seperti apa disainnya. Sampai pada tahap ini, buat klasifikasi yang dapat menyederhanakan konten di website sehingga pengunjung dapat dengan mudah menemukan apapun yang ingin dicari di website Anda.

3. CARI DAN TEMUKAN WEBSITE ACUAN

Cari beberapa website acuan sehingga Anda tidak memulai disain dari awal yang membutuhkan waktu lama. Lihat bagaimana pewarnaannya, navigasinya, kontennya dan apakah di mesin pencari mudah ditemukan. Kadang kita suka dengan navigasi di website acuan A dan disain dari website acuan B. Ini sering sekali terjadi. Tetapi sebagai seorang web designer, Anda dapat mengatasi hal tersebut sehingga website Anda akan menjadi unik walau mengambil ide dan inspirasi dari beberapa website tersebut. Sehingga website Anda mempunyai kualitas yang sama atau bahkan lebih dari website yang ada sebelumnya.

4. DESAIN ADALAH HARMONISASI ANTAR ELEMEN


Harmonisasi antar elemen dalam suatu website membentuk suatu keindahan. Elemen-elemen yang harus Anda ketahui adalah tulisan (font), warna (color), gambar (image/photo), dan tata letak (layout). Bagaimana memanipulasi elemen (tulisan, warna, gambar) tersebut dan merangkainya (tata letak) dalam suatu keindahan adalah pekerjaan seorang web designer.

Agar terjadi keharmonisan disain, untuk pemula jangan terlalu banyak menggunakan jenis tulisan atau warna. Pilih maksimal dua jenis tulisan atau warna sehingga disain web tidak terlihat ramai dan rumit, memusingkan.

Anda bisa menggunakan Adobe Photoshop untuk mendesain sebuah website.

Demikianlah tips dan trik mendesain suatu website. Tetapi ini baru langkah awal, langkah selanjutnya adalah membuat website tersebut dapat berinteraksi, dapat diotomatisasi agar bisa berjalan sendiri saat kita sedang tidur, melakukan search engine optimitation sehingga dikenal oleh mesin pencari dan mendatangkan banyak pengunjung, melakukan berbagai promosi dan membuat sales copy sehingga pengunjung yang datang dapat langsung membeli apapun yang Anda tawarkan di website Anda jika website tersebut adalah sebuah web e-commerce.

Nantikan tips dan trik berikutnya :-)

Desain Web dengan Bandwidth Friendly

Hukum Moore mengatakan, teknologi komputer berkembang 2 kali lebih cepat dan akan berkurang setengah harga setiap 18 bulan. Namun Hukum tersebut tidak berlaku pada kecepatan koneksi. Makin banyak komputer yang dipakai, juga banyak bandwidth yang terpakai.

Batasan melahirkan kreativitas. Banyak desainer yang terhambat oleh batasan bandwidth namun itu semua malah membuat mereka berkarya lebih baik. Anda juga bisa melakukan banyak hal dengan sedikit bytes. Anda bakal kaget dengan apa yang bisa dilakukan hanya dengan table-table berwarna.

Tips dan trik Desain Web dengan Bandwidth Friendly :

1. Buat sesederhana mungkin. Desain yang baik terletak pada kesederhanaannya. Define the essence.
2. Aesthetic Consideration paling penting adalah masalah kecepatan transmisi / Bandwidth. Bila terlalu sulit untuk didownload. Kembali ke tahap desain.
3. Anda hanya memiliki 9 detik untuk meyakinkan user untuk tidak menggunakan tombol Back. 3 detik. Jadi, tampilkan sesuatu di monitor sebelum 9 detik tersebut. Dan buat semenarik mungkin
4. Jangan gunakan font yang menurut anda bagus, tapi tidak banyak dipakai di komputer lain.
5. Coba maksimalkan desain anda dengan “HTML” atau “CSS”, sebelummenggunakan “GIF”. Artinya, gunakan image sebagai usaha terakhirmengatasi;
6. Problem, doktrin utama desain apapun, tidak hanya desain web, adalah tentang Problem solving : Jabarkan problemnya dan anda sudah mengerjakan setengah dari tugas anda.

http://otakkacau.net/2011/08/06/desain-web-dengan-bandwidth-friendly/