Feedback on my website template (that I created in photoshop)

Soldato
Joined
1 Dec 2004
Posts
22,970
Location
S.Wales
After reading everyones view on how they go about designing a website doing it all in photoshop, I decided to give it ago.

Here is what I have so far..

template.jpg


Its nothing special so far, and the colors, well these will probably be changed at some point im just getting a feel for it.

I do however have a question though, is there anyway I can "Jazz" it up abit to make it look more modern etc?

Also with regards to creating the navbar abit better, do people create the text links in photoshop etc or wait until its all coded in XHTML/CSS?

Any info would help a lot :)

Thanks
 
At the moment, you have a few square sections, with blank colours. But as a basis for a layout, it's fairly typical - therefore fairly "safe"

For the nav - it depends how "jazzy" you want it? You can do some cool things with CSS to just tweak an UL, or if you want fancy graphics, it'll have to be images (use a single image but "shift" it left/right or up/down to display the section you want - it's quicker and less resource-hungry than having individual graphics)
 
At the moment, you have a few square sections, with blank colours. But as a basis for a layout, it's fairly typical - therefore fairly "safe"

For the nav - it depends how "jazzy" you want it? You can do some cool things with CSS to just tweak an UL, or if you want fancy graphics, it'll have to be images (use a single image but "shift" it left/right or up/down to display the section you want - it's quicker and less resource-hungry than having individual graphics)

Thanks for this, I dont think I would have the need at the moment to have any dropdown lists or "Jazzy" graphics in photosho, Ill probably create the navbar background in photoshop then use a pimped up CSS horizontal menu with some hover features which I think is what I am going to use :)
 
Last edited:
It's very pedestrian at the moment. You need to thing about making it more tangible; almost as an imitation of a real world object. Add glows, shadows, gradients, textures. Get some photos in there. Remember you're not creating a sign here, you're creating an interactive, user-controlled portal to information so it needs to feel like that :)
 
It's very pedestrian at the moment. You need to thing about making it more tangible; almost as an imitation of a real world object. Add glows, shadows, gradients, textures. Get some photos in there. Remember you're not creating a sign here, you're creating an interactive, user-controlled portal to information so it needs to feel like that :)

OK, im getting there, what I think im going to do is create the base template in photoshop, slice it up, then encoperate it into css divs. Then add the relevant text/links using CSS.

Using photoshop has allowed me to get a good overview of what exactly the site will look like, and it makes it so much easier to change things quickly with minimal hassle.

I will be replacing the solid colors with "Gradiant" colors later when I get home.

template2.jpg
 
Cheers.


1- What size do you create webpages in? Is there standard size that you do?
2- How do you create it into a webpage? Do you use dreamweaver? Any particular words you can recommend I can google to get pertinant advise on this.



Its looking great, Im liking the blue regions intermixed with the grey.
 
Hi,

In reply to your questions.

1) I usually use a base width for my container 960px, then the height, well it depends on how high and how much content I have, but as a minimum I would say around 650px (others may have a different view on this).

2) I used to use dreamweaver CS3 but now use Notepad++ and just do all the coding from here, I create the CSS file and create divs that are the same size as the sections I have created in photoshop. Once I have the css layout created I just go back to my design in photoshop and slice up each section and in the style sheet just import each section bit by bit into the corrisponding div.

This was my first pun at creating the whole design in photoshop, I used to do each element in photoshop seperatly but doing it that way made it hard to get an overview (on a single window) of what the site was going to look like.
 
Thanks for the reply.


Just need to learn CSS now lol.

Should have spent my years learning CSS not CS-S. :D

lol :p

CSS is pretty easy to pick up to be honest :)

Once you know what everything is and what everything does...I think the hardest part is coding it in a way that it will work well with cross-browser support.
 
-_-

I have designed my website in photoshop and have sliced it, going through some CSS tutorials now.


Cool :) im going to work on mine abit more later.

Post a screenshot when you can, would be interesting to see what you have made.
 
I am attempting to make my own website as well. I did some designs in Photoshop (which I posted in another thread last night) and I just now need to finalise these and slice them up.

Then, the next steps are a complete unknown to me. I have a bad feeling this 'project' will fall on deaf ears and nothing will happen because I am too impatient :(

I really need a photography portfolio though so fingers crossed.

EDIT: Oh, here are the designs I did - http://forums.overclockers.co.uk/showthread.php?t=18041698 (more further down in the thread)
 
Here is an update from tonight, not a huge deal of updates but I had to do some stuff for work!

Any tips appriciated and any ideas on how it can be sprused up abit more.

template3.jpg
 
Have you all tried sitegrinder from
http://www.medialab.com/sitegrinder/

You do all the design in Photoshop press a button and its creates all the code CSS for you you can get a demo from the site and watch a video

Hmmm, I got a funny feeling that with applications like these that automate the coding for you it will create messy and unorganised/unfamiliar code.

Would rather use my own, atleast ill know it will be clean and ill know where everything is.
 
Back
Top Bottom