SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 47
  1. #1
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make this header?

    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.
    Failure happens, its what you learn from it that is important!

  2. #2
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,775
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  3. #3
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!

  4. #4
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,726
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)
    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.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  5. #5
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I will just get out the pen and paper and see what I can come with.

    O.
    Failure happens, its what you learn from it that is important!

  6. #6
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!

  7. #7
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,775
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OwainGDWilliams View Post
    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
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  8. #8
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    F-Fox 2.0 :: WIN :: el design :: US

  9. #9
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!

  10. #10
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    F-Fox 2.0 :: WIN :: el design :: US

  11. #11
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,775
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  12. #12
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,775
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  13. #13
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!

  14. #14
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!

  15. #15
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,775
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  16. #16
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!

  17. #17
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,775
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  18. #18
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,775
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Schematic Landscape

    .



    .

    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.
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  19. #19
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your time doing this! I will give it a go and see what I come up with.

    Cheers,
    O.
    Failure happens, its what you learn from it that is important!

  20. #20
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!

  21. #21
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,775
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  22. #22
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im going to be busy thinking of how to Manage something for the next day or so, so no rush on the feedback

    O.
    Failure happens, its what you learn from it that is important!

  23. #23
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,775
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I know, I hope that you can manage Good luck -- I will write the critique soon, I too am very busy.
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  24. #24
    »-(¯`v´¯)-» macarthur's Avatar
    Join Date
    Jul 2003
    Location
    B.K.A.C
    Posts
    2,469
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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
    Attached Images Attached Images
    `·.¸¸.·´´¯`··._.·FLAMING`·.¸¸.·´´¯`··._.·
    -==׺°”˜`”°º×MONARCH׺°”˜`”°º×==-

  25. #25
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •