Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    May 2016
    Posts
    21
    Member #
    54107

    Question about template creation?

    Hi,
    I was browsing some templates, trying to get my gears turning and I have always wondered how the "popout" so to say, headers are made. I don't know what this technique is called and I haven't come across it in any tuturials I have seen. I don't want to post a link because I know thats against rules but if you google "school website templates" many of them will come up under the "images" search results. Going across from left to right, results 6 and 8 are examples of what I mean.

    How are the header areas created? How did they get the girls hat to appear apart of the section above her? And the schools logo to drop down into the pic? What program or tools can this be done with?

    Thanks

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,716
    Member #
    5580
    Liked
    718 times
    Post a link ... we need to see what you mean. OK to post in this case.


  4. #3
    Junior Member
    Join Date
    May 2016
    Posts
    21
    Member #
    54107
    ok...hopefully it works, but this link is the one with the girls hat.
    https://cdn.dreamtemplate.com/produc...25184517_1.jpg

  5. #4
    Junior Member
    Join Date
    May 2016
    Posts
    21
    Member #
    54107
    this is the school site
    https://images.template.net/wp-conte...6/11971081.jpg

    heres another one
    http://2.bp.blogspot.com/-aR5FQX2AAK...mommykeiks.png

    ...see how her feet extends into menu area

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,716
    Member #
    5580
    Liked
    718 times
    If you right-click and view image or view background image you can get a clue to some of these ...

    http://4.bp.blogspot.com/-GZhs1QaQzS...ommyheader.png

    That's the feet in the menu area. It's not really in the menu area. It just has a blue part the same as the menu.

    The girl with the hat is probably the same thing. It's all an image, probably used as a background in a <div>
    You can also have PNG images with transparent backgrounds and move them on top of other sections.


  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    This is one of the very few use cases for absolute positioning. It is useful to be able to push an image out of a container like this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Junior Member
    Join Date
    May 2016
    Posts
    21
    Member #
    54107
    Thanks guys, I am going to try and see if I can recreate something similar to these in photoshop and perhaps try the absolute positioning as well...if I get brave enough I'll post it for some fun critiquing. Thanks again


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:16 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com