Slice Web Design

8/8/2019 Slice Web Design

1/26

WP-Designer Theme Whoa?

Buat File layout di photoshop------>>>>>>>lanjutkan dengantekhnik ini:P

Sorry dalam bahasa inggris dulu

tapi..codingnya pake bahasaIndonesia kok.

Source :http://themetation.com

Structuring

This is a very important part in designing a web layout. We need to structure our layout beforeopen Photoshop. The first thing is the purpose of the layout. In our case, this will be a blog

layout for WordPress. So, below is what we have in a blog:

1. Header2. Posting area3. Sidebar4. Single page5. Comment6. Feedback7. Searching field8. Page menu9. RSS10.Archives, Links and About Page

Something we need to keep in mind. We cant put all things into one basket. So, we CANNOT:

1. Display too many things in one single page.2. Use too many colors and font type.

In this sample, I also try to make is as simple as possible because the purpose of this series of

tutorial is to give an example on how to create a wordpress theme. I am going to have a featured

post section on the main page. Below is the Final image that we will create.

Final Result
http://themetation.com/http://themetation.com/http://themetation.com/http://themetation.com/


2/26

Photoshop

Step 1

Create a new document with 1024px X 768px as we are going to create a layout which suit for

1024px resolution. Fill it the background layer with #eae8c6. Now, CTRL + R to bring out theruler. Draw some guide line for the divine proportion we need. Before this, make sure it is snap.

Go to View > snap (selected).

Step 2

Grab the rectangle tool and draw a header for it. The height, you have to estimate how much

you want. Balance is the main thing you need to concern. Then, apply the blending option asshown below. A black to white gradient with soft light blend mode. Create another rectangle,

apply gradient overlay with setting as shown below. Put it 1px below the green bar. It will

make it more details. Then, draw a 1 pixel line and put it right above the gap between the two
http://themetation.com/img/how1/large.jpg


3/26

bars you created before. Give it a darker color.

Step 3

I use Myriad Pro. So, you guys can edit it by yourself later. Apply drop shadow with the

setting shown below. Then, also apply Gradient Overlay with 12% opacity, black to white.For the white outline stroke. Simply hold the CTRL tab and click on the text layer to get theselection. Go to Select > Modify > Contract > 1px. After that, create a new layer. Go to Edit

> Stroke > 1px, white, inside.

Step 4


4/26

Draw a rectangle, remember, the maximum width you can use is 600px. Ok, make its white

color. Apply 1px inside white stroke. And, Gradient Overlay with the setting as shown below.

Step 5

The read more button is actually using the same technique where we used for the logo. This time,

we apply Inner Glow with 8px size and 75% Opacity in Soft Light Blend Mode. GradientOverlay with 70% opacity also in Soft Light Blend Mode. Finally, A 1px outside stroke with

color #47670b. Then, for the 1px inside white stroke. It is same with what we did in step 3.

Step 6


5/26

Place in some dummy text and photo. You will have something like this. You can use a text

generator for this.

Step 7

Put in some Dummy Text again. Try to use none anti-alias fontfor testing. Dont forget what a

wordpress theme needed. Post title, tags, post date, comments number. This time, I add in author

photo part to be shown in every post.

Step 8

Place a RSS icon. I forgot where I downloaded it alreadysorry about that Then, For thesearch area, create a rounded rectangle with a maximum width of330px. Fill it with black color

and set it blend mode to soft light. Create another rounded rectangle inside. This will be ourinput field. Fill it with white color. Apply 1px inside stroke with color#d0ceae. Then, apply


6/26

inner Glow, with setting shown below. After that, place the searching icon.

Step 9

Draw a rounded rectangle and use the pen tool to draw a dialog box as shown below. You can

refer to my previous tutorial in LoonDesign onhow to create a custom shapein photoshop. Then,apply drop shadow on it. Use the rectangle tool to create the categories and links content box.

The maximum width will be 160px. We need a 10px space in between them.

Step 10
http://kailoon.com/how-to-create-custom-shape/http://kailoon.com/how-to-create-custom-shape/http://kailoon.com/how-to-create-custom-shape/http://kailoon.com/how-to-create-custom-shape/


7/26

We are almost there. Now, we will use the same technique we used to create the header part.

Conclusion

You may found that I do not mention about the page navigation part. I think it is too simple for

you. Try it out yourself. If really cant, I am also providing the source file for you here. Overall,

there is several things we need to consider when creating a wordpress theme. In this example, weare creating for blogging purpose. So, the major section will be, categories, tagging, author

photo, comments and also the RSS feed. I prefer to make things more organizes. So, you can

found that all the layers in my psd file are well renamed and each section is well separated. This

is for future modification purpose and also for my dear reader to modify it easily.

Single Page

As we are creating theme for wordpress, there must be a single page to display a post and

comment section. Here is the final output.

Sebelum kita potong, kita perlu memastikan komponen apa yang kita dapat menggantinya dengan css

dan bagian mana kita perlu keluar slice. Juga, pertimbangkan gambar latar belakang yang kita hanya

dapat menggunakan gambar lebar 1px dan mengaturnya untuk mengulang di latar belakang. Ini akan

menghemat bandwidth lebih banyak dan kapasitas sementara juga menambah waktu loading. Pergi ke

View snap>. Kita perlu memastikan alat pengiris snap dapat otomatis ke tepi dari objek yang kita

butuhkan. Untuk memilih alat slice, cukup tekan pada 'k' dari keyboard.
http://themetation.com/img/how1/single-large.jpg


8/26

Karena langkah-langkah mengiris tidak jelas, jadi saya membuat video ini untuk Anda. Saya berharap

video singkat ini bisa menjelaskan lebih baik. Berikut adalah beberapa tombol shorcut jika anda

menggunakan PC:

* K Slice Tool

* Space Bar + Mouse Drag Pindah layar

* CTRL + ALT + SHIFT + S Simpan untuk web

Ketika Anda akan memilih irisan untuk menyimpan untuk web.

* Space Bar + Mouse Drag Pindah layar

* SHIFT + Waktu Klik Pilih beberapa iris

Di sini, Anda mungkin memperhatikan bahwa saya akan menyimpan gambar layout ke PNG-24 yang jelas

tetapi dengan sedikit peningkatan ukuran file.

Berulang image

Kami menggunakan latar belakang header sebagai gambar berulang. Dalam hal ini, kita harus sangatberhati-hati untuk mengiris keluar perbatasan dua warna yang berbeda. Lihat layar shot di bawah ini.

Gambar Slice

Untuk memotong gambar penuh, kita perlu untuk memperbesar selalu. Terkadang kita perlu zoom

maksimum (1600) untuk mendapatkan hasil terbaik. Sebagai contoh:


9/26

CSS / HTML Coding

Kita perlu mengetahui bagian utama untuk layout sebelum kita mulai. Bagian yang harus

dipertimbangkan adalah:

1. Wrapper (untuk memegang seluruh tata letak kecuali footer)

2. Header (untuk bagian header termasuk navigasi halaman)

3. Konten (untuk memegang area posting dan juga sidebar)

4. Waktu-pelana (untuk area posting, komentar bagian dan menanggapi bagian)

5. Col kanan (sidebar, RSS, tentang aku dan kolom pencarian)

6. Footer (footer)

Persiapan

Saya menggunakan Dreamweaver sebagai editor. Sebelum kita mulai. Buat file index.html stlye.css dan

sebuah. Tempatkan kode di bawah sebelum judul di index.html tersebut.

Langkah 1 - Menyiapkan struktur Utama

Berikut adalah wadah utama untuk tata letak. Aku meletakkan footer keluar dari pembungkus untuk

lebar penuh untuk resolusi yang berbeda.


10/26

Langkah 2 - Tambahkan More Details Ke Dalam Bagian Tertentu

Berikut adalah wadah utama untuk tata letak. Aku meletakkan footer keluar dari pembungkus

untuk lebar penuh untuk resolusi yang berbeda.

Gallery

ContactAbout


11/26

Langkah 3 - CSS Untuk Kontainer Utama

Berikut adalah wadah utama untuk tata letak. Aku meletakkan footer keluar dari pembungkus

untuk lebar penuh untuk resolusi yang berbeda.

#wrapper {width: 960px;margin: 0 auto;

}

#header {width: 960px;height: 100px;float: left;

}

#content {width: 960px;float: left;

}

#content #left-col {width: 600px;float: left;position: relative;padding-right: 30px;

}

#content #right-col {width: 330px;margin-top: 20px;float: left;position: relative;

}

#content #right-col #sidebar {width: 330px;float: left;position: relative;

}

#footer {width: 100%;float: left;


12/26

background: url(images/footer-bg.png) repeat-x top left;height: 23px;padding-top: 40px;color: #fff;

}

Langkah 4 - CSS Untuk Daftar Halaman

Kita tahu bahwa menu akan menempel ke sisi kanan. Dalam hal ini, menu akan dalam urutan. Jadi, kita

perlu untuk mengapung dengan benar.

#header #menu {float: left;width: 500px;margin-top: 38px;

}

#header #menu ul {

width: 500px;list-style: none;float: right;text-align: right;

}

#header #menu ul li.page_item { /* page_item is wordpress default class forpage list */

float: right;}

#header #menu ul li.page_item a {padding: 4px 8px;

display: block;margin: 0 7px 0 0;float: left;text-decoration: none;font: 900 14px Arial, Helvetica, sans-serif;color: #a9bf78;-moz-border-radius-topleft: 2px;-moz-border-radius-topright: 2px;

}

#header #menu ul li.page_item a:hover {color: #fff;

}

#header #menu ul li.current_page_item a { /* current_page_item is wordpressdefault class for active page list */

color: #fff;background-color: #2c4106;

}

Langkah 5 - Struktur Sidebar


13/26

WordPress memiliki struktur sidebar default. Ini adalah desain untuk cocok untuk semua widget Anda

akan digunakan di masa depan. Widget yang Anda terapkan akan dimulai pada tingkat kedua dari daftar.Sidebar

Category

Links

Langkah 6 - CSS Untuk Struktur Sidebar

WordPress memiliki struktur sidebar default. Ini adalah desain untuk cocok untuk semua widget

Anda akan digunakan di masa depan. Widget yang Anda terapkan akan dimulai pada tingkatkedua dari daftar.

#sidebar ul {list-style: none;

}

#sidebar1 {float: left;width: 160px;padding-right: 10px;

}

#sidebar2 {float: left;width: 160px;

}

#sidebar ul {

}

#sidebar ul li {float: left;width: 158px;background-color: #d7d39a;border: 1px solid #bbb875;margin-bottom: 10px;

}


14/26

#sidebar ul li h2 { /* this is the widget title */padding: 3px 4px 6px;font: 400 18px Arial, Helvetica, sans-serif;color: #4c6b0d;

}

#sidebar ul li ul {

}

#sidebar ul li ul li { /* begin for the widget list */float: left;width: 158px;border: 0;margin-bottom: 0;

}

#sidebar ul li ul li a {border-top: 1px solid #bbb875;float: left;

width: 150px;text-decoration: none;color: #5d5b35;padding: 2px 4px;

}

#sidebar ul li ul li a:hover {color: #fff;background-color: #bbb875;

}

Langkah 7 - Komentari Bagian Untuk Page Single

Berikut adalah bagian komentar.

Comments


15/26

Langkah 8 - CSS Untuk Bagian Komentari

Saya tidak akan menunjukkan struktur halaman di sini karena itu sebenarnya mirip dengan halaman

indeks. tapi saya memperlihatkan kepada Anda bagian komentar.

#comments {margin-top: 15px;

float: left;width: 600px;

}

h3#comment-title {background: url(images/comments.png) no-repeat top left;width: 600px;float: left;text-indent: -9999em;padding-top: 5px;

}

#comments ol, #comments ol li {

float: left;width: 600px;list-style: none;padding: 0;

}

#comments ol li .comment-data {float: left;width: 478px;margin-right: 10px;background-color: #d7d39a;padding: 5px 10px;min-height: 120px;_height: 120px; /* an IE6 hack */

overflow: auto;border: 1px solid #c1bd85;

}

#comments ol li.alt .comment-data {float: left;width: 478px;margin-right: 10px;background-color: #eae8c6;


16/26


17/26

13. image.php

Struktur Dasar WordPress

Berikut adalah struktur dasar dari wordpress.

Sebuah Break Down Dari Template_tags Kami Digunakan

Sepanjang jalan, Anda mungkin tidak tahu apa yang template_tags artinya bagi Anda. Jangan

khawatir, di sini adalah daftar dari mereka dan aku akan mencoba untuk menjelaskan kepada

Anda.

/* get the home URL */ /* display the blog description */ /* display the blog name */ /* get the home URL for template'sdirectory */

/* display the page listin descending order withour title */ /* display the list of blogrolls */

===============within a loop=============== /* display the contents of the current post */ /* the text "read more" will not show up */

/* dispaly the tags of the post */ /* display the time of the current post */ /* display the numeric ID of the current post */ /*display a link to them comment*/ /* display the author's name of the post */ /* display the unique numeric user ID for the authorof a post */


18/26

/* display the commentor avatar ina size of 80px X 80px */ /* display the comment content */ /* display the URL for the permalink of the postcurrently being processed */

============Paganavigation=============== /* display a link tothe previous post with an anchor text as "Previous Post" */ /* display a link to the nextpost with an anchor text as "Next Post" */ /* display a link to theprevious page with an anchor text as "Previous Page" */ /* display a link to the nextpage with an anchor text as "Next Page" */ /* display a link to the previous image withinthe gallery */ /* display a link to the previous image within thegallery */

============file linking================= /* load header.php */ /* load sidebar.php */ /* load footer.php */ /* load comments.php */ /* load searchform.php*/ /* load about.php */ /* load featured-post.php */

============widgetize sidebar============

/* if it is a widgetize sidebar, defince this as sidebar 2*/

============define the page template name in admin panel==================

============normal post loop==================/* a normal posts loop, the contents go here */

/* end loop */

============query post loop================== /* get all posts excluding posts undercategory with ID=3 *//* the contents go here *//* end loop */

============comment loop==================


19/26

/* start the comments loop *//* end comments loop */

============use of custom fields==================

/* display the custom field value */

/* end loop */

Pelaksanaan

header.php

Mudah bagian untuk kalian.


20/26

Sidebar

/* if it support widgetize sidebar, declare the widget sidebar as

sidebar 1 *//*A template tag to list down the categories with a title

named Categories */

/* if it support widgetize sidebar, declare the widget sidebar assidebar 2 */

/*A template tag to list downthe blogroll */

about.php

Saya buat file ini untuk membuat pekerjaan lebih mudah. Di sini, kita akan memiliki loop untuk meminta

posting yang dinamakan sebagai "tentang". Kami menggunakan query_posts untuk memanggil halaman

- tentang. Setelah itu, kita mendefinisikan 2 kolom kustom untuk itu. Untuk informasi Anda, kami juga

perlu menambahkan 'kunci "dan" nilai "dari bidang adat ketika kita membuat halaman. Sebagai contoh,

kuncinya adalah myphoto dan apa yang perlu Anda lakukan adalah mengetikkan nilai untuk itu di admin

panel.

/* request page which name equalto "about" */

/* define the custom field with key = mydesc */

About Me/* to call the value for the mydesc and so on

*/


21/26


22/26


23/26

/* end loop */

Pelaksanaan

page.php

Sebuah template halaman yang kita gunakan untuk membuat halaman. Tidak jauh

berbeda dengan index.php.

/* get the header */

/* if have post */ /* page content */

/* end loop */

/* appearwhen admin is login */ /* get the sidebar */ /* get the footer */

single.php

Single.php digunakan untuk menampilkan single post dengan komentar dan menanggapi bagian. Saya

hanya akan menampilkan bagian penting untuk itu.

/* if haveposts */


24/26

comments.php

Komentar bagian untuk menampilkan semua komentar di posting tunggal. Biasanya, kami hanya

mengedit mulai dari garis 18. /* if comments exist */

Comments /* comments loop start */

/* comments content*/ /* if

comment is under moderation, this line will be shown */Your comment is awaiting moderation.

/* the editlink for the admin*/

/* to get the avatar of

the commentor */

/* comments loop end*/

Comments are closed.

Tepat setelah ini, ada bentuk komentar yang kita tidak berbuat banyak tentang hal itu.

archives.php, links.php

arsip dan link yang kedua template hanya halaman untuk menampilkan konten. Saya hanya akanmenampilkan template arsip di bawah ini.


25/26

*/?>

Archives by Month: /* to list the archives in

monthy */Archives by Subject: /* to list the categories

without title */

search.php, searchform.php

Search.php adalah untuk menampilkan hasil pencarian sementara searchform.php hanya berisi

searchform yang kita gunakan. bawah ini searchform tersebut.


26/26

Slice Web Design

Documents