Help - Search - Members - Calendar
Full Version: What Layout To Choose?
Zymic Webmaster Forums > Web Design & Development > Graphic Design > 2D Graphics (Photoshop, Illustrator, etc)
Banjo
Hi im Banjo and here are a few of my layouts i tried to do for my site, sorry they are not working demo's just a picture of it with a background at the moment, i don't know what to use so please may you vote for what one you like.

I may only use one of these layouts or another to get my site going then ill move onto getting a better one.

All of them are pretty much the same just a few differences like colour etc...

Also any suggestions will be appreciated and i don't mind good or bad comments.

Some of them only took a few mins because i was bored.

Layout 1
My thoughts:- This is very simple and very blue, i think that it may be to blue and the text is to big (But when it is sliced it will be smaller).

Layout 2
My thoughts:- The menus will be expandable and not have a big gap underneath the link thats just there because i couldn't be bothered to resize it. Apart from that no comment.

Layout 3
My thoughts:- Apart from being rubbish, this layout is very green and a bit like layout 2.

Layout 4
My thoughts:- Totally crap took a few mins.

Layout 5 content page
My thoughts:- Urm i don't know what to say about this. This is a content page of it, I could make a simpler version of it like change the top nav so it would have less images.

Layout 5 News page
My thoughts:- This is the same as the one above ^^^ but its the news (Home) page of the site. I could make a simpler version of it like change the top nav so it would have less images

Layout 6
My thoughts:- Too simple.

Layout 7 News
My thoughts:- Don't know what to say just did it. This is the news page of the layout.

Layout 7 Content
My thoughts:- Don't know what to say just did it. This is an example of a content page for it.

Iv had a few suggestions on colours on my last thread so ill probally do those later.

Thanks for reading
machine
I like the 2nd one. Looks sleek.
Diogo
#2 or #4 ...
Ill vote for #4.
But i think both need some modifications wink.gif
Banjo
Would rounded corners on the layout make it look better instead of it being a rectangle?
Magnus
#2nd is the best, but they all need some work.

The type you are using for the header doesn't look in place at all. If I were you i'd change the navigation from text to buttons and stop using >> or photoshop arrows. Work on fonts, that entire layout needs a new font, and the green blob needs shadows/details/something to make it more attractive to the eye.
Banjo
QUOTE
#2nd is the best, but they all need some work.

The type you are using for the header doesn't look in place at all. If I were you i'd change the navigation from text to buttons and stop using >> or photoshop arrows. Work on fonts, that entire layout needs a new font, and the green blob needs shadows/details/something to make it more attractive to the eye.


Thanks, i don't know any good fonts, anyway the text on there was just a example so are the arrow things.

Any suggestions to make it better? Like some goof font, maybe some links on how to make some cool banners because i cant find any etc...

machine
Yo Banjo smile.gif ,

Magnus is right. That font you’ve used doesn’t go with what the site seems to be about [or will be about] the fun you have at school. It needs a 'naughtier' font and a bit of that ‘messed-up-after-8-hrs-of-school’ look.

This is my suggestion. See if you like it. First of all don't use a regular or grunge-type font.

Use a graffiti font instead. Graffiti has all those cool 'angles' about it -- it's stylish, fashionably unconventional, colourful and has a very youthful flavour. Then [and only if you think you want to put in the time needed to make the rest of your site match the graffiti look], use a header/site title banner like these...
#1


and

#2


Remember: these are very rough suggestions, only to give you an idea of the 'look' I'm talking about. For #1 I've used a graffiti font called 'Aaaiight' and a dingbat called 'Squareheads'; and for #2 I've used a font called 'Subway' and a dingbat called 'Chickabiddies', but there are really loads of such fonts on the Net [see link above]. Plus you can use whatever colours you like to make it more colourful or to match the colours of your site.

In fact, I'd advise you to go out there with a camera and take some photos of walls [great backgrounds to use] -- clean walls, dirty walls, brick walls, walls with interesting stuff on them and then use them in Photoshop to come up with interesting ideas...
Banjo
Ah thanks machine ill try something like that rolleyes.gif
machine
It's not that hard, really!

However, you can use only the font/text [over your blue background] and not the wall.

'bye
iamandy
yea, #2 for me.. the rest of them look a bit naff'.
Cmain
Number 2 for me also. Try another template with a dark and classy look and see how it turn out.
Banjo
Ok thanks, sorry the ones iv posted arnt't that good im still learning.
machine
smile.gif As I said, it really isn’t very hard at all. Let me explain a bit and you’ll see for yourself.

Note: I have tried to list out all the steps only because you say you are “still learning” and not because I want to appear condescending.

1. Create a new document in Photoshop and copy-paste a background image. All other elements will go on top of this layer. In other words, this will be your background/bottom most layer.

2. For the graffiti, use a suitable font and type out your text.

3. Using dingbats [in case you are not very familiar with them]:
Dingbats are a quick way of adding icon-type images. Download one and install it as you’d install any other font [copy-paste it in your Windows/Fonts folder].

Once installed, you can type out the various dingbats in Photoshop [or any other application] just as you type your text, by choosing the dingbat from the Character window, just like you choose a font.

To modify a ‘ding’, right click its layer and choose ‘Rasterize Layer’. From that point on it becomes a bitmap/image element and you can use all your Photoshop tools [magic wand, erasers, gradients, brushes, pain bucket etc]. This is how the dingbats in the rough banners [#1 & #2] were created/coloured.

4. Then link and merge your dingbat layer with your graffiti text layer.
Linking: select the text layer and then click [in the Layers pane] the empty box next to the eye icon of the dingbat layer. A chain icon appears to show that the two layers are linked.
Merging: press Ctrl + e to merge the text and the dingbat layer into one single layer. Now both the ding and the text will be on one layer, but you can’t alter the text anymore. So before you merge them, make sure that the text is correct [check spellings etc smile.gif ].

Now you are ready to make the whole thing look as if it’s a part of the wall/background.

This is a quick way of doing it:
Select the merged [text + ding] layer and go to the Layer Effects choices [click the circular ‘f’ icon at the bottom left of the Layers pane] and choose Gradient Overlay. Choose a gradient and set the options [like Style, Angle, Opacity etc].

You can choose a different gradient by clicking the small triangular arrow next to the gradient preview area [to the left of the Reverse check box] and then by clicking the other triangular arrow next to the listed gradients. For the #2 image, I used the ‘Steel Blue’ gradient from the Metals category.

Once your graffiti is ‘covered’ by a gradient, use the Layer Stroke effect to create a nice meaty border around your text. Exit Layer Effects box.

Still on the merged layer, press Ctrl + t to enter Free Transform mode. Use the handles to rotate the [text + ding] layer to an angle of your choice. Then adjust opacity values and Blend modes [found at the top of the Layers pane].

Extra work: If you are feeling creative, open the merged layer's Blending Options -- the topmost option in the Layer Effects choices [click the circular ‘f’ icon at the bottom left of the Layers pane] and try out the Blend if options and the two sliders below [read the manual if you wish to understand the ‘science’ behind this process smile.gif ]. Adjust the sliders till your text gets a ‘written on the wall’ look.

Additional notes: If you want your dingbat to have a separate look or a separate set of effects, then simply don't merge it with your text layer. Then you can easily apply a separate group of effects to your dingbat.
stilgar
I like the last one. But it's too blue - i mean maybe you could add second color (green, darker yellow/orange, maybe soft red) and make it more fancy. Also you might try adding some nice graphics or some 3d image to the header, that could give it better overall look.
Banjo
Thanks Machine smile.gif will help me when i make a new one.

Oh and stilgar i don't know how to make snazzy banners or 3d ones so thats why there bland and boring. Also if i did slice a layout i would have different colour schemes for it smile.gif Thanks for the suggestions
akzuma
i like #2 the best. #7 is solid as well.
Vaisor
#2 or #4 look best

I'm not really a big fan of rounded corners though...
Excaliburg
2 - best
Aaron
- Settling the matter externally.
Cmain
I reckon it is a bit over inspired. If we catch you ripping anything Banjo expect a ban.
Banjo
I swear on my life i havent seen that before.

Sorry if you think i ripped it but i didn't. I can send you the photoshop file if you want so you can see iv done it all.

Oh and the filler text wasn't mine a friend sent it to me.

Anyway im not using any of those layout.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.