Pengenalan tentang WordPress & XAMPP

 WordPress adalah aplikasi sederhana untuk membuat sebuah website

 Dalam satu aplikasi kita dapat membuat database, mengatur layout website dan mempublikasikan
website secara live
 WordPress dapat membuat banyak jenis website seperti blog, portofolio, galeri pribadi, online
shop dan lain-lain
 Satu hal yang membuat WordPress spesial adalah WordPress dapat didownload secara gratis,
digunakan untuk membuat website secara gratis dan ketika kita ingin mempublikasikan website
juga bisa secara gratis
 Ada dua jenis WordPress berdasarkan domainnya yaitu wordpress.org dan wordpress.com
 Perbedaan dua jenis WordPress tersebut ada pada fitur yang disediakan, wordpress.org
menyediakan fitur secara gratis sedangkan wordpress.com tidak semua tersedia secara gratis
 Aplikasi lain yang diperlukan dalam membuat website menggunakan wordpress.org adalah XAMPP
 XAMPP merupakan aplikasi yang berfungsi untuk membuat server dan database secara offline.
XAMPP dapat dipasang pada banyak sistem operasi baik windows, linux maupun macOS.

Cara Download & Install WordPress & XAMPP

1. Tahap pertama yang harus dilakukan dalam membuat website menggunakan wordpress adalah
memasang aplikasi XAMPP di komputer/laptop
2. Aplikasi XAMPP bisa didapatkan melalui apachefriends.org
3. Setelah XAMPP terpasang maka komputer/laptop akan menjadi server offline untuk menyimpan
seluruh data yang ada di website
4. Kemudian download aplikasi WordPress melalui wordpress.org
5. Aktifkan XAMPP dan pasang aplikasi WordPress di komputer/laptop
6. Komputer/laptop siap digunakan untuk membuat website menggunakan WordPress

Membuat Website Menggunakan WordPress

1. WordPress Dashboard
 Dashboard WordPress berfungsi untuk mengatur tampilan website
 Dashboard WordPress terdiri dari tiga bagian yaitu toolbar, admin menu dan admin menu area
 Tool yang ada pada toolbar antara lain:
 Logo WordPress, berisi informasi seputar WordPress dan link lainnya
 Site Name, berfungsi untuk melihat tampilan website yang sama seperti user lihat
nantinya atau melihat tampilan front-end website
 Comments Moderation, berfungsi untuk memfilter komen yang akan muncul di website
 New, memberikan quick access untuk membuat post, media, page atau user
 Howdy Nama User, berfungsi untuk customize profile dan log out dari WordPress
 Admin menu merupakan sekumpulan menu yang berfungsi untuk mengatur tampilan website,
sedangkan admin menu area adalah isi dari admin menu. Tool yang ada pada admin antara
lain:

1
 Dashboard, berfungsi untuk overview website secara keseluruhan dan untuk mengecek
update dari WordPress. Dashboard memiliki sub menu home dan updates.

 Post, berfungsi untuk membuat tulisan, foto dan video yang akan dipublikasikan. Post
memiliki sub menu all posts, add new, categories dan tags.

 Media, berfungsi sebagai galeri website, media memiliki dua sub menu yaitu library dan
add new.

 Pages, digunakan untuk membuat halaman yang sifatnya statis, page memiliki dua sub
menu yaitu all pages dan add new.

 Comments, berfungsi untuk mengatur komen yang diberikan user di salah satu postingan
website.

 Appearance, berfungsi mengatur tampilan website. Appearance memiliki 5 sub menu yaitu
themes, customize, widgets, menu dan theme editor.

2
  Plugins adalah fasilitas tambahan yang dirancang untuk melakukan fungsi tertentu.

 User berfungsi untuk menampilkan daftar orang yang mengelola website. Users juga
berfungsi untuk menambahkan atau mengurangi pengelola website. Users memiliki 3 sub
menu yaitu all users, add new dan your profile.

 Tools berfungsi untuk mengelola konten maupun website, melalui Tool kita bisa import
dan export data mentah website. Tool memiliki beberapa sub menu antara lain available
tools, import, export, site health, export personal data dan erase personal data

 Settings, berfungsi untuk mengatur website anda melalui sub menu yang tersedia. Sub
menu settings antara lain general, writing, reading, discussion, permalink dan privacy.

2. Menyesuaikan Theme
 Pengaturan tema dapat dilakukan melalui tool Themes
 Theme memberikan kebebasan kepada admin website untuk memilih dan mengatur isi dari
tema. Pengaturan isi tema dapat dilakukan menggunakan Customize Theme.
 Menu yang tersedia di Customize Theme antara lain:
 Site Identity, berfungsi untuk menambahkan logo website, mengganti judul website,
memasukkan tagline dan menentukan icon website.
 Colors, berfungsi untuk mengubah warna background, pada tema lain colors juga bisa
merubah warna dari header dan footer website.
 Header Media, berfungsi mengubah tampilan header dengan menampilkan foto atau
video.
 Menus, terdapat dua pilihan dalam menus yaitu social links menu yang berfungsi agar user
dapat berkomunikasi dengan admin website melalui social media lain. Lalu ada top menu

3
 yang berfungsi untuk mengubah menu apa saja yang ingin ditampilkan pada bagian atas
website.
 Widgets, berfungsi untuk menambahkan fungsi lainnya di dalam website.
 Homepage Setting, berfungsi untuk mengatur apa yang akan muncul pada bagian beranda
atau home website.
 Theme Options, theme options yang ada di WordPress disesuaikan oleh tema itu sendiri,
jadi theme options akan berbeda-beda di setiap tema.
 Additional CSS, berfungsi untuk mengatur tampilan tema secara manual.

3. Membuat Page & Post

 Page sering disebut dengan static page. Page disebut seperti itu karena page bersifat statis atau
diam. Statis diartikan bahwa page adalah halaman yang jarang diubah, tidak dikategorikan dan
tidak bisa diberikan tags.
 Page dapat dibuat menggunakan dua cara, pertama melalui tombol New di Toolbar Dashboard,
kedua melalui tombol Page di Menu Bar Dashboard
 Post adalah foto, video, artikel atau apapun yang dipublikasikan dalam website. Post bersifat
dinamis atau dapat diubah sewaktu-waktu, tidak dapat dijadikan homepage, dan dapat
diberikan kategori dan tags.
 Sama seperti page, post dapat dibuat menggunakan dua cara, pertama melalui tombol New di
Toolbar Dashboard, kedua melalui tombol Post di Menu Bar Dashboard

4. Memilih Widgets & Plugins

 Widget adalah tool di dalam WordPress yang dapat menambahkan fitur berguna ke dalam
website, secara singkat widget dapat menambahkan kalender, galeri, quote, kolom pencarian
dan lain-lain.
 Widget dapat ditempatkan pada sidebar, homepage dan dimanapun yang mendukung untuk
widget bisa muncul
 Cara mengatur widget dapat dilakukan dengan klik tombol Widget pada Menu Bar Dashboard
 Plugin mirip dengan widget, berfungsi untuk menambahkan fitur berguna ke dalam website
 Cara mengatur plugin dapat dilakukan dengan klik tombol Plugin pada Menu Bar Dashboard

5. Sentuhan Akhir pada Website

Finishing bisa disebut sebagai tahap akhir dari pembuatan website yang berfungsi untuk mengatur
letak, isi produk, journey user dan lain-lain. Inti dari tahap finishing adalah bagaimana membuat
sebuah website yang menarik dan sesuai dengan kebutuhan user

Mempublikasikan Website
1. Hosting dan Domain
Domain adalah alamat website, contohnya vegancake25.com atau veganria.co.id dan lain-
lain. .com, .co.id, .org, .me, .xyz dan dot lainnya disebut dengan ekstensi domain. Sedangkan hosting
adalah tempat penyimpanan data-data yang dibentuk sedemikian rupa, sehingga bisa disebut
menjadi website. Jika dianalogikan, hosting adalah rumah kita dan domain adalah alamat agar
orang-orang dapat mengunjungi rumah kita.

2. Install WordPress ke Website Live

4
 Setelah memiliki hosting dan domain, kita perlu memasukan data WordPress ke dalam hosting,
supaya ketika orang lain mengetik domain kita di browser, yang muncul adalah tampilan website
menggunakan WordPress yang sudah dibuat secara offline sebelumnya.

3. WooCommerce
WooCommerce adalah plugin yang dapat membuat e-commerce atau toko online menggunakan
WordPress. WooCommerce memiliki fungsi yang bervariasi seperti metode pembayaran, pengiriman,
variabel produk, dll.

Pengenalan Adobe Photoshop

Adobe Photoshop merupakan perangkat lunak editor citra buatan Adobe System yang
dikhususkan untuk pengeditan foto, gambar, dan pembuatan efek. Perangkat lunak ini banyak
digunakan oleh fotografer digital dan perusahaan iklan, sehingga dianggap sebagai pemimpin pasar
atau market leader untuk perangkat lunak pengolah gambar atau foto.

Photoshop sendiri merupakan salah satu software paling penting dalam membuat desain
karena memiliki tools yang difokuskan untuk mengedit foto, yang memiliki format raster atau bitmap-
based. Fungsi utama dari photoshop adalah untuk mengedit gambar, dari warna, komposisi, hingga
rekayasa digital. Serta dapat pula digunakan untuk menggambar, atau sering disebut dengan digital
imaging.

1. Menu Bar

Dalam Photoshop, terdapat menu utama pada bagian atas working space, menu-menu ini disebut
sebagai Top Menu Bar yang berisi File, Edit, Image, Layer, Type, Select, Filter, 3D, View, dan Window.

2. Toolbar
Selain menu bar, ada juga toolbar yang juga sangat penting untuk dipelajari karena pengoperasian
utama Photoshop juga terletak pada tools-tools yang ada pada toolbar, yang berisi Move Tool, Crop
Tool, Brush Tool, History Brush Tool, Eraser Tool, Gradient Tool & Paint Bucket Tool, Hand Tool, Zoom
Tool, Color Tool. Pendalaman pada color tool tidak hanya berada pada toolbar. Pada sisi kanan working
space, terdapat Swatches Panel, yang fungsinya tidak jauh berbeda dengan color tool, hanya saja
memiliki beberapa pengaturan di dalamnya.

3. Transform
Fitur transform pada Photoshop kurang lebih sama dengan aplikasi lainnya, karena memang diadaptasi
dari aplikasi lainnya dan memang sudah seperti bahasa internasional. Fungsi dari fitur ini adalah untuk
melakukan rotasi, scale, atau mengubah perspektif dari sebuah gambar berdasarkan titik sudutnya.

Teknik-Teknik Dasar
1. Color Adjustment
Pada penyesuaian warna, banyak sekali hal yang bisa dilakukan dalam penyuntingan aset gambar.
Color Adjustment ini berfungsi jika user ingin menambah sentuhan-sentuhan tertentu pada aset
gambar dengan berbagai pengaturan, baik warna, maupun pencahayaan. Di adjustment ini sendiri ada

5
banyak sekali pengaturan warna, seperti Brightness/contrast, Levels, Curves, Exposures, Vibrance,
Hue/Saturation, Color Balance, Black & White, Photo Filter, dan Channel Mixer.
2. Text and Type Principals
Dalam mengerjakan pekerjaan desain, bukan berarti hanya terpaku pada pengeditan gambar.
Penyisipan teks juga diperlukan. Gunanya untuk mempercantik atau memperjelas sebuah informasi
pada suatu gambar. Adobe Photoshop menyediakan fitur untuk menyisipkan teks pada lembar
pekerjaan. Fitur ini bernama text tool.

Text tool ini pun memiliki submenu yang di dalamnya berfungsi untuk mengatur seberapa besar, kecil,
atau bagaimana font yang ingin digunakan pada layer teks.

3. Shapes
Adobe Photoshop menyediakan berbagai bentuk yang bertujuan untuk mempercantik desain yang
sedang dikerjakan. Fitur-fitur shapes pada Photoshop antara lain seperti Rectangle tool, Ellipse tool,
Polygon tool, Line tool, dan Custom Shape tool.

Berbagai shapes yang disediakan oleh Photoshop memandu pengguna untuk membuat berbagai
bentuk sesuai dengan nama tool di atas.

4. Applying Effects
Kemampuan dalam memberikan efek pada aset gambar atau teks adalah salah satu fungsi utama
Adobe Photoshop. Pada menu Effect, Photoshop menyediakan berbagai pilihan bagi pengguna agar
bisa menggunakannya sesuai dengan kebutuhan. Efek-efek yang tersedia antara lain Bevel & Emboss,
Stroke, Inner Shadow, Inner Glow, Satin, Color Overlay, Pattern Overlay, Outer Glow, dan Drop Shadow.
Dalam penggunaan efek, tidak perlu semua efek diaplikasikan pada objek. Cukup gunakan satu atau
dua efek agar hasil terlihat natural dan tidak berlebihan.

Teknik-Teknik Retouching
1. Making Selection
Teknik dalam menyeleksi gambar juga diperlukan dalam dasar penggunaan Adobe Photoshop. Dengan
mampu menyeleksi gambar, pengguna akan terbantu dengan pemilihan objek-objek untuk kemudian
diutak-atik sesuai dengan keinginan. Photoshop menyediakan beberapa tool untuk menyeleksi gambar.
Seperti Marquee Tool, Lasso Tool, Quick Selection Tool, dan Pen Tool.
2. Image Retouch
Dalam Photoshop, dikenal juga teknik memanipulasi gambar. Ada beberapa cara, salah satunya adalah
dengan menghapus objek-objek minor yang tidak diinginkan. Adobe Photoshop menyediakan beberapa
tool yang dapat membantu pengguna dalam menghilangkan objek minor pada aset gambar. Tool-tool
tersebut antara lain Spot Healing Brush, Healing Brush Tool, Patch Tool, dan Clone Stamp.
Perbedaan antara Healing Brush dengan Clone Stamp adalah, jika dengan healing brush hanya akan
mengambil texture dari titik yang kita mau sementara warnanya diambil dari sampling pixel di sekitar
titik tersebut. Sedangkan clone stamp akan men-copy apapun yang ada dan ingin kita copy apa adanya.

6
3. Masking
Selain memanipulasi gambar dengan image retouch, ada juga teknik memanipulasi bernama maskingi.
Teknik masking adalah teknik dimana pengguna dapat mengubah kenampakan pada objek utama,
namun tidak menghilangkan objek utamanya atau dalam kata lain, objek utama masih tetap utuh.
Tidak ada rumus mutlak dalam menggunakan teknik ini. Teknik ini hanya berbicara bagaimana cara
placing aset lain, lalu menghapusnya, namun tidak dengan eraser tool, dan memainkan juga
mengkombinasikan tool lain sehingga menjadi objek baru sesuai keinginan.
4. Filter Adjustment
Pada filter adjustment, fitur ini memberikan aset gambar menjadi lebih detail dan sempurna lagi. Tidak
semua filter yang ada pada fitur ini harus digunakan, karena justru akan membuat aset gambar menjadi
terlihat aneh. Cukup gunakan satu atau dua filter pada beberapa objek yang diinginkan pada aset
gambar. Gaussian Blur adalah salah satu filter yang paling sering digunakan oleh desainer digital. Filter
ini banyak digunakan karena hasilnya yang terlihat lebih natural.

Menyimpan dan Mengonversi Hasil Karya

Proses penyimpanan file dalam mendesain adalah salah satu aspek terpenting. Jika melewati
tahapan ini, maka pekerjaan yang telah selesai tidak akan berarti. Cara untuk menyimpan file sangat
mudah. Untuk menyimpan, bisa dengan menggunakan cara: ke menu file kemudian save. Atau bisa
juga dengan sesimpel tekan command+s (pada mac) atau CTRL+s (pada windows). Kemudian pada saat
melakukan penyimpanan, pastikan nama file yang tepat dan memiliki struktur saat penyimpanan, agar
mudah ditemukan nantinya. Dengan cara sederhana ini, desain yang telah dikerjakan akan tersimpan
dengan aman.
Selain save, ada juga yang dikenal dengan export. Export ini berguna untuk mengekspor hasil desain
yang telah selesai menjadi format yang diinginkan, seperti .jpg, .png, dan lain lain. Cara untuk
mengekspor sangat sederhana: pada menu file, lalu pilih export, dan pilih export as. Maka, selesai
sudah pekerjaan dalam mendesain objek atau gambar.

Tahapan Konversi PSD ke Kode HTML

7
8
9