Desain website dengan photoshop · PDF fileDESAIN WEBSITE DENGAN PHOTOSHOP Tutorial...

of 30/30
DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/ Tutorial photoshop, wordpress dan desain | http://psdesain.net/ 1 Mendesain website dengan photoshop Oleh : Jaka Zulham http://psdesain.net/
  • date post

    30-Jan-2018
  • Category

    Documents

  • view

    259
  • download

    13

Embed Size (px)

Transcript of Desain website dengan photoshop · PDF fileDESAIN WEBSITE DENGAN PHOTOSHOP Tutorial...

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    1

    Mendesain website dengan photoshop

    Oleh : Jaka Zulham

    http://psdesain.net/

    http://psdesain.net/

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    2

    Kata pengantar

    Dengan rahmat dan dalam naungan Allah yang maha esa, Alhamulillah saya telah menyiapkan E-

    book (Electronic Book) edisi pertama untuk website saya psdesain.net/.

    Sesuai dengan judul pada E-book ini, pada ebook ini kita akan mencoba mendesain sebuah

    theme atau biasa disebut web desain dengan photoshop, saya akan menjelaskan secara step by step

    dengan lengkap hanya pada ebook ini. Semoga dengan ebook ini, dapat meningkatkan ilmu anda dan

    meningkatkan kualitas anda sebagai seorang DESIGNER .

    Salam sukses.

    Jaka Zulham | http://psdesain.net/

    http://psdesain.net/

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    3

    Tutorial Membuat desain website Dengan photoshop.

    Langkah 1

    Download template 960.gs (http://960.gs) selanjutnya extract di komputer anda, buka template

    photoshop 16 coloumn dengan software photoshop anda.

    Langkah 2

    Setelah terbuka, tampak kanvas kerja seperti gambar berikut

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    4

    Karena sebuah site atau website berbentuk persegi panjang (panjang kebawah) kita akan

    memperpanjangnya, beralih kemenu Image > Canvas size, Selanjutnya atur seperti berikut.

    Hasilnya, (gambar dibawah ini tampak setelah saya zoom out (ctrl + -))

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    5

    Buka kunci untuk grup 16 Col Grid tarik gambar pembantu untuk proses desain website seperti gambar

    dibawah ini. Anda juga bisa menghapus garis-garis grid hijau dengan menekan Ctrl + ; pada keyboard.

    Jangan lupa kunci kembali group 16 Col Grid agar tidak teredit saat proses mendesain web.

    Perlu anda ketahui, grup 16 Col Grid hanya grup pembantu untuk proses mendesain web. Tampak objek

    panjang merah pada grup tersebut, pastikan anda mengkunci grup tersebut agar tidak teredit dan tidak

    terganggu.

    Langkah 3

    Ubah nama group Layer 1 menjadi Header, tempatkan grup tersebut dibawah group 16 Col Grid,

    Kita akan membuat header untuk bagian ini, untuk background warna header buatlah sebuah

    background dengan menggunakan Rectangle tool (U) memenuhi bagian atas lembar kerja. Buatlah

    dengan warna #131313 seperti penampakan dibawah.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    6

    Dengan Rectangle tool, kembali buat sebuah persegi panjang untuk membuat header navigasi,

    perhatikan bagian grid group 16 Col Grid, buatlah sesuai coloum tersebut. Agar mudah dalam proses

    pembuatan anda juga bisa menghilangkan garis merah-merah tersebut dengan mengklik icon mata

    disamping setiap Group/layer pada panel layer

    Buat sebuah layer baru diatas Header 1 dan ubah namanya menjadi Cahaya, klik brush tool (b) dengan

    soft brush buatlah sebuah brush dengan warna putih seolah olah ada sedikit cahaya pada bagian

    header.

    Cara setting brush bisa dengan mengklik kanan pada lembar kerja, selanjutnya pilih brush dengan

    Hardness yang rendah.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    7

    Tambahkan juga teks pada header tersebut, Teks tersebut bisa title atau judul blog atau web. Sebagai

    contoh saya memberi titlenya blog desain saya http://psdesain.net/ atau PSD Desain.net, Juga

    menambah deskripsi dibawah title tersebut.

    http://psdesain.net/

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    8

    Tambahkan layer style pada title PSD Desain tersebut dengan cara klik 2 kali pada layer teks. Selanjutnya

    akan keluar window layer style lalu pilih drop shadow dan setting seperti berikut.

    Tambahkan pula gradient overlay seperti gambar berikut.

    Selanjutnya, tambahkan navigasi pada header tersebut seperti Home, Tentang, Blog dan lain sebagainya.

    Perlu diperhatikan, link yang sedang aktif dengan yang atau belum diklik. Agar lebih user friendly

    website tersebut, pastikan link seperti Halaman utama lebih terang dari link lainnya. Ini

    menginformasikan kapada pengguna bahwa link tersebut dalam keadaan aktif atau pengguna sedang

    berada pada link tersebut.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    9

    Langkah 4

    Ubah warna background menjadi warna #f4f5f7

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    10

    Pastikan anda menavigasi group sebagus mungkin untuk mempermudah desain dan coding nantinya.

    Disini untuk header paling atas, navigasi dan lain-lainnya pada tutorial diatas, untuk bagian paling atas

    saya menggroupnya menjadi group Utama.

    Langkah 5

    Selanjutnya kita akan mencoba membuat bagian untuk slideshownya, pasti anda tau kan dengan

    slideshow? Banyak blog juga website yang memanfaatkan fasilitas jQuery ini untuk membuat slideshow.

    Buat sebuah group Slideshow dibawah group utama, dengan Rectangle tool buatlah sebuah

    background untuk slideshow tersebut dengan warna #dfe0e2.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    11

    Kembali dengan warna #ededed buatlah sebuah rectangle, jangan lupa memanfaatkan fasilitas dari 16

    Col Grid agar desain tersusun rapi dan mudah saat pengkodingan oleh web developers.

    Tambahkan gambar untuk slideshow tersebut, pastikan gambar tersebut berada di group slideshow.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    12

    Dengan Rectangle tool, buat sebuah persegi pada bagian kiri gambar, di tempat tersebut kita akan

    menambahkan sedikit teks untuk mendeskripsikan gambar slideshow tersebut. Ubah opacity yang telah

    dibuat sebesar 25%.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    13

    Dengan type tool, buat sedikit teks untuk mendeskripsikan gambar slideshow tersebut.

    Kembali, pastikan anda memanage sendiri group-group yang diperlukan sesuai selera dan se-enak

    mungkin menurut anda . Anda bebas membuatnya yang penting teratur dan tidak membuat pusing

    jika suatu saat anda ingin mengeditnya lagi atau anda ingin mensharednya ke orang lain.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    14

    Dengan rounded rectangle tool, buat sebuah objek untuk navigasi slideshow tersebut.

    Buat juga objek < dengan pen tool,

    Berikut contoh sementara yang telah kita desain, untuk teks dan sebagainya anda bisa mengubah sesuai

    selera dengan manage group yang sesuai tentunya.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    15

    Anda bisa menggoupnya menjadi Prev atau Next untuk memudahkan, Duplicate kembali group tersebut

    dan buat kembali tombol serupa seperti berikut.

    Selanjutnya, masih pada bagian slideshow kita akan membuat navigasi kecil berupa lingkaran kecil pada

    bagian kanan slideshow. Dengan Ellipse Tool, buatlah sebuah lingkaran kecil.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    16

    Beri layer style stroke seperti berikut.

    Duplicate lingkaran kecil tersebut (Ctrl + J), selanjutnya geser ke kiri atau ke kanan dan ubah warnanya

    menjadi putih. Atur juga ubah warnanya seperti penampakan berikut.

    Seperti slideshow pada umumnya, ini berfungsi untuk navigasi lembar-lembar slideshow.

    Ubah juga Opacity lingkaran-lingkaran tersebut menjadi 80%.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    17

    Sekarang kita akan membuat bayangan untuk slideshow tersebut. Dengan pentool, buatlah segaris

    objek bayangan seperti berikut.

    Beralih ke menu Filter > Blur > Gaussian blur, isi radius sebesar 7 pixel dan akhiri dengan menekan OK

    pada lembar gaussian blur tersebut.

    Posisikan ke layer paling bawah pada bagian header lalu ubah opacitynya menjadi 80%.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://psdesain.net/

    Tutorial photoshop, wordpress dan desain | http://psdesain.net/

    18

    Langkah 6

    Buatlah sebuah group baru, sekarang kita akan mencoba membuat bagian body atau isi website. Dengan

    warna putih buatlah bagian dengan Rectangle tool seperti berikut.

  • DESAIN WEBSITE DENGAN PHOTOSHOP http://ps