YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN

UNIVERSITAS SIBER ASIA

Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

LEMBAR JAWABAN
TUGAS 2
SEMESTER GENAP TAHUN AJARAN 2021/2022

Mata Kuliah : Interaksi Manusia Komputer

Kelas : IT-402
Prodi : PJJ Informatika
Nama Mahasiswa : Hendro Gunawan
NIM : 200401072103
Dosen : Novi Dian Nathasia S.Kom., MMSI

Tugas 2 Interaksi Manusia dan Komputer

Assalamualaikum wr wb, Salam sejahtera untuk kita semua
Bapak Ibu rekan rekan mahasiswa, pada sesi ke 13 ini saya akan memberi tugas 2 yaitu mempelajari salah satu dari
beberapa software bantu untuk membuat user interface, adapun beberapa pilihan softwarenya antara lain:
1. Figma
2. Adobe XD
3. Balsamiq
4. Sketch App
5. Adobe Photoshop
6. dll
setelah dipelajari silahkan buat tutorial singkat bagaimana menggunakan software tersebut untuk membuat User
Interface, tutorial bisa di buat dalam bentuk ppt atau pdf, kemudian buatlah presentasi singkat yang menjelaskan
tentang tutorial tersebut, tugas dapat di kerjakan secara berkelompok atau mandiri, terimkasih.
Wassalam
NoviDN,SKom, MMSI

Tutorial Dasar Adobe Photoshop untuk Pemula

Gambar 1. Tampilan utama pada photoshop.

1
 YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN
UNIVERSITAS SIBER ASIA
Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

Walaupun Anda bukan seorang desainer grafis profesional. Program ajaib ini sangat bermanfaat untuk
mengembangkan pengetahuan baik bisnis ataupun untuk sekedar hobi editing. Meskipun terdengar sulit,
sebenarnya belajar photoshop sangatlah mudah bagi siapapun yang ingin mencobanya.
Belajar photoshop akan sangat membantu Anda terutama dalam membangun bisnis dropshipping. Anda
dapat menggunakannya untuk membuat gambar seperti mockup baju untuk website Anda, mengedit dan
meningkatkan nilai visual suatu produk, atau membuat iklan seperti iklan banner dan grafik penjualan.
Jika Anda tidak memiliki pengalaman menggunakan software desain grafis, jangan khawatir. Tutorial
ini akan menunjukkan kepada Anda dasar-dasar memulai dan mempelajari cara mengedit foto dengan
photoshop. Setelah Anda mempelajari dasar-dasarnya, Anda dapat beralih ke tutorial photoshop tingkat lanjut.

Apa itu Photoshop ?

Sebagai pemula di photoshop, penting untuk memahami anatomi user interface photoshop sebelum Anda
mulai. Saat Anda membuka programnya, Anda akan melihat menu utama dari bagian atas, seperti program
ini. Di sepanjang sisi kiri, Anda akan melihat sidebar yang menunjukkan tools utama. Di sisi kanan, Anda
akan melihat tools warna (color) dan layer.

Gambar 2. Bentuk tampilan antarmuka photoshop.

Cara Membuka File Photoshop

Untuk membuat dokumen baru atau membuka file di komputer Anda, klik “File” di menu kiri atas. Pilih
“New” untuk membuat dokumen baru. Atau klik “Open” untuk membuka komputer Anda dan membuka file
yang ada.
Saat Anda membuat dokumen baru, kotak dialog akan muncul. Pada kotak dialog tersebut, Anda dapat
memberi nama file dan memilih ukuran dan resolusi yang Anda inginkan. Hal ini berguna apabila website
Anda memerlukan ukuran file tertentu untuk agar foto tampil optimal dan tidak memberatkan performa
website.

2
 YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN
UNIVERSITAS SIBER ASIA
Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

Contoh dimensi foto berikut adalah lebar (width) 1920 pixel dan tinggi (height) 1080 pixel. Untuk
resolusi 72 pixels/inch adalah ukuran optional intuk gambar website. Tetapi jika Anda igin mencetak foto
berkualitas tinggi, kami sarankan menggunakan 300 piksel/inci.

Gambar 3. Cara membuat dokumen baru pada photoshop.

Klik “Create” jika Anda selesai.

Ingatlah bahwa photoshop akan me “lock” atau mengunci dokumen baru yang telah Anda buat, yang mana
Anda tidak dapat mengedit langsung ke layernya. Untuk membukanya, cukup klik ikon kunci pada nama layer
dan lock tersebut akan hilang.

Toolbox Photoshop

Tolbox pada sidebar merupakan senjata Anda dalam mengedit foto atau jenis file lain. Tool yang ada pada
sidebar tersebut disusun dalam kelompok berdasarkan fungsinya masing-masing:
▪ Bagian pertama menampilkan Selection, Cropping, dan Slicing Tools. Gunakan tool tersebut untuk
memilih bagian dari gambar Anda yang ingin Anda edit atau tingkatkan, atau potong bagian yang
Anda inginkan.
▪ Bagian kedua menampilkan Retouch and Paint. Gunakan ini untuk menghilangkan bintik-bintik yang
tidak diinginkan pada suatu foto atau produk, menghapus bagian-bagian tertentu, memberi warna, atau
memberikan efek seperti Blurring atau Sharpening.
▪ Bagian ketiga adalah Tools Drawing dan Typing. Gunakan ini untuk menulis teks di atas gambar Anda
atau menyisipkan gambar ke foto dengan menggunakan Tool Pen.
▪ Bagian keempat yaitu menampilkan Annotation /Measurements. Tool ini berguna untuk memegang
gambar, memutar posisi gambar, memperbesar dan memperkecil gambar serta mengedit toolbar.
▪ Bagian ke lima yakni Default Foreground and Background Color. Tool ini berguna untuk memberi
warna pada latar depan dan belakang gambar.
▪ Bagian keenam adalah Edit in Quick Mask Mode, dan Change Screen Mode. Gunakan tool ini untuk
mengedit gambar dengan pilihan standar screen mode, atau full screen mode.

3
 YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN
UNIVERSITAS SIBER ASIA
Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

Setiap kali Anda mengklik salah satu sidebar di sisi kiri, Anda akan melihat opsi tool muncul di bawah
menu utama atas.

Toolbox Fungsi

Selection, Corp & Slice Tools

Move tool (V), Rectangular Marquee tool (M), Lasso tool (L), Quick Selection tool
(W), Corp tool (C), Eyedropper tool (I).

Retouch & Paint Tools

Spot Healing Brush tool (J), Brush tool (B), Clone Stamp tool (S), History Brush tool (Y),
Eraser tool (E), Gradien tool (G), Blur tool, Dodge tool (O).

Drawing & Type Tools

Pen tool (P), Horozontal Type tool (T), Path Selection tool (A), Rectangle tool (U).

Annotation/Measurements
Hand tool (H), Rotate View Tool (R), Zoom tool (Z), Edit toolbar.

Default Foreground and Background Color (D)

Set Foreground Color, Set Background Color

Edit in Quickmask Mode (Q), Change Screen Mode (F).

Gambar 4. Fungsi toolbox pada photoshop.

Cara Menggunakan Layer di Photoshop

Layer adalah fitur penting untuk dipahami ketika Anda belajar cara menggunakan photoshop, bahkan
untuk tutorial photoshop yang paling dasar. Memiliki pengetahuan dasar tentang fitur ini dapat membantu
anda dalam menguasai software nya.
Anda bisa membayangkan layer layaknya lembaran kaca yang ditumpuk satu sama lain. Saat Anda
menggunakan banyak layer, lebih mudah untuk mengedit satu bagian dari gambar Anda tanpa mengacaukan
bagian yang lainnya. Anda dapat dengan mudah menambah atau menghapus layer, serta meng “hide” atau
meminimize mereka dengan mengklik ikon bola mata di sebelah kiri setiap nama layer.

Gambar 5. Cara menggunakan layer pada photoshop.

4
 YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN
UNIVERSITAS SIBER ASIA
Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

Pada contoh di atas, Anda dapat melihat adanya tiga jenis layers: satu untuk teks nama latin di bagian bawah,
satu untuk teks nama dalam bahasa Indonesia di bagian atas, dan satunya lagi untuk gambar background.
Kami sangat menyaarankan Anda memberi nama layer yang Anda buat agar nantinya tidak bingung. Cukup
klik dua kali layers yang Anda inginkan lalu sisipkan nama yang Anda mau.

Cara Menggunakan Pen Tool di Photoshop

Pen tool memungkinkan Anda menggambar bentuk yang Anda sendiri inginkan. Pen tool memiliki
empat pilihan yang berbeda yaitu:

1. Standard Pen: untuk menggambar kurva dan segmen lurus.

2. Curvatur Pen: untuk menggambar segmen lurus dan kurva secara intuitif.

3. Freeform Pen: untuk menggambar secara bebas, seperti Anda menggunakan pena dan kertas.

4. Magnetic Pen: untuk mengambar jalur yang menjepit ke tepi-tepi tertentu yang ditentukan, agar lebih
akurat.

Misalnya, Anda dapat menggambar bintang dengan mengklik bagian-bagian di mana Anda ingin sudut
bintang berada. Untuk menutup bintang, klik anchor point pertama yang Anda gambar.

Gambar 6. Cara menggunakan pen tool di photoshop.

Cara Menggambar Bentuk Curve:

Gambar 7. Cara menggambar curve di photoshop.

5
 YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN
UNIVERSITAS SIBER ASIA
Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

Cara Menggunakan Type Tool di Photoshop

Type tool adalah tool untuk menyisipkan kata-kata pada gambar Anda saat Anda menahan ikon Type tool
di toolbox kiri Anda, akan tampil opsi untuk mengetik secara horizontal atau vertikal.

Seperti tool lainnya, akan muncul lebih banyak opsi di bawah menu utama ketika Anda mengkliknya.
Anda juga dapat mengedit menggunakan panel Karakter, yang nantinya memunculkan beberapa opsi
tambahan lagi.

Gambar 8. Cara menggunakan type tool di photoshop.

Cara Menggunakan Gradient Tools di Photoshop

Gradient adalah transisi warna yang halus antara dua atau lebih warna. Gradient membuat bacground
terlihat menarik untuk fotografi produk atau iklan Anda. Tool Gradient bisa menjadi cara sederhana untuk
menambah warna dan tampilan yang lebih profesional.

Cara membuat gradient:

▪ Klik ikon paint bucket. Tahan hingga menu muncul. Lalu pilih “Gradient Tool”
▪ Gunakan menu opsi yang muncul di bawah menu utama. Jika Anda mengklik menu dropdown, Anda akan
menemukan gradient default untuk dipilih.

6
 YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN
UNIVERSITAS SIBER ASIA
Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

Gambar 9. Cara membuat gradient pada photoshop.

▪ Anda juga dapat membuat gradient Anda sendiri dengan mengklik bar nya daripada opsi dropdown.
Nantinya akan muncul editor Gradient dimana Anda bisa mengkreasikan versi gradient Anda sendiri.

Gambar 10. Tampilan gradient editor pada photoshop.

▪ Setelah Anda memilih jenis gradient yang Anda inginkan, klik OK. Sekarang Anda dapat menariknya ke
dokumen Anda dengan mengklik bagian mana saja dari file, geser mouse Anda ke bawah, dan tarik garis
ke titik di mana Anda ingin gradient berakhir. Misalnya, jika Anda menginginkan gradient dalam bentuk
diagonal, Anda dapat mengklik sudut kiri atas dokumen Anda dan menyeret hingga ke sudut kanan bawah.

7
 YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN
UNIVERSITAS SIBER ASIA
Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

Gambar 11. Cara menarik garis gradient pada photoshop.

Dan berikut ini adalah outputnya:

Gambar 12. Hasil output.

Di bagian menu di atas, ada 5 jenis gradient yang bisa Anda pilih:

1. Linear gradient: Garis lurus, yang merupakan contoh di atas.

2. Radial gradient: Pola melingkar, ke arah luar secara simetris dari titik awal.

3. Angular gradient: Sapu searah jarum jam yang berputar di sekitar titik awal Anda.

4. Reflektif gradient: Gradien linear cermin di kedua sisi titik awal Anda.

5. Diamond gradient: Pola berlian dari sudut tengah ke luar.

8
 YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN
UNIVERSITAS SIBER ASIA
Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

Gambar 13. Jeni-jenis gradient yang terdapat pada photoshop.

Cara Menggunakan Lasso Tool di Photoshop

Fungsi dari lasso tool photoshop adalah alat untuk menyeleksi objek dengan metode draw. Di sini kita
membuat seleksi seolah kita sedang menggaris bebas tanpa mistar. Tool ini sama sekali free hand, kualitas
seleksi tergantung dari kemampuan kita menarik garis seleksinya.

Ada 3 opsi yang bisa Anda pilih dalam Lasso Tool:

▪ Standard Lasso: Untuk menggunakan ini, cukup menggambar bentuk yang ingin Anda potong sambil
menahan klik mouse. Dianjurkan untuk kembali ke titik awal untuk mengontrol cara proses seleksi lasso
ditutup. Jika Anda tidak kembali ke titik awal, lasso tersebut akan menarik garis lurus antara titik awal
dan akhir untuk mengakhiri proses seleksi.

Gambar 14. Standard lasso.

9
 YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN
UNIVERSITAS SIBER ASIA
Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

▪ Polygon Lasso: biasanya tool ini digunakan untuk menyeleksi objek dengan pola garis lurus dengan
sedidkit garis lengkung. Caranya klik sudutnya, tapi perlu diingat kalau titik awal klik adalah titik akhirnya.

Gambar 15. Polygon lasso.

▪ Magnetic Lasso: Tool lasso yang secara otomatis mengikuti objek yang ingin diseleksi namun tidak bisa
menyeleksi secara detail.

Gambar 16. Magnetic lasso.

10
 YAYASAN MEMAJUKAN ILMU DAN KEBUDAYAAN
UNIVERSITAS SIBER ASIA
Kampus Menara, Jl. RM. Harsono, Ragunan - Jakarta Selatan.Daerah Khusus Ibukota Jakarta 12550. Telp.
(+6221) 27806189. asiacyberuni@acu.ac.id. www.unsia.ac.id

Tanda Tangan Dosen Pengampu / Tanda Tangan

Nilai
Tutor Mahasiswa

(Novi Dian Nathasia S.Kom., MMSI) (Hendro Gunawan)

Diserahkan pada Tanggal: Tanggal Mengumpulkan:
30/06/2022

11