2 practice layouts - feedback?

[Mentor]

Well as most will know im awful at layouts, so in an attempt to fix this ive been playing about in photoshop.

So far ive completed two test layouts, and feedback on ether would be greatly appreciated, tips, criticisms etc

Layout one: Nature
http://img395.imageshack.us/img395/9314/naturelayoutmi5.jpg

Layout two: unnamed
http://img183.imageshack.us/img183/5118/cleanqf9.jpg

personally i much prefer my first layout, but what does everyone else think?

Thanks for anyone who gives feedback :D

[Oni]

Very nice, although im not to keen on the buttons on the first one, it looks abit dated. On the second one I like the bottom blue bit which is a slow gradient but not the top blue bit.

[VPSwow]

I prefer the second one, its more "classy". However i dont think the split gradient works at the top. It should be like the bottom.

Both look good though :D

[Oni]

The white line surrounding the blue box is too pixely, id get rid of it.

[Joltersoft]

Nice layouts, mate.

[wewt]

The first design is much nicer. The only thing I would point out is the curve at the top it's anti-aliased too well. Also, when using dummy text, try not to use anti-aliased text as you obviously can't use that when the site is live unless it's coded in flash or you're planning to use it as images. The second one I'm just not really fond of. Other than that, good work.

[YouFail]

The first design, in my opinion, is an 'outdated' style. I don't really like the buttons, as wewt said the curve at the top isn't exactly great. Saying that I do like the colours.

As for the second design; the drop shadow used seems like a very 'un-professional' effect, it doesn't look good, try lowering opacity. The top banner doesn't work well with the split colours. In my opinion it's too small a design and overall it just 'does not work'.

Thanks,
Rich

[myke]

Wow! That first one rockssss!

[Mr.OSH]

The first one is fairly nice with the exception of the buttons with don't really "go" with the rest of the layout, as already stated. The concept of the second one is good but the outline and glow effect in the background ruin the clean effect of the layout. Overall bother are fairly good, in need of a little work but as for 2 practise layouts, not at all bad. Well Done + rep. :)

[L!nK]

Hey there,

The first one looks really good and proffestional, i think if you carry on and making those sort of layouts, you will be able to get some good money for them ;).

As for the second layout, I'm not really sure, It's not eye catching I don't like the second one, but good try.

+rep

[OWNAGE]

The second one is good, however the corners are mucked up! Did you use PhotoShop?

They're OK though! I love the colours on the blue one! ;)

[Mentor]

Thanks for all the feedback everyone, im kinda getting mixed messages with the first one, some saying it looks really dated, others saying they really like it.
Although i suppose both could be true, although it is an older style it does seem to work, at least in my opinion.

The second ones a more uptodate style, although theres quite a number with problems with it.

Ozzie / OpenSourceHost: what sort of button style would you suggest i use with the first layout, as i cant really imageing much else that would fitting with the style?

OWNAGE: yup i used photoshop, do you have any advice on how corners should be done though? currently i tend to just use the rounded corner retangle tool, although im not sure if thats the best method.

Other points ive noted:
- Dont use drop shadow
- Make corners more anti-alliesing
- Dont use anti-alliesing on the text
- split graditant doesnt work with number 2
- white line on blue box should be removed for number 2

[Oni]

A good tip I find for making layouts is use a dark grey background and base the whole layout on a white rectangle and add a drop shadow, it looks good. I always use it now.

[Ini]

Much prefer the first one to the second one, good work

[OWNAGE]

Hm, that tool is the one, but on your layout it looks a bit rough. An idea is:

Make the shape you want
Fill it in black
Contract by 2 (or however many) pixels
Fill in white
Contract again
Fill in black, contract the shape for the last time, and fill in white or whatever.

Should look better, I'd say, try it :)

[Mentor]

Ozzie: Have made note of that, thanks for the tip

OWNAGE: ok, although im not completely clear on what you mean when you say "contract" is there a tool used for this, or should i just use the edit/scale features?
Thanks anyway, will try in future.

In the mean time ive given another clean-ish style layout a go. I like some bits but not others. Feedback again appreated, loosely based on ozzies grey background tip:

Layout 3:
http://www.uploadz.co.uk/20winhamphotog.jpg

*Edit: i think i just figured out why my edges looked so rough, ive had anti-allising unticked on the shape tool the whole time :p

[:Edzy]

love it except the curves :)

lets just say, if they were rollercoaster curves, it would be a bumpy ride

well done anyway :D

9/10

[Ini]

WOW the photo one i love ;]

[Oni]

Good but id keep a clean background around #333333, remove the borders and make it completely square and add a slight drop shadow :)

[Ini]

I think the bg image suits it personally

[redtom]

Right....

Comments on first two

Well I can see you can actual layout the design in a good easy to use way whats a great thing, as well as that you have a great eye for colour, but I would say the great let down on your designs is the small things, like the bold text every where is a big no for me, I would use the font Verdana at 10 pt this should improve them but this is only dummy text so it's not really a big thing, the next problem is the lack of custom effects, most people over use on effects but your different, you don't seem to use them must but when you do they seem to be set around the default setting for photoshop, I think you should try and be more brave with the way your using effects, the only thing left to comment on for the problems is the lines/borders, you should try and clean them up a bit.

So to some that up;

Clean up borders
Change text
Experiment more with effects

Comments on 3rd design

Well this is looking very good for the style of layout even with little effects, the logo/title is great in my opinion but you need to clean the borders on the owl images and I'm not to sure about the Gray border around the whole thing, try replacing the square with a rounded rectangle and then using the same border but change the radius to find whats right.

I hope that will help you and your layouts are looking really good so far.

[Puma]

pretty good templates well done =)

[Oni]

I did a quick mock up of what I meant but I had to do it in paint as I dont have the psd so it looks rubbish
http://img249.imageshack.us/img249/8769/owllayoutdb1.png (http://imageshack.us)

[ScottDiamond]

How do you make gradients in Paint?

[Oni]

How do you make gradients in Paint?
Manually line by line then stretch it across and rotate it. I used to make all my layouts in paint, but meh.

[ScottDiamond]

Manually line by line then stretch it across and rotate it. I used to make all my layouts in paint, but meh.

That would stress me so much lol.

[Oni]

That would stress me so much lol.
Takes about 3 mins max. I used to spend hours doing rubbish layouts in paint.

[:Jamie]

Can see your progressing your skills in doing layouts. First one, the buttons dont really go with it, On the second one the white line at the botom doesnt fit in well.

[Mentor]

Thankas again for all the new feedback, plus i may reattempt some of the previous ones useing the advice given.

Although im still unsure as what to do with the first one, everyone keeps saying they hate the buttons but im not really sure what else could fit in with the layout?

Redtom: What specificly do you mean by effects?


Also layout four. I attempted to do a clean layout of one of my friends companys (Logo and orchard cottage graphics were done by him)

http://www.uploadz.co.uk/299biliboclean.jpg

[redtom]

Redtom: What specificly do you mean by effects?


Layer Style effects (places with shadows and stuff) & Filter effects (the tab at the top named "Filter"), although filter effects arnt really used much with layers but when they are used in the right places and in the right way it's really good.

[Mentor]

Ok, i redid a few of the layouts accounting to the advice i got here.

Layout one, i changed the text and attempted to smooth some parts out, i wasn't really sure what to do with the buttons so have left them for now.

http://img240.imageshack.us/img240/3108/nature2layoutnu1.jpg
Original:http://img395.imageshack.us/img395/9314/naturelayoutmi5.jpg

Ive also redone the third one, to firstly try and incorporate some of the advice about making it clean and also again try and smooth some parts out

http://img490.imageshack.us/img490/7905/winhamphotog2zr5.jpg
Original:http://www.uploadz.co.uk/20winhamphotog.jpg

Finally, i also redid layout 4, since it seemed to bland/grey as it was, i tryed to make it a bit more colorful. I think it also comes of as being more "clean" this way also.

http://img394.imageshack.us/img394/6789/bilibo2cleanfx9.jpg
Original: http://www.uploadz.co.uk/299biliboclean.jpg

Comments, criticisms, tips, hints or any other feedback still appreciated as normal :)

[Oni]

The last 2 are ace!

[Mentor]

Thanks, the last ones actualy a layout now as well, my firend liked it so's go me codeing it up properly for his company :p
http://www.thybag.co.uk/test/bilibo/index.php
his old layout: http://bilibo.co.uk/

[Mr.OSH]

The last 2 are ace!

I Agree. Both are very effective, well done. :)