Contoh Laporan TCS Palcomtech Lahat (membuat template web di photoshop)

Untuk yang menempuh pendidikan profesional satu tahun di Palcomtech, khususnya Palcomtech Lahat, tentunya saat-saat mengerjakan TCS atau PKL adalah saat-saat yang membuat pusing dan bete. Terutama saat membuat laporan TCS-nya. Nah, aku pun pernah mengalaminya. Untuk itu aku akan mencoba berbagi pengalaman dalam mengerjakan laporan TCS, karena waktu itu aku mengambil Project akhir TCS.

Aku membuat desain website untuk paud. Nah , untuk membuat template web-nya menggunakan photoshop CS3.Untuk memberi gambaran awal apa yang akan kita kerjakan, maka diperlukan langkah-langkah kerja sebagai panduan dalam pendesainan web.

Langkah-langkah yang akan kita lakukan dalam pendesainan web ini adalah sebagai berikut:

a.       Membuat konsep awal layout web.

b.    Merencanakan menu web sehingga kita akan dapat menentukan berapa banyak halaman web yang akan kita buat.

c.    Membuat atau mempersiapkan file-file pendukung( penting ) yang akan kita gunakan dalam mendesain web.

d.      Membuat desain web sesuai dengan yang telah kita rencanakan.

e.      Membuat link antar halaman.

f.        Periksa kembali desain web kita, dan sempurnakan

      Contoh Konsep awal layout web

HEADER
MENU BAR
MENU	CONTENT	CONTENT2
FOOTER

      Rencanakan menu apa yang akan kita tampilkan di web kita nanti. Setelah itu barulah kita membuat template webnya di photoshop. 

            Membuat template Web di Photoshop

Kita akan membuat sebuah template web di Photoshopterlebih dahulu.

Langkah-langkahnya adalah sebagai berikut:

1.         Buatlah sebuah file baru dengan ukuran 1020x1020 satuan pixels. Lalu simpan.( contoh: home.psd).

Gambar1  Membuat  file home.psd ukuran 1020 x 1020 pixels

2.         Pilih File->Open untuk membuka file gambar yang akan kita gunakan untuk header. Gunakan Move Tool (V) untuk memindahkan gambar tersebut ke file home.

Gambar 2  Memasukkan gambar ke file home.psd

3.         Pilih Edit->Free Transform atau Ctrl+T untuk mengatur skala gambar(nb : gambarnya aku ambil dari google) sesuai ukuran header yang kita inginkan. Agar pengerjaan lebih rapi dapat kita tampilkan Ruler dengan cara View->Ruler atau Ctrl+R pilih satuan pixels.

Gambar 3   Mengatur skala gambar

 

Gambar 4   Memunculkan Ruler dengan Ctrl+R

4.         Pada Toolbox pilih Gradient Tool untuk mewarnai latarnya. Klik Gradient editor lalu pilihlah warna yang diinginkan.

Gambar 5  Menggunakan Gradient Tool

5.         Untuk menambahkan tulisan pada Toolbox pilih Horizontal Type Tool(T). Pada opsi bar pilih Set The Text Color untuk memilih warna text.

 

Gambar 6   Menambahkan tulisan dengan Text Tool (T)

6.         Untuk membuat bar pada footer dan tombol menu kita gunakan Rectangle Tool. Lalu tekan Ctrl+T untuk mengatur skala shape yang kita inginkan.

 

Gambar 7 Membuat footer dan tombol bar

7.         Pilih Custom Shape Tool->Shape lalu pilih bentuk rumput. Drag pada area kerja.

Gambar 8  Menggunakan Custom Shape Tool

8.         Kita atur lagi agar didapatkan tampilan akhir seperti berikut.

Gambar 9 Tampilan akhir home.psd

9.         Dengan Slice Tool (K), klik kiri mouse tahan lalu drag, kita dapat memotong-motong gambar sesuai dengan konsep awal web kita. Jangan lupa untuk tombol menu juga kita potong. Maksud dari pemotongan gambar adalah untuk mempermudah saat pemberian link pada tombol.

Gambar 10 Memotong layout web dengan Slice Tool (K)

10.      Setelah itu tekan File->Save for Web & Devices (Alt+Shift+Ctrl+S). Akan muncul kotak dialog Save for Web & Devices, tekan Save simpan dengan nama index.html.

Gambar 11 Kotak dialog Save for Web & Devices

Setelah template di photoshop ini selesai maka selanjutnya akan kita buka dengan program Dreamweaver. (mungkin lain waktu aku akan membuat postingan yang satu ini).

Jangan lupa untuk membuat laporan TCS, apa yang sedang kita kerjakan simpanlah dulu dengan menekan "printscreen " di keyboard. Maka apa yang tampil pada layar komputer akan tersimpan. Pastekan di laporan TCS kita yang dibuat di word. 

Atau jika ingin melihat langkah pembuatan template web kita setelah jadi, kita bisa mengulangi langkah yang tadi kita kerjakan dengan mengatur gambar mata yang terdapat di  panel layer photoshop. Bila gambar mata kita hilangkan maka layer yang dipilih tidak kelihatan. Untuk menampilkannya kembali , kita klik lagi gambar mata.
Semoga postingan ini bermanfaat untuk adik-adik yang lagi mumet mengerjakan laporan TCS. Jangan takut untuk bertanya kepada pembimbing TCS masing-masing agar tidak pusing sendiri. Malu bertanya, salah laporannya... he..he..he...