web design and blog tutorial

statistik dan tracker

2008-04-25T09:56:00.001+07:00

Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger yakni memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui para pengunjung blog kita datang dari mana, apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.

Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs http://www.sitemeter.com. Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :

1. Silahkan kunjungi situs http://www.sitemeter.com.

2. klik tulisan Sign Up untuk melakukan pendaftaran

3. klik tombol bertuliskan Next

4. Klik tombol Next lagi

5. Isi semua tabel yang ada lalu klik tombol Next lagi

6. Isi lagi tabel yang ada, lalu klik tombol Next lagi

7. klik tombol Next lagi

8. klik tombol Next lagi ( cape dech next..next melulu emoticon.gif )

9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan

10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com

11. Silahkan login dengan id anda

12. Bila sudah login, Klik menu Manager

13. Klik Menu Meter Style untuk memilih gaya dari site meter anda

14. Pilih style yang anda sukai, kemudian klik tombol Select

15. Klik menu HTML Code

16. Klik tulisan Adding site Meter to a Blogger.com Site

17. copy semua kode HTML yang di berikan lalu paste pada Notepad

18. Klik menu Logout untuk keluar dari situs tersebut

19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita

Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :

khusus blog dengan template klasik :

1. Sign in di blogger dengan id anda

2. Klik menu TEMPLATE

3. Klik Edit HTML

4. Klik Edit (yang ada pada bar menu browser anda)

5. Klik Find (on this page)... ⇒ untuk mempercepat pencarian

6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find

7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi

8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai

Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode ...kode site meter...

Untuk blog dengan Template baru :

1. Login di blogger dengan ID anda

2. Klik menu layout

3. Klik Elemen Halaman

4. Klik Tambahkan sebuah Elemen Halaman

5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript

6. Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)

7. Copy & paste kode Site meter pada kolom isian

8. Klik tombol Simpan Perubahan

9. Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)

10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan

11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN

12. Selesai

Cara Mengaktifkan Widget Flickr dan Delicous

2008-04-23T09:57:00.000+07:00

Oleh fatihsyuhud.com
Anda suka foto atau koleksi gambar, tentu Anda butuh flickr.com untuk menyimpannya. Kalau Anda suka menyimpan link-link menarik dari sejumlah situs, Anda tentu butuh punya account di del.icio.us, bookmark online terpopuler. Baik flickr.com maupun del.icio.us dapat Anda taruh di wordpress.com milik Anda, karena keduanya sudah built-in menjadi bagian wordpress.com. Tugas Anda tinggal mengaktifkannya dan menaruhnya di sidebar kalau Anda suka. Ikuti tutorial praktis berikut:

Langkah pertama, naikkan widget flickr atau del.icio.us ke sidebar Anda. Setelah itu ikuti rincian berikut:

Wodget Flickr

1. Di menu “URL RSS Flickr” -> masukkan alamat feed RSS flickr Anda.

2. Judul -> isi judul yang Anda inginkan

3. Berapa foto yang ingin ditampilkan -> pilih jumlah di menu drop-down.

4. Setelah itu, klik simpan perubahan atau “Update change”

Widget Delicious

1. Di widget title -> kasih judul
2. Di del.ico.us login -> masukkan login delicious Anda.
3. Number link -> tulis jumlah link yang ingin Anda tampilkan.
4. Selesai. Klik Simpan Perubahan atau Save Update.

Catatan untuk widget Flckr:

Widget flickr harus di isi dengan RSS Feed flickr yang akan dimasukkan.

Contoh RSS feed flickr.
1. silakan kunjungi http://flickr.com/photos/beasiswa
2. Di bagian paling bawah ada tulisan “Subscribe to Beasiswa’s photos”.
3. Klik di kata “Latest” –> klik kanan mouse –> copy shortcut (untuk IE) atau copy link location (untuk firefox) -> klik (link RSS feed dah tercopy)
4. Masukkan / paste ke widget flickr Anda. Selesai

Add a Shoutbox to Blog

2008-04-19T09:56:00.000+07:00

Once of my friend ask to me, how to add a shoutbox to blog?

Allright, before i answer this question you must know what is shoutbox? shoutbox is a little box for sending a short message, with shoutbox you can chat with your blog visitor. An example of shoutbox is be like this :
Where you can get a shoutbox? there is very much site provide this service. One of them is http://www.shoutmix.com. At this site you can get a shoutbox for free (basic account). This is the steps for get a shoutbox at shoutmix :

1. Please check out http://www.shoutmix.com.

2. Before you must register, please click "CREAT YOUR SHOUTBOX NOW", or you can click "SIGN UP" at upper tab.

3. If you are has registered at shoutmix, please login with your ID.

4. At the column with title Style, click appearance.

5. Then click pull down menu beside Load From Preset for setting your shoutbox, please select which you want. If it is done, don't forget to click Save Setting.

6. To get HTML code for your shoutbox, please click "Use Shoutbox"

7. Click at "Place Shoutbox on web page", write the width and hight you want.

8. Copy all of the HTML code at text area below of "Generated Codes", paste at notpad and then save to your computer.

9. Click "Log out" and then close.

10. Done. now you have a shoutbox code for add to your blog.

Now you can add your shoutbox code to your blog, please following the steps :

1. Login to blogger with your ID.

2. After at the dasboard page , click Layout.

3. Click at Page Element tab. See the picture below :

page element

4. Click at Add a Page element.

5. After emerging pop up window , clicklik add to blog button for the things HTML/JavaScript. See the picture following :

javascript

6. Open your Shoutbox code, copy and then paste into available column.

7. Click save changes

8. Done. Please see the result.

Now you have a Shoutbox at your blog.

Install Asteeg Emoticon To Post Editor

2008-04-17T14:57:00.000+07:00

Hi guys! till remember about install Yahoo Emoticons to post editor likely at this post, How do you feel after do that? feel happy coz you can add this to your post very easy. Or might be you feel boring with them. How if i give you different emoticon like this or also like this

Feel interesting to install this emoticon to your post editor? Please read till end. However, please remember this tutorial only work at Fire fox not for Internet Explorer and only at Compose not for Edit HTML. Here is the steps :

If you have had doing my previous tutorial at this post, please only click here and then click install and done. Now see your post editor, and you will see your post editor like this :

Or this is the full tutorial :

Download firefox here.

Open your firefox.

Install grease monkey here.

Click this script, and than click install.

Go to your template editor, and find this code ]]>

Copy and paste following codes and place above of ]]>

   img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

Click Save Template button.

Done.

Remember, this is work at Firefox, not for internet explorer.

Beside at my blog, you can read this tutorial at this blog.

See you at my next post. Don't miss it.

Blogger Templates

2008-04-17T14:10:00.000+07:00

Free Classic blogger templates layout, designed for your blogspot powered blog to help non-designer bloggers differentiate the look of their site. All the templates are available for download with Blogger codes already inserted . Note that these will only work for blogger or blogspot powered blogs.
Select from the list on right sidebar to see template preview and click on Get Template Code to get the code.

How to use Classic Blogger Templates in New Blogger

Login to New Blogger with your Google account.
On your Dashboard choose blog you want to edit, Click on Layout, you’ll go direct to Template tab where blog you want to Edit.
Choose the Template tab of your blog then click on Edit HTML.
Next scroll down to the end of your page and choose Revert to Classic Template.
Copy all the code of the template you wish and paste it into your blog.
Click on SAVE TEMPLATE and you are done!.

Blogger Templates, Free Classic Blogger Template layout design for Blogspot powered Blog.

Basic Rounded Navigation Bar

2008-04-17T14:02:00.000+07:00

n this tutorial i will create a Navigation bar with round corners.

1. Create a new Document 648 x 115 px.
2. Go to Layer > New Layer, and Click OK

3. Now with the Marquee Square tool (R) make a rectangle like this:

4. Go to Select > Rounded Rectangle .. Radius 30%. Click OK

5. With the Fill tool (Shift + B) . Paint the selection White.
6. Now go to Layer > New Layer .. OK
7. Go to Select > Shrink > 3 .. OK
8. Change the Foreground color to: #F0B259 and the Background to: #F87811.

9. With the Gradient Tool (L) Drag it from the top to the bottom of the selection. Go to Select > None. It should look like:

10. Now to Select the 1st layer. the one with the white rectangle. Go to Script - Fu > Shadow > Drop-Shadow. Select:

Click OK. You should have:

11. With the Text Tool (T). Create a new Layer, and type: Home. Click OK

Change your settings to.
Font > Verdana, Size > 25, Color > White:

Looks like:

12. Create a New Layer (Layer > New Layer > OK)
13. Create a 2 Pixel Line like this:

14. Change your color to White, and with the Fill tool (shift +b) Paint on the line:

15. Adjust the opacity of the line to 17.

16. Duplicate the lines and space them out between each button then finaly add your text.

thats it your done :)

by:http://gimp-tutorials.net/node/110

Glow Effect

2008-04-17T13:59:00.000+07:00

Step 1

Will start off by creating a new image and filling it with a solid Black color. i started off with 420x300 so it fits the sites width. you might want to use your final outcome as a wallpaper so try 1600x1200 then zoom out to 33% to get the a decent few of the whole image.

Step 2

Now will want to create the Lines using the "Path Tool" but first Create a new Layer, name it something like "Middle line" then select the "Path tool" and add one point above the image area and another at the lower bottom, drag the bottom point to the right to get a similar curve as mine.

Step 3

Now we need to create a new thin brush to stroke the path with. go to the Brushes dialog and at the bottom you will see a little "New brush" icon, click on that and enter all the values shown in the image below. once your finished name it and save.

Step 4

Change your Foreground color to solid white, Make sure the new brush is selected, then go to Edit>Stroke to Path, now inside the Stroke to Path dialog click on the "Stroke Path with a Paint tool" radio button and finally press Stroke.

Step 5

Now for the outglow of the lines will Create a new layer, change the foreground color to 5babe8 and in the brushes dialog you should have a brush named Circle (05) if not then create a new brush with the following values

Step 6

Now as we did in step 3 will repeat it again, go to Edit>Stroke to Path, now inside the Stroke to Path dialog click on the "Stroke Path with a Paint tool" radio button then finally press Stroke.

Step 7

Once you have the solid light blue will add the glow effect by using the "Gaussian blur" this can be found in Filters>Blur>Gaussian Blur".change the values to 10px for both Horizontal and vertical fields.

you should have something like this now

Step 8

Draw two more lines with the Path tool and Repeat the same steps done earlier to achieve the same glow effect on the lines.

Step 9

Using the radial tool will create three spot light effects, one in the upper right corner , the second in the upper left corner and the third in the lower left corner, will do that by first creating a new layer, then grabbing the "blend tool",changing the foreground color to white and the background to black, make sure you have the FG to BG (RGB) Gradient and changing the the gradient shape to "Radial".

Once you have all that set apply the blend tool as shown in the image

Step 10

Now that you have applied the radial blend in the upper right corner change the layer mode to "Addition" you will find this option in the Layer dialog.

Step 11

New Layer, create another spot light in the bottom left corner, drag the blend tool starting from the middle . then set the Layer mode to "Dodge"

Step 12

Create another new Layer for the final spot light, this time apply the Blend tool in the upper left corner where the two lines join and change the mode to "dodge"

11 Will add some particles using different sizes of brushes, just select the brush we first created or any tiny 2 radius brush select the color white and paint random dots here and there,for the bigger particles change the size and the opacity in the "Tool Options dialog" to get a better effect.

There you go, you're done!

Like everything there is always room for improvements here i added some text and applied all the techniques we just learned .

by:http://gimp-tutorials.net/node/123

Sun Ray Effect

2008-04-17T13:55:00.000+07:00

Step:

1 Open a new image at 400x400 and in the new image dialog under the advance section select Transparent fill.

3 Now will want to activate the GRID by going to Veiw> Show Grid or pressing CTRL+SHIT+T, will also need the "Snap to Grid" feature active, go to Veiw>Snap to Grid.

4 Now with the path tool will draw our first ray pay attention to where i drew my ray using the grid points.

remember when drawing your path be sure to have it on "design" mode and to close it you must have it on Edit mode or hold down CTRL.

once you have drawn your path in the path dialog click on "Selection from Path"

5 Create a new player name it "1"

6 Change the forgound color to white,select the "Blend tool" or press L and in the the Graident dialog select the "FG to Transparent" Gradient.

7 Now apply the Gradient from bottom to top as shown in the image below.

8 now you can de-select the Ray by going to Select>None or Shift+CTRL+A

9 now move the it to the center of the grid, it as shown in the image.

Now what will do is basically duplicated the layer again and again to compleat a full circle

10 Duplicate the Ray and name the layer "5"

11 Now select the Rotate tool or Shift+R, now rotate the ray either by dragging to approximately the position i have mine at or use the rotate dialog to enter 83 for angle and Center both X and Y at 192

12 Using this same technique create 13 more rays and use the grid to position them with equal space between each ray. just remember having make sure you adjust the center point to 192.

this is just an example of how these neat sun ray effects can add a nice cool look to a design like a header, wallpaper, background ect. all i did was use a simple two colour light toned gradient named "Web 2.0 Wax Dark " that can be found in the 30 ultimate web 2.0 pack here on this site, adjusted the whole ray opacity to 50 and added a pre made speach bubble in the middle and thats it :)

by:http://gimp-tutorials.net/node/153

2008-04-17T13:52:00.000+07:00

A friend of mine requested that i make a simple yet cool Vista style button tutorial for gimp, so here here is what i came up with.

Step:

1:

Create a new image, 200x100 would be enough.

2:

Create new layer and name it vistabutton,grab the rectangle tool and draw a 100px50 rectangle.

3:

Will need to creat a New Gradient for the vista button, in the Gradient Dialog click on new gradient then right click on the left point and enter the color 252525 and then right click the right end point and enter 9a9a9a...

still in the gradient Right editor, right click on the middle point and
select "Split segment at midpoint", then drag both new segments to the middle as shown below, then save.

4:

Grab the Blend tool select the new Vistabutton gradient we made and apply it from bottom to top, make sure its perfectly straight, if you make a mistake then press CTRL+Z to Undo it.

5:

Now will Create a 1px outline around the button by Right click on the vista button layer and click on "alpha to selection" Create a new layer name it Outline then go to select>Grow>1px.

6:

Change your foreground color to 424242 and fill the outline layer and finally setting the layer behind the vista button layer

7:

Zoom in to make it easy and and with the selection tool create a rectangle inside of the button as shown below

8:

Now will subtract the inner side of the rectangle we just created by either clicking on the "subtract from the current selection" button in the tool options or pressing CTRL while draw the rectangle

9:

Create a New layer, Grab the Blend tool and apply a solid White color to Transparent (FG to Transparent) Gradient from top to bottom ( make sure its straight) and finally adjusting the opacity to 64.

10:

Note* if make sure you you have the selection mode on "Replace the current Selection" after doing step 8. ok grab the rectangle selection tool and create another inner rectangle but this time at the bottom of the button.

11:

Grab the Blend tool, and in the Tool Options Drag the Opacity to 25 and change the " Shape to "Radial" now apply from the center and drag the blend tool around 100px down.

this is how it should look

12:

Grab out favorite tool and create a 1px gradient at the bottom of the button

13:

Grab the "Blend tool" and adjust the "Opacity" to 80 and Shape to "Radial" and applly it from the middle to around 95px down

should look like this

14:

Finally will Create the Reflection of the vista button by creating a rectangle selection half the size of the button,

15:

Set the Foreground color set to cdcbcb use the (FG to Transparent) Gradient and apply it from from top to bottom. your done! a Vista style button!

a sweet idea would be to make 2 different colors for rollover effect by changing the color of the radial gradient in step 11 to a blue color like here is an example of a blue version.

by:http://gimp-tutorials.net/gimp-vista-button

Folded Paper Tip

2008-04-17T13:50:00.000+07:00

Getting Started

The aim of this tutorial is not trying to create a realistic result so don't mention it :)

Open a new image 640x480 , now lets start

step 1

Will first draw the flat paper using the "rectangle select" tool , once you have drawn it hit enter to finish.

step 2

Grab the Path tool and draw a triangle in the corner of the paper, *tip always switch to Edit mode to close off a path

step 3

now if you don't already have the Path dialog on screen go ahead an open it from Dialogs>Paths , inside you will see the path we drew, right click on it then click on "Subtract

step 4

Create a new layer and Fill your selection with solid white using the the "bucket fill" tool. go to filters>light & shadow>drop shadow in the dialog set values to
offset x: 0
offset y: 0
Blur radius:9
color 8f8f8f
opacity 80

go to Select none to remove the selection.

step 5

draw another path triangle and in the "tools option" dialog click on "Selection from path"

step 6

Create a new layer grab the blend tool select the FG to BG gradient from the tools option then set your bg color to white and your foreground to eaeaea

step 7

still with the blend tool selected apply it from the top corner of the triangle to the center bottom as shown in the image.

step 8

deselect go to filters>light & shadow >drop shadow and set the values to
offset x: -7
offset y: 2
Blur radius:9
color 8f8f8f
opacity 40

then move the piece 1px down and 1px to the right so that it cover some of the shadow in the corner

step 9

Select the "blend tool" and apply the same gradient in step 6 from top corner to bottom as shown in the image

thats it your done!

here is what i originally made the paper for, to place an icon for one of my shortcuts :) this outcome seems to have turned out better because i used a lighter gray in the gradient so try that.

You can download the XCF file from below , also if you need help please use the forum instead

Simple Web Design

2008-04-17T13:43:00.000+07:00

Many of the visitors to this site, and many of the people I've dealt with, are small businesspeople, who can't afford to have custom website design done by a professional web design firm.

Their only option is the "design your own website" option. A large number of these people haven't designed a website before, and only want to do one web design project - their own site.

The idea in their head seems like the best web design concept ever, but when it finally gets onto the screen, it doesn't come out as planned, and ends up looking very amateurish.

If at first you don't succeed, stop trying so hard

The problem is that graphic web design is not an easy job, and everyone's first web design attempt is always a "learning experience." :)

A lot of websites look unprofessional because the designer has tried too hard to make the graphics look good, without knowing what they're doing. If they just hadn't tried as hard, the site would have looked a whole lot better.

A reasonable number of pages on the internet fail my "blank page test". In this test, I look at a page. Then I cut and paste the text from that page into a blank page. If the blank page version looks better, they have failed the test. All the designer's work served only to make their page look worse :D

It's better to have no graphics than bad graphics.

This tutorial demonstrates one of the simplest ways to make a decent-looking website and avoid any risk of having bad graphics.

1 – Creating a web page title

Type in your header, and make it very big. The font can be a serif (curly) or sans serif (non-curly) font. I've used the "Trebuchet" font style here.

Set the tracking (spacing) of the text to -100, to condense it. (In Photoshop 6.0 or Photoshop 7.0, you'll need to click Window > Character first.)

Change the colour of the second word (or central word if you have three) to a red-orange colour. Leave the rest black.

Save the image for the web. Jpeg, Quality 60.

The reason that black and orange are good colours in this situation is that black contrasts with the white background, and orange contrasts well with both black and white. Orange is also a colour that doesn't really "say" anything, like red, green and blue do.

2 – Creating a navigation menu

Create a new image in Photoshop, around 30 pixels high by 550 wide.

Fill it with the same orange you used in the header.

Use the Type Tool, and insert appropriate white text for your navigation bar. To separate out the words, put a Bar between each word (press Shift + \)

Click File > Save for Web.

3 – Putting the pieces of your web page together

In your web editor, set up your page as follows:

Header image

Navigation Bar (use hotspots / image maps to make parts of the image into links.)

Borderless table, 550 px wide, with your text in it.

Navigation Bar (again)

Footer. e.g. Copyright info (Use size 1 grey Verdana text.)

4 – The finished product

Welcome to WebsiteOne

WebsiteOne is a leader in web design and graphic design. Feel free to look at our web design portfolio, and see some of our previously completed web design projects.

We are a professional web design company and can provide the latest in web design and graphic design solutions.

Our Web Design Packages

We provide various web design packages, suitable for professional businesspeople or small companies. Please contact our Web Design department if you have any further enquiries about web design.

Blog Theme Design tutorial

2008-04-17T13:41:00.000+07:00

Getting Started

Creating this template is very easy, it just needs some patience and a little effort, so what ever you do. don't give up.
here is the outcome of this tutorial.

Click to Enlarge

hopefully a member of the forum will help out in coding this template to a working wordpress theme, so keep an eye out for it :).

Updated

the theme has been converted a wordpress theme to see a live demo of the them or download click here

before we jump into this gimp tutorial ill need to remind you that i will only go into details of how to do cretin techniques once and then ill just describe it briefly when ever its repeated so pay attention.

Step 1:

Create a New image at 1024X900 and fill the background image with the color 3f3534 adjusting the zoom rate to %50 as i did might to help you compare your progress with mine.

first thing will do is create the content box's transparent border. this effect is easy and gives a nice touch to the design.

Step 2:

make sure you have the "Tools option dialog" on your screen,
then start off by Grabbing the "Rectangle Select tool" now draw a Rectangle at any size and in the "Tool option dialog" adjust the position to 98 and 150 and size to 590x695.

if you did that right you should have something like this.

Step 3:

while the selection is still active, in the "Tool Options" dialog Tick the Rounded Corner Box and change the Radius value to 13.7

once your done you can click inside your selection to finalize your changes.

here is how it should look.

Step 4:

Create a new Layer and name it "Border Main content box", now fill your selection with Solid White. then change the Opacity to 50.

now that we have the border set we can create the actual base of the content box with a few simple steps.

Step 5:

Right click on your image and the then go to Select > Shrink. now change it to 5 then press OK, below in the example image is how your selection should look by now.

Step 6:

as in step 4 Create a new Layer name it "Main Content box" and fill the selection with Solid White. you can un-select everything by going to Select> None. *Tip make sure the Transparent layer is Below the "Main content Box" layer.

Now that you know how to create these content box's with there borders i won't go through them again instead ill just briefly mention what to name the layers and the values like size,position... etc.

Step 7:

will start with the search box .

Create a new layer name it :Border Search Box
With the rectangle select tool draw a selection and change values as the following:
position:697:150px
Size: 229x65px.
Rounded corners: radius to 13.7
Color Fill:Solid white
Layer Opacity:50

make sure you have the selection from the border search box still active,now right click then go to Select>Shrink at 5px.
Create a new layer name it "Search box base" fill with solid white and unselect the layer by going to select>none. this is how yours should look.

Step 8:

The Menu Box

Create a new layer name it : Menu box Border
With the rectangle select tool, draw a selection and change values to the following:
position:698:225px
Size: 228x360px.
Rounded corners: radius 13.7
Fill Color :Solid white
Layer Opacity:50

Create new layer name it: Menu box Base
with the selection of the menu border layer still active, right click and go to select>Shrink 5px, finally fill with solid white. and unselect by going select>none

Step 9:

2nd Menu Box

Create a new layer name it : 2nd Menu Border
as we have done a few times now grab the rectangle select tool, draw a selection and change values to the following:
position:698:594px
Size: 228x249px.
Rounded corners: radius 13.7
Fill Color :Solid white
Layer Opacity:50

Create new layer name it: 2nd Menu Base
with the selection of the 2nd menu border layer still active, right click and go to select>Shrink 5px, finally fill with solid white. and unselect by going select>none.

you should have something like this by now.

so far we have made all the main components of the website now its time to add some nice brushes to the background.
i used the Floral Brushes set by solenero73 , you can use your own if you wish, the trick is to apply the brushes on each corners but don't go too out of control with it, the less you use the better.
you can download them from here: Download the floral brushes here.

Step 10:

once you have downloaded and installed the brushes have your foreground color set to fffe87, Create a new layer and name it "Floral effect" and place the layer just after the background layer.

now smartly place the brushes around the corners, see my result.

Now its time to create the top menu buttons, depending on how much you intend on having you might want adjust the width, in this gimp tutorial i intend to only have three main buttons.

Step 11:

Button/Tabs

you might want to zoom in to 100% to make it easier.
Create a new layer name it : Tab border
grab the rectangle select tool, draw a selection and change values to the following:
position: doesn't matter right now.
Size: 140x62px.
Rounded corners: radius 13.7
Fill Color :Solid white
change Layer Opacity to 50

Create a new layer name it: "Tab base" and with the selection of the "tab border" layer still active, right click and go to select>Shrink 5px, finally fill with solid white. and unselect by going select>none.
this is how it should look

that part was repeated many times but now here comes something different. what we are going to do is merge the two layers that make up the tab button so that we can add some changes to it later on.

Step 12:

to merge the two tab layers you need to hide all the layers we've created, except the final two which are the "Tab base" and "Tab Border" layers. to do that simply un click the "EYE" icon shown beside each layer.
you layers dialog should look like this

Step 13:

once you have that done, right click on the tab base layer and click on "merge Visible Layers" in the Merge Layers window keep it on its default "expanded as necessary" then hit OK.

Step 14:

now its merged into one image go ahead and change its name to just "Tab" and display all the hidden layers by clicking on the eye icons again.

before we put the tab into position we want to delete part of the transparent borders on tab so when we overlap the tab above the content box it blends in perfectly. you might want to zoom in to about 200% to make it easier.

Step 15:

Grab the "Eraser tool" then go to the brushes dialog and create new brush with the values set as the following
Radius:18.6
spikes:2
Hardness:1
Aspect ratio:1
Angle:0
Spacing 0

then name it what ever you like and save it.

Step 16:

place the tab above content box and using the eraser and brush we created, eraser the overlapping border, you might not get it the first time so keep trying took me 1 min to get it right.

Step 16:

now duplicate 2 more tabs and space them out evenly as shown in the image below.

Time to create the menu buttons for the category side I'm going to use two colors the blue for mouse overs and the gray for normal status.

Step 17:

Grab our favorite tool the "Rectangle select tool" draw a rectangle and enter these values in the "tool options" dialog.
Rounded corners: 62.7
Position 708:253
Size:206x30px

once you have the oval shape fill it with the color 36afdc.

now will duplicate a few more menu button but this time changing the color to gray.
Step 18: right click on the menu button and click on "alpha to selection" create a new layer name it "Menu button 2" then fill it with this color a09999

Step 19:

now duplicate 5 of these menu button name as menu1-menu2 etc.. and space them out evenly like as i did in the image below.

now we need to create three more rounded buttons for the titles of the links that will be placed at the bottom.

Step 20:

Create a rounded rectangle using these values
Create a new layer name it "Bottom content buttons"
Rounded corners: 5.0
Position:309:640
Size: 168x32px
fill using the color d2d2d2
duplicate 2 more of them and place them evenly at the bottom of the content box.

now we will create content dividers that will go between each post.

Step 21:

Grab the selection tool and draw a 563x1px rectangle which is basically a line, once you have that right, duplicate it twice and place them as i did in the example below (notice the blue arrows).

Step 23:

we should have done this before but anyhow make sure you add another rounded button for the search fild with these values.
Create a new layer name it "Bottom content buttons"
Rounded corners: 5.0
Position:717:166
Size: 168x32px
fill using the color d2d2d2

so far we're done with the main layout and can now move on to adding icon/content elements which will really make it look good once its done.
we will start with the icons. fist of all i didn't create these once to save time i instead bought them off istockphoto, its pretty cheap so unless your going to make your own you might shell out a few cents and buy some.

Step 23:

your going to need a search,RSS, and a Comment icon. now i don't think i need to explain much here so just look at where i placed mine and do the same. try not to have icons bigger than 32x32.except for the RSS icon see what matches. here is what i picked off istockphoto

and my placements seen in this example.

now for the content. its probably the hardest part when starting from scratch, laying out content is key to great design, you can have a perfect design but if you don't place content in just the right place and style it can ruin everything. so pay attention to where i placed mine and notice how i try my best to keep white space equally on the sides all the time.

since all i did was add text ill try to give a few pointers for when you apply your own content.

- images in post should be consistent i gave my self around 128x128.
- i used the font "Trebuchet MS Bold" for everything except the right category buttons, i used "Verdana Bold"
- here are all the colors i used for text.
Headers, Blue"36afdc"
post text, light brown "939191"
bottom lists, medium brown "5f5b5b"
Dates in post, "d2d2d2"
Comments count, "3f3534"

so thats it! there you have a great blog theme design created in gimp. you might want to modify colors and other elements to suite your taste.

the gimp XCF source file is attached at the bottom of the tutorial.and one last work give credit where its dew.

by:http://gimp-tutorials.net/blog-theme-design-with-gimp

Blog Tutorial - Tips For Blog Templates & Blog Design In Photoshop

2008-04-17T13:40:00.000+07:00

Definition Of A Blog
So what is a blog? According to Wikipedia (a great source of constantly updated info), "A weblog, web log or simply a blog, is a web application which contains periodic time-stamped posts on a common web page. Weblog is a portmanteau of 'web' and 'log.' The term blog came into common use as a way of avoiding confusion with the term server log."

Let Your Blog Make A Splash
Once you choose a blogging service and set up an account, you will be provided with a standard blog template. But this template will suffer from a cookie-cutter design, and if you don't personalize it your blog may become lost. To be noticed your blog needs to make a splash - as there are more than ten million blogs out there. So what we'll concentrate on here is working with some design elements that can help you add more zing to your blog. At the end of the tutorial you'll find a list of free blog resources, and as a special bonus I've included an amazing martini recipe.

Give The Top Logo/Banner On Your Blog A Personal Touch
Whatever blogging software or service you decide to use, all of them will present you with a generic graphic for the top of your blog pages. This is the single most important element that you need to change.

What you will need is your own image, and a font to create a simple title, tag line or logo. If you are not good at drawing or feel design-challenged, then go straight to one of the online stock photo services and splurge. There are also lots of free sites (see our free stock photos page), or you can try a service with minimal fees, like istockphoto.com.

I spent 15 minutes there and found a nice illustration from Jennifer Borton of some girls with martinis, and it cost just $3.

Welcome To The Martini Girls Blog
For the purposes of this tutorial I'm going to create a fictitious blog called The Martini Girls Blog. First I'll show you the WordPress template as an example of a generic banner.

To customize your banner, obtain the exact dimensions of your template banner from your blogging service and use the same dimensions to build a replacement. I'll use the graphic I bought online, and then add some text using one of my fonts (Snowboard). If you're bored with your fonts and need a new snazzy one, see our free fonts page for a list of great sites that offer them.

So here's the new banner that I built in less than 5 minutes.

If you're not sure how to construct a banner using Photoshop layers and the type tools, have a peak at my website template tutorial, where you'll find all of this explained in detail.

Time Out For A Martini Recipe
Once you've got the banner done, reward yourself with the most wickedly amazing Martini ever - the Lychee Martini. Use 1 ounce of premium vodka, 2 ounces of fresh lychee juice, and some ice. Shake and strain into a martini glass. That should make the rest of this tutorial a whole lot easier to handle.

Simple Photo Borders That Make A Difference
When posting graphics and photos on your blog pages try adding a simple border to them by using Photoshop's stroke command. Not only will this help your photos to pop out from the page, but it will also add another design element for people to associate from your site. Below are examples.

The first graphic has no border. The next one has a 2 pixel stroke of black applied. The third one has an 8 pixel stroke of dark gray with an additional 2 pixel stroke of lighter gray applied. That one's my favorite.

To create your own border, with your photo open go to the Select menu and choose Select All. The rest is a relatively simple operation using the Edit> Stroke command. Photoshop will prompt you with a menu asking you to select a pixel width and a color. To create a double color border, repeat these commands, but use a different color and width for the second stroke. This is one more nice touch that you can call your own.

I, Designer - Rise Of The Color Picker Robot
Another important element in your design will be the overall color scheme of your blog. If you're new to design this can be a real challenge, as it takes some training to understand how colors work together. But there's help. WellStyled.com offers a great color scheme generator that will make selecting a color palette for your blog pages effortless.

The site provides you with a color wheel to experiment with. Each time you select a new color on the wheel, complementary colors for your page are suggested. This allows you to choose from many different color schemes before you commit to one for your blog. Make sure to read through the help section where you'll find some valuable tips on how to generate the optimal color palette.

Build A Favicon And They Will Bookmark It
A Favicon is a little custom icon that appears next to a website's URL in the address bar of a web browser, and they are easy to make. Read through my favicon tutorial and you'll have one built and online in no time.

One of my favorite favicons is at CitrusMoon. As you navigate through the site you'll notice that on some pages the favicon changes color, which, I recently discovered, is because they have more than one. That's a really nice touch.

So there you have it. Nice banner, nice photo borders, a nice color scheme, and a nice favicon — or maybe more than one. Now I'll point you to some other resources that can help you with your blog's look. We'll start with a blog design that I find very inspiring.

Karen Cheng's Blog 'Lady Of Leisure' - The Beauty Of Simplicity
Karen Cheng's blog has been nominated for several awards, including the 2005 & 2006 Bloggie Awards as the Best Designed Weblog.

She says she wanted her blog to feel like a sketch book, and she's done just that. Everything looks hand drawn, and this is what gives it its charm.

I really love the way the photos have ragged edges, and how her date separators are all a little scraggly. I also find there's a very peaceful and friendly vibe to the site. This is a beautiful example of how to create a blog with a look that is totally personal and unique by using very simple design elements. And Karen does it all in Photoshop.

But if you feel you can't design something like this and want to get a blog site up quickly, then what you need is a ready-made template. Read on.

Free Blog Templates, Blog Layouts, And Blog Skins
Start at Blogger Templates, where you can find original skins to personalize your own weblog. Even if you don't use one of these blog templates, you'll certainly get a few design ideas from the many different blog skins they offer.

At Blog Fashions you'll find an assortment of blog templates that are compatible with Movable Type, which is another popular blog publishing platform.

At BlogSkins you can view "...designs from some of the best people around the blogging community, and instantly and easily download them to your own Blogger, Movable Type, or other-powered site."

Elated Page Kits has some really nice blog templates as well. There are over 40 free PageKits (web site templates) available here. You can download the entire PageKit, including HTML and graphics, in .zip format, and you can also download the PSD (Adobe Photoshop) files for a 'Kit, so that you can customise the menu options and images.

Free CSS templates can be a dime a downloadable dozen these days, but few sites offer a selection as extensive and easy-to-use as Layout Gala. Over 40 free templates are collected here, each created using identical HTML by Alessandro Fulciniti. He's covered just about every imaginable layout for a blog or website template – there are fixed, relative, centered, right-justified and left-justified options, and every combination thereof.

Free Blog Backgrounds And Textures
For pretty backgrounds look no further than the amazing CitrusMoon site. You'll find some very beautiful free patterns here for making tiling backgrounds, which are great for blogs. Start on the patterns page and you'll see a list of categories. For more sites which offer free backgrounds, see our free textures page.

A Font For The Asking
For fonts I suggest a quick stop at FreeFonts.com. Right on the front page, on the right side, you'll see a list of popular fonts. Click on one of the links and you'll be presented with an assortment of fonts to choose from. I really like the handwriting fonts. They give a personal touch that is missing on a lot of blogs. For more sites with free fonts see our free fonts page.

About Those RSS Buttons
At some point you'll ask yourself what all those little buttons are on blogs that have "RSS" or "XML" in them. RSS is a way to send your blog headlines to people who have newsreaders. This tutorial from Danny Sullivan explains RSS. The tutorial will also teach you how to create your own RSS feed. Now about those buttons...

They're easy to build in Photoshop. They're set at a standard size of 80 pixels wide by 15 pixels high, or you can let the ultra-modern automatic RSS button-making machine available at FeedForAll create one for you. Sweet. You can also just download our RSS button.

Sweet Rewards - How To Make Money With A Blog
One way to generate income from a blog is with Google AdSense. Setting up an account is simple and so is implementing the code. The hard part is figuring out which ad types to use and where to place them. But don't be put off by this. Just experiment and see which ones return the best results. Common wisdom is that 2 weeks is the optimum time to test your ad color schemes and ad placements. Sign up for AdSense..

For lots of insider information about AdSense and other advertising options, including the latest tips and news, read through JenSense - Making Sense of Contextual Advertising.

Plan B — Let Someone Else Design Your Blog Site Template
If you are on deadline and can't cope with learning any more Photoshop techniques or HTML, here's another solution. You can buy a ready-made template from Template Monster that you can use as a base to create web pages for a blog in Photoshop.

On the front page of Template Monster you'll find a pulldown menu where you can select options and then carry out a search for a template. The templates are reasonably priced and pretty easy to manage in GoLive or Dreamweaver. In the past I've purchased a template solely for the color scheme and the images. On certain projects I found this was less expensive than buying stock photos. Visit Template Monster to see the wide variety of website templates that they offer.

Another solution is SiteGrinder, a Photoshop plugin. All versions of SiteGrinder generate web pages with graphics, styled and even scrolling web text, rollover buttons, popups, and multi-level menus. Interactive elements can be constructed from graphics, text, or a mix of both, and function across multiple web pages that are automatically linked to one another.

SiteGrinder uses the names of your layers to generate pages. You simply add hints like "-button," "-rollover," and "-link" to the end of your layer names, then open SiteGrinder from Photoshop’s File> Automate menu and click the Build button. SiteGrinder can create an entire website containing styled text, rollover buttons, popups, text and graphic menus — all from the layer names in Photoshop. Mac OS X and Windows versions of the SiteGrinder unlockable demo are available now via download.

And Now For Some Inspiring Tunes
One last thing. For inspiration while you're working all-nighters perfecting every last detail, tune in to David Byrne's wonderful radio show. Wow. It's crazy when you find out about something this good, because it makes you wonder what else you might be missing.

Know how I found out about it? Yes, from a blog. It was from tech journalist Xeni Jardin at Boing Boing, which is another interesting blog to have a look at.

I've included an index of all the blog resources just below.

Now go build the best blog ever! But first have another lychee martini...

Planning your Website

2008-04-17T13:39:00.001+07:00

OK, so lets get started. Before we do anything, lets make a list of all the things that we'll need to look at and consider in order to build our site. Just like any other major undertaking, there are two basic steps, the plan and the execution. If we concentrate on developing a thorough plan, the execution will be effortless.

Before we Start

First and foremost, you'll need to define exactly why you want to build a website. I.e., what are you trying to accomplish? Are you building this site in order to create a web presence for your business, or will this website be your business? Is your site going to be an entertainment based website? Are you building your site in order to satisfy your own interest in web design and the internet? Whatever the reasons, you will need to (at least in your own mind) know exactly what they are. This will be extremely important in terms of evaluating your success and determining if your site meets your goals.

Organize the Contents

Second, before you ever touch a PC, you should design your site's layout. So many people jump right into the "doing" without ever thinking about what they are doing. A good way to start is simply by taking a pencil and pad of paper, and roughing out the hierarchical structure of your website. Start with a box for your home page on top, in the row below it, draw a box for every primary topic page, and in the row below that, a box for every subsidiary topic page. When you're done, you'll have something that looks like this:

Let's say, for example, your site is about Pet Care. Your home page would introduce your site, and develop your site's theme and purpose. One way of laying out the site would be to set up the Primary Topic pages by type of pet, e.g., the first primary topic could be Dog Care, the second could be Cat Care, etc. Each of the subsidiary topic pages could then provide categories of information for each pet type, e.g., under the Dog Care primary topic you could have Dog Breeding, Dog Health Tips, Dog Products, Dog diseases and their symptoms, etc. The number of subsidiary pages would of course depend on how deeply you wanted to elaborate on the main topic. Some of your subsidiary pages may end up having their own set of subsidiary pages. For example, the Dog diseases subsidiary page could have a page for each disease. The important thing to keep in mind is that we want to maintain a hierarchical structure. Doing this will help simplify some of the other aspects of website construction. We'll get to those later.

Page Layout

Now that you have a first cut at the structure and layout of your site, you can start doing a rough design of your pages. This is where the fun begins because no single page can be designed in a vacuum. Each page must take into consideration the content of the rest of the pages on your site and the relationships between it and the remaining pages. I feel this is one of the most important considerations in designing your site. Shown below is one of my favorite page layouts.

My primary reason for recommending this layout is because its basic design makes it relatively easy to set up and maintain. And, it provides a format that accommodates all the attributes that make for a well designed and effective website. If however, you prefer a different layout, that is perfectly fine.

Maintenance Considerations

Especially for novice designers, an often overlooked aspect of initial site design is ongoing maintenance. It's only natural to focus on creating and launching your site, without giving any consideration to the ease with which subsequent revisions will be made. However, by giving this area a little thought in the early stages, you'll be saving yourself time and headaches down the road.

The important areas to consider are those that repeat from page to page. This will typically be your navigation links, header info and footer info. Unless you're using an HTML editor that allows you to define these areas once, and then supports global revision and automatic inclusion of these areas into each page of your site, you'll want to define an underlying structure that will allow for this same functionality.

FrontPage accommodates this via themes. If you're not using FrontPage, a good alternative is Perl scripts that are invoked via Server Side Includes (SSI). Don't let Perl/SSI intimidate you. Writing simple Perl scripts that display HTML and then invoking them via SSI is a relatively simple and easy to learn concept. Most of your script will be the exact same HTML that would reside on your page and you'll only need a couple of lines of Perl code. The hardest part will be making sure that your hosting services supports SSI processing. If you'd like additional info on setting up SSI's, just send me an email with the subject line "SSI Info" and I will send you a short overview and a sample Perl script.

Congratulations...

You have created a basic structure for your website. You know what your site is about, you know how it's going to be laid out, and you know what the basic design of each page will be. But don't start filling in the pages yet. First, let's spend some time talking about the homepage, its purpose, and how to make it effective.

Modern Web Design Style

2008-04-17T13:35:00.000+07:00

For this tutorial, I'm taking a temporary departure from realistic lighting, smooth bevelling, metallic effects, and soft shadows... :)

Welcome to a world of sans-serif fonts, monocoloured areas, objects that don't cast shadows, colours that don't contrast, and text saved as picture files.

Modern-style web design, also known as the "Microsoft style" has become the most common form of web design these days. It presents web page elements not as realistic images, but as neatly arranged diagrams.

This tutorial goes through the steps to making a website in this style.

1 – Creating some header text

Choose a sans-serif font (a font with no curly bits), such as Verdana and write a title. Don't put a space between the words - just make the first word bold and the second word grey.

In Adobe Photoshop 5.0, you'll have to use the text tool twice - once for each colour. In Adobe Photoshop 6.0 and 7.0, you can just select the second word and change its colour.

Click File > Save for Web. Choose Jpeg, Quality 60. Do this for every image in this tutorial.

2 – Creating the menu

Create a thin image like this one and fill it with the colour of your choice. (This orange contrasts with both black and white.)

To help cut up the large orange area, it's good to create a lighter watermark area.

Make a new layer with Opacity set to 20%.

To make the shape I've made here, select an oval-shaped area. (Hold down on the Rectangular Selection Tool to get the Elliptical Selection Tool.)

Then, to extend the selection downwards, hold shift and select a rectangular area .

Fill the area with white.

3 – More watermarking, and some text

Right-click on your watermark layer, and select Duplicate Layer.

Click the new layer in the layer list.

Select the Move tool. Press Shift+Down Arrow about ten times. Holding shift makes the item move much further with each press.

Put in some white menu text, again in a sans-serif font. White doesn't contrast very well with orange, but it's still readable.

4 – Colourful titles

Create a new, small, rectangular image as shown.

Fill the image with a new colour.

Put in some sans-serif (non-curly) white text.

Click File > Save for Web, then change the text, then change the colour (by pressing Ctrl+U to bring up the Hue/Saturation sliders.)

5 – Picture icons

Choose a few pictures that are relevant to your site, or to something new that's on your site.

With the Crop Tool, start selecting an area of your image, then hold Shift, to make your selection square. (In Adobe Photoshop 7.0, press Enter once you're happy with the area you've selected.)

Click Image > Image size, and set the size to about 70x70.

6 – Making a web page from the pictures

(These instructions are accurate for Microsoft FrontPage, but other editors should be very similar.)

Insert your title image above this table. Right-click the page, choose Page Properties, and set the background colour to a dark colour.

4: Set the background of this cell as your menu image. (This allows you to put text on it.)

2: Cell width = the width of the menu image. (Right-click this cell.)

Background colour = colour of bottom of menu image.

Cell alignment = Top (Right-click this cell.)

Create a new table in this cell, with width and height equal to that of your menu image.

1: Create a 3-cell table - width 630 pixels. No borders or cell spacing/ padding. Right-click it the table and set the background colour to white.

Cell width = 630 pixels minus the width of the left cell and the right cell.

3: Cell width = the width of the menu image.

Cell alignment = Top

Put another table here, to put your text links in.

7 – The completed web page

____________________________________________________________________

Home
Information
Products
Services
Place an Order
Christmas Gifts
Special Offers
Promotions
Web Design
Store Locations
Contact Us

The three ways you can build a web page

2008-04-17T13:29:00.000+07:00

1. Use a pre-made template: WHAT IS A WEB DESIGN TEMPLATE?

A web site design template is a pre-made web designs which can be customized to reflect your company's branding. Website design templates can be found in various formats like Photoshop and HTML. Many times, these templates are compatible with HTML editors like GoLive, FrontPage, and Dreamweaver.

Web site templates can be very useful; they can be used by experienced web designers to 'jump-start' the creation of a website. They are also a way for people to put out great looking web sites quickly with little or no knowledge of HTML and web design.

2. Use an HTML editor like FrontPage or Dreamweaver:

HTML editors make building web pages feel like (to a certain extent) creating a document in Microsoft Word ... it's made pretty easy. But the downside is that you lose a certain amount of control of what you're doing and in some cases become dependent on the program.

3. Hand-code your HTML in a text editor like Notepad:

That means you type in the HTML code yourself. This is the approach we are going to use here, because it's the quickest way to learn how to build web pages, and it is arguably the best way because you have the most control over what you're doing.

Ok, now that we know the advantages of hand-coding web pages, let's jump into just the bare minimum of theory, then we will build our first web page!