[Guide] how to make your own website with photoshop + sitegrinder

[Cook]

PLEASE DON'T SPAM THIS TOPIC

 

It Took me 2,5 hours to make this guide!

 

In this guide I will show you how to make a web site using nothing but photoshop and a plugin.

We’re going to be using sitegrinder. it’s an add-on for photoshop.

It’s really easy for new designers to use. You don’t even have to have too much knowledge on photoshop.

 

So first things first. Download Sitegrinder from here: http://www.medialab.com/sitegrinder/

You’re going to download a trial version (sux) because it puts the sitegrinder logo all over your page.

So either buy it or crack it. I’m not going to tell you how for obvious reasons.

 

On Windows you should be downloading a zipped installer application. Unzip and run the .exe. It will attempt to locate your Photoshop plug-ins folder. If necessary, you can guide it to your Photoshop plug-ins folder yourself.* Then complete the install and launch Photoshop.

 

After sitegrinder is installed run photoshop. Go to file-> new and make these settings:

 

 

 

Now create the appearance of the site. Like so:

 

 

NOTE: Site grinder works with tags so to make site grinder know what is what. you need to tag the layers.

            To tag a layer u need to add “-“ (without the quotes) and what you want this layer to be.

             For instance: to tell sitegrinder that background is the background picture you need to rename the layer to  

             this: bkgd-elements.

 

So rename the background layer to bkgd-elements. leave the rest as they are.

Now select all of them and click layer->group layers.

Rename the group to workspace or whatever you want. (just to be tidy)

 

OK now that we’re done with your workspace let’s go to containts of the site.

First of all you need to think what sections your page should have.

Let’s say mine has:

Home , Blah, BlahBlah . Next we have to make the buttons for each section so let’s begin

Create your button, it can be anything you want. even an image, or an icon etc.

Place the buttons on the box you want Or anywhere else for that matter.

 

 

Now you need to tag the button layers so that sitegrinder will recognize them as buttons.

So go to your button layers and add “–button” (without the quotes) after their name.

After that select all button layers and group them like before. Rename the group to Buttons.

 

Done with the buttons? No! why not add a glow when you rollover them with your mouse?

Making a button rollover glow effect is really easy.

Just Copy the buttons group, change the group name to rollovers, change the tags of the layers

from “–button” to “–rollover”, then edit the buttons to make them look however you want when the mouse rolls over them. Like this:

 

 

Allrighty! Done with the buttons now? Probably but you may also want to add a pop up when you roll over a button.

So let’s take an image of a home for the home button!

 

NOTE: you can always check how your site is going by going to file->automate->site grinder 2

            this window will pop up. Choose preview and click on built!

 

You will w8 for a while and voila!

 

 

You might be wandering what the hell is that white color behind my background! Don’t worry we’ll fix it later!

 

Let’s get back to the popup. Now that you got an image of a house or whatever. place it wherever you want it to be shown when  you roll over the home button. Then rename that layer to: Home-popup.

 

It should look like this:

 

 

Make popups for the rest of the buttons and put them in the same place. Group them and keep them visible.

Doesn’t matter if one is over another. Like this:

 

 

NOTE: For both the popup and the rollover effect to work the -rollover and the –popup must have the same name

            with –button layer Also all 3 layers must be visible.

            Like this:  Home-rollover

                             Home-popup

                             Home-button

 

I guess now we can’t do anything else on the buttons :)

So let’s continue with the contents of the site.

 

Let’s write what we want to be shown in the homepage.

First let’s create a title. Just create a new text layer. Write HOME and give it some effect if you wish. (glow etc.)

Copy the layer and edit the copied layers to match the buttons (in my case BLAH, BLAHBLAH)

Now rasterize all layers by right-clicking on the layers and clicking Rasterize type. Group these layers and name the Group, Titles. Keep only the home title layer visible for now.

 

 

Let’s move to the text.

Create a new text layer and make a text box by clicking and dragging with the text tool in your main workspace box. like this:

 

 

Write inside whatever you want.

 

-If it fits with no problem in the main workspace box. then name the layer to Home

and add the tag “-text” (without the quotes).

 

-If it doesn’t fit then no worries just resize the text box to fit the workspace after you’re done writing. and just instead of adding the “-text” tag, add “–scroll” as a tag. That simple :)

 

Do the same for the rest of the sections, group the layers, rename the group to contents or whatever.

so you should have something looking like this:

 

 

That’s about it!!! The page is done! of course my isn’t I have to add more buttons but I just did it to show you.

Now all we need to do is put the site’s pages together!  So go to window->Layer Comps.

With layer comps you can tell site grinder which elements you want it to show in each page.

 

NOTE: Layer Comps is available in adobe Photoshop CS and above.

            Also you must remember that buttons, rollovers and poups must always be visible.

 

So turn visibility of the layers on or off  to configure each page.

Let’s start by the home page for instance.

Keep these layers visible:

-The workspace of course

-All buttons

-All rollovers

-All popups

-Home title

-Home-text or –scroll

 

Then go to the layer comps window and click on this :

 

 

and click on New layer comp. Name the layer comp as you would name the page. Home for instance and add the tag

“-page” without the quotes.

 

 

Do the same for the other pages as well.

After that’s done it’s time to put sitegrinder to work.

Go to File->automate->Sitegrinder 2

 

Now we have to make some setting to make our page look good.

First click compression. choose Gif 128 Dithered or if you don’t like the quality of that experiment with a different compression.

 

Then go to pages and make these settings:

 

 

Then go to buttons. Make sure all the buttons are linked to their pages.

 

 

If some isn’t then click on the link and fix it like this:

 

 

Also this way you can make a button link to an external link like http://www.maxcheaters.com ;)

 

After that just click build and wait for your masterpiece.

The page should be saved here: C:/user/sitegrinderdata inside a folder. with the name of the psd file and a number In my case tutorial254.

 

That’s pretty much it! I hope I helped.

 

Download the outcome (I didn’t continue it):

http://www.4shared.com/file/197062444/5837051c/tutorialpage.html

 

Credits for tutorial go to me!!!

 

           

 

[ProJecT]

Credits to you? You did this all alone?! Images and other? If yes you deserver +1 karma.

 

Awesome!

[Cook]

Thanks

I swear to god I did! I even had a fight with my gf for not answering her messages :)

I'm not after karma by the way! wouldn't mind if I got a +1 but what I really wish is this topic getting stickied! :)

[CriticalError]

wow really nice guide man is good thanks a lot for guide and continues working :)

[™StarЯdoм®]

i am gonna try when i ll find some free time. thanks dude.

[mg13gr]

+1 by me

 

I loved it, rofl.

[Cook]

Thanks for the karma bro!  :P

I'm so glad you like it cause it took me quite some time to make :)

 

i am gonna try when i ll find some free time. thanks dude.

 

Np! :)

[NooBie]

Really good work, Cook that will help me to much ;) thanks

[TehJustNoName]

great guide... its going to help me a lot ;D