How to make this header?

[OwainGDWilliams]

hi!
Im looking at making a similiar header to this site: http://www.gotocss3.com/

I really like the clean hills and the rocks on the right hand side but for the life of me I just can't get anywhere near close to it!

Can anyone give me some pointers, I can use Illustrator or Photoshop.

O.

[Datura]

I do not quite understand what you do not understand

I always hesitate to give people advice on how to copy somebody else's work, it would be much better to develop your own style.

[OwainGDWilliams]

I understand where your coming from. I just really like the smooth lines and the colours used in that header. Not sure if its because I am using a mouse which makes it a bit harder or if I just don't have the know how to do something like that
When I have tried my own style it just looks so unrealistic and not even computer generated...just a mess!

O.

[Shaun(OfTheDead)]

When I have tried my own style it just looks so unrealistic and not even computer generated...just a mess!

Just need some practice.

Try sketching out what you'd like onto paper first. It's easier for the thoughts to flow from brain to pencil than brain to mouse.

I'm with Datura on this one... I'm not going to help anyone copy someone else's work. You'll never expand to your full creative potential if you develop that habit.

[OwainGDWilliams]

Ok, I will just get out the pen and paper and see what I can come with.

O.

[OwainGDWilliams]

What would be best to use, Illustrator or Photoshop. I think I have already come up with a different idea just need to work on the graphics. Will post when I have something to show

O.

[Datura]

What would be best to use, Illustrator or Photoshop. I think I have already come up with a different idea just need to work on the graphics. Will post when I have something to show

O.

That is a good attitude to get into go at it with your own ideas. Both programs work, I have Photoshop and like it for illustrations.

When you have something done and you post it, we can look at it and give you some pointers. Then we can give you some tips on how to go about a certain technique or usage of a tool. I am glad that you will try to go your own way

[LJK]

Hi -
Back in art school, some professor or another would invariably ask us to
"copy the masters" for an assignment.
I hated the idea at the time, but realized you definitely learn a thing or two about technique [and more] when doing so...

For learning purposes and not for plagarism outright, I think it's a great idea to try-out techniques you'd like to have in your arsenal! A great article I found the other day talks about "Vector Polishing Techniques" - by flipping back and forth betw. Illy and PS. You might give that a read.

Working only within your own style is possible for some people *after* you've been around and developed those chops, you know?

Others are luckier ;-)

Have fun,
El

[OwainGDWilliams]

Ok, started working on my own header and I need some help.....its just not looking the way it should and I don't know where to go with it to make it look more professional.

The image is here

What I want to have is the mountains in the background, some water which I can put some people kite surfing on and then some beach where I can put some pedestrians and some more kiters (can you tell its for a kiting website?).
Any tips, hints and techniques would be very welcome. I am aiming for the same level of professional finish as the original header I posted.

Look at it I may need to move the sky up a touch and also move the mountains up the canvas and make them smaller, this should give me a bit more room to play with but thats much further down the road...I just want to get the look first.


Cheers,
O.

[LJK]

Are you wanting it to look "professional" or are you trying a imitate the "style" of the header?

Yours is starting-out very realistic; your example image is more abstract and fantasy-like...is that what you mean?

[confused]
El

[Datura]

Hi O. I just took a glance at it and saw instantly one of the problems.

When you render a landscape, you have to create distance. You create distance by having the foreground saturated color, the middle a little less saturated and the color a bit grayed out, the third level pale and rather gray.

In your landscape, the foreground mountains are weaker than the mountains behind it, reverse the colors. The same goes for the water, reverse the gradient, paler to the back, stronger to the front.

You also have created textural detail on the mountains in the back, left the ones closer to the viewer blank. Reverse that.

Try to do this step now and see how it comes out, if it does not instantly make it better.

[Datura]

And another thought: When you let the water end at the foot of the mountain chain, you will have to put a reflection of the mountains into the water. That always gives a nice dimension to a rendering and it is what reality requires, even when highly stylized.

And to make it even better, you should have some of the mountains closer by and some further away (keeping it all stylized of course), that would create an uneven line as the "horizon", which is more desirable to a straight line. A straight line cuts a picture in half and takes dimension away.

I know it is all a lot to digest for you, but I find it important to point out those principles in the beginning, so bad habits do not have a chance to settle in.

Take some photos of similar scenes and analyze what is going on, really look at it and write those points down. Once you understand reality, you will be capable of stylization.

[OwainGDWilliams]

Cheers for the pointers Datura. Will give them all a go later today.

I think I am maybe getting confused at what I want. I do want a abstract /futuristic look to it but keep some realisism so people know its a beach scene. Am I taking off to much for a first project?

O.

[OwainGDWilliams]

Ok, I have taken on board what you said and made the changes.

The file is Here

Still looking very realistic and the more I think about it I may start again but not sure where to start to make it more fantasy looking.

O.

[Datura]

It is a good start

There are some flaws still in the way you rendered it though. Lets talk about those for now. When you understand them, you can go and stylize more to get to the goal that you have set. But first you must understand what reality is. Stylization is just a reduction of reality down to essences.

I will make a schematic (without style) rendering to explain those points, but I can not get to this right now, maybe later in the day or tomorrow. I hope that you are not in a hurry

[OwainGDWilliams]

Not in a hurry at all. Enjoying learning new stuff but it seems to be the month of learning a lot of new stuff for me. Currently learning 2 new progamming languages and trying to redesign a couple of websites!!

Look forward to your post and thanks for your continued help.

O.

[Datura]

I just committed a fetal error. I was almost 2/3 through with my little schematic scape, when it happened. My program closed on me and I had not saved the file. A good thing to remember always. I usually do, but not this time. So I will start over again

Remember not to do what I just did … Oh man, that is a killer

[Datura]

.



.

Here is my promised guide for you to glean principles out off. I kept this guide somewhat neutral. You will have to find a way to stylize in your own way. Usually that happens after you do a few, you will discover certain effects that you keep repeating and that you like. Eventually that will turn into your very own style.

• The first layer is a gradient. Lay it in after you have determined where your horizon is. Try not to cut the canvas in half, either make the sky higher or the ground/water a bigger section of the piece. Dark and saturated at the bottom, lighter and de-saturated on the horizon for the water. That goes also for any ground. The sky is also a gradient, light and de-saturated at the horizon line, saturated and much darker at the top.
  
• Then you start with the foreground, which has detail of some kind, texture or is even close to reality, depends on how far you stylize. I put a man in as a scale provider. It is always a good idea to take some object that most people are familiar with to give the idea of how small or large some scape is. We relate better to that.
  
• The landscape that is the mountain range is now designed in a layer under the foreground. Keep that foreground layer always as the top most layer, that way you can adjust the lines and the flow of the scape better. It gives a frame work and a guide how much you have to de-saturate and grey out the colors. The major mountains with the snowcaps is the first. It is in the midrange of saturation and lightness/darkness. Behind/under it, there is a second layer of mountains way in the distance, much paler and de-saturated, almost the same grey value as the sky at that point. The third range, the foothills, are now laid in front of the high/1st mountains. The foothills are darker and more saturated. Add a little beach, in this case, that is a bit lighter to divide the mountains from their reflections better and relate to reality.
  
• For the reflection I copied all the mountain layers, merged them and flipped them, lightening the layer a little bit as not to be equal to the "real" thing.
  
• The little island rock in the distance is more saturated and darker than the mountains, also little detail can be there now. Reflection is again just a little bit lighter than the rock island. The rock that is closest to us, gets more detail, but not as strong as the foreground, darker than the one behind it. Reflection a little bit lighter now.

So, that ought to give you a good guide for future designs of any kind of landscape, realistic to stylized. If you keep those rules in mind, you can take any pattern or treatment of lines and create recognizable landscapes.

[OwainGDWilliams]

Thanks for your time doing this! I will give it a go and see what I come up with.

Cheers,
O.

[OwainGDWilliams]

Ok, I have given it a go with your guides. I havent added any foreground yet but Im happy so far!



Feedback welcome.

Thanks,
O.

[Datura]

Feedback will come up later, this evening or tomorrow. It is good that you stopped where you did, corrections are needed, but much better. later

[OwainGDWilliams]

Im going to be busy thinking of how to Manage something for the next day or so, so no rush on the feedback

O.

[Datura]

I know, I hope that you can manage Good luck -- I will write the critique soon, I too am very busy.

[macarthur]

The style is very similar to PixelArt although its probably vector exported.
The use of distinct and specific analogous colours helps unify the design.
I like your adaptation and the surfer is fun.
Its kind of empty still but that may work depending on the content you are dealing with. Just make sure to reflect any text that you put in there.
It reminds me of a design that I did for a banner a while back.
I've attached it just for fun but I quickly blurred company specific information.
You can see what I mean by reflecting the text.



-Mac

[OwainGDWilliams]

Quite like the PixelArt stuff. Like your banner as well. The banner I am working on isnt finished, still got to add some more stuff to it but just taking it in slow steps

O.