Indie-Resource.com

Hi all
i was wonder if there is a tut out there that can show me how to make a website like http://eu.battle.net/sc2/en/i no PHP and HTML but i dont no how to do the buttons and the background also a tut for making the buttons any help would be great.

This is a fairly simple website made with spectacular art assets. Have you viewed the source of the page? You could copy the source out and try experimenting with editing it (keep in mind you need to download the CSS files and any external JS files as well for it to function). Note that you cannot edit this page and upload it to your server, though, since all the code is copyrighted and completely restricted for public use. But nothing stops you from downloading it and learning from it. Without digging all through the code, it seems to be a fairly basic single-column fixed-width design with a picture background, some javascript effects and some pretty buttons and art assets.

For making buttons like that, you can use Adobe Photoshop, Adobe Fireworks, Microsoft Expression Design, Adobe Illustrator, or (the free option) GIMP. All of these would work, but some web designers prefer vector art editors (such as Fireworks, Illustrator or Expression Design) as opposed to bitmap editors (Photoshop or GIMP). Keep in mind, though, that these art assets were made by some very talented graphic designers, and it would require tons of practice and study to make something of this caliber. Blizzard typically requires at least 10 years professional experience to be a lead designer--the person responsible for creating the direction of the art on the website, and possibly the person responsible for creating most of it.

thanks for the reply ill do what you said to learn from it but th think i wanted to no the most is how to make the botton effect were it Hight lights when you hover over it and when you click on it. it stays lit up

Here is a simple Javascript code to produce what you see on that site. All that button is, is a mouseover or rollover effect.

image1.src = 'images/rollover1.jpg' and
image2.src='images/rollover2.jpg'

The above is assumed your images are stored in your images folder, if not then change the above. Also below, change http://www.yourwebsite.com to whatever your website address is. Now copy this and paste into your html body document:

You don't even need to type in that code for rollover if you have dreamweaver. There is an option to insert it into there. Try the free trial if your really interested in web design. As for the website and how it looks, that's just amazing artwork made by proffesionals with an amazing imagination. Nothing more to that. Just use photopshop or fireworks for that. Or you can use Gimp as it is free unlike the other two. But I highly suggest photoshop. Here is a website I found the other day with a grouping of 44 great tutorials on making these type of website templates (what the website looks like) and they use Photoshop as it is your best choice.

Baseball435 wrote: Here is a website I found the other day with a grouping of 44 great tutorials on making these type of website templates (what the website looks like) and they use Photoshop as it is your best choice.

What website? You didn't post it...

CSS alone can make rollover sites as well! Here are some tutorials:

CSS Rollovers
Another CSS rollover effect

EDIT: If you were really talking mainly about the rollover effect, they are quite easy to do. You can use any of the 3 methods listed in this thread: Javascript, CSS, or use Dreamweaver (which will choose to use one of the two other methods under the hood). You won't have to study and practice for years to just do that. I thought you were mainly talking about the complex art assets on the website.

thanks to every1 that reply ill take a look at them all to see witch is the best way to do it so thanks all

Oops forgot to post the website haha. Here it is.... http://naldzgraphics.net/tutorials/44-m ... photoshop/

thanks for posting the link there some good looking 1s on there im gonna follow witch is gonna be very helpfull so thanks