Monthly Archives: Juli 2013

Desain Mockup Web #2 (Menerapkan Tutorial Photoshop dari Tutsplus.com)

Bismillahirrahmanirrahim.

Setelah penerapan tutorial pertama kemarin dalam hal website mockup design (yang natif Inkscape), saya beralih total ke tutorial yang sama yang memakai Photoshop. Mengapa saya memilih tutorial berbasis Photoshop? Simpel, karena pasti lebih banyak dan lebih bagus kualitasnya. Tak ayal, banyak desain bagus yang saya dapatkan setelah googling pas beserta tutorialnya. Desain mockup ini saya buat dengan Inkscape (basisnya vektor) untuk menerapkan tutorial Photoshop (basisnya bitmap) dengan alamat http://psd.tutsplus.com/tutorials/interface-tutorials/how-a-simple-layout-can-be-mixed-n-matched-with-patterns-photos-and-backgrounds/. Alhamdulillah, ternyata cukup mudah bahkan mudah sekali. Saya menerapkan pencontekan selama ini sambil mengukur level kesulitannya, dan kebetulan tutorial ini (meski tampaknya panjang), sangat mudah diterapkan di Inkscape. Anda pun bisa menerapkannya untuk mencari nafkah memakai Inkscape.

 

Desain Asli

mockup-asli-tutspluscom-photoshop

 

Desain Saya

resized_resized_mockup-website-keduaku

 

Keterangan Desain

  • Fonta header: Rockwell (gratis)
  • Fonta body: Liberation Sans (tutorial asli memakai Helvetica (berbayar) dan Arial)
  • Memakai drop shadow: tidak
  • Level kesulitan: mudah

Komentar

Tidak saya sangka, ternyata mudah membuat mockup jika ada tutorial. Sebetulnya feeling saya ada pada desktop UI mockup, bukan web. Tetapi melihat betapa bagusnya mockup-mockup yang dibuat pakai Photoshop (saya unduh kemarin malam), saya jadi semangat. Tentu Anda bisa mengunduh SVG seperti biasanya untuk Anda ubah desain saya ini sesuai keperluan. Desain ini masih satu dari sekian desain yang dibuat dalam tutorial aslinya. Sementara, saya sudah puas dengan desain ini. Dan masih sangat banyak dari apa yang saya unduh kemarin, desain bagus yang menunggu untuk diterapkan. Semoga yang saya buat ini bermanfaat untuk kaum muslimin semuanya.

Unduh Desain

SVGhttp://otodidak.freeserver.me/svg/mockup-website-keduaku.svg.zip (1 MB)

Iklan

Desain Mockup Web

Bismillahirrahmanirrahim.

Sebenarnya ini hanya usaha melakukan tutorial dari http://tucsonlabs.com/creating-websites-with-inkscape/. Saya hanya ingin mendesain tampilan web semenjak dulu tetapi tidak bisa-bisa. Akhirnya dengan ini sudah agak lumayan. Hasilnya sebagai berikut.

mockup-website

Keterangan Desain

Fonta header: Harabara
Fonta body: Liberation Sans

Ternyata susah sekali menentukan fonta yang pas untuk body. Walau secara nyata Chromium saya memakai Liberation Sans untuk merender semua web yang saya kunjungi, eh ketika dipakai dalam desain, hasilnya kurang memuaskan. Mungkin font rendering di sisi Inkscape atau Ubuntu saya yang kurang bagus. Keseluruhan, desain ini jauh dari bagus. Ini hanya langkah awal yang harus ada. Dan sebuah kategori baru saya tambahkan hari ini.

 

Unduh

SVG: http://otodidak.freeserver.me/svg/mockup-website-pertamaku.svg