1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Graphics Charity Template header Image question

Discussion in 'Web Design' started by James D, Apr 16, 2010.

  1. James D

    James D New Member

    In regards to the Charity template found here

    https://freewebsitetemplates.com/preview/charity/
    I downloaded it and want to change the header image; however the image is three-part meaning that it’s the little girl is one part, the grass field that has rounded corners at the top is another part, and then the green box with the little logo.
    So if I want to remove the field and the girl and add another image I have to make it the same size and add the rounded corners so it fits?
    Does anyone have any suggestions on how to change out the header image or any recommendations?
     
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    This one way.
    The template includes charity.psd - this file has all the layers in it which make up the layout of the template.
    Fire up any graphics program which supports psd files and open the file.
    Find all the layers you do not want in the header and turn them off.

    Take a hard look at the existing header.jpg file in the images directory.
    Notice it's size and where it is cropped (left/right top/bottom)
    Use the Rectangular Marquee Tool to highlight the part of the psd that matches the header.jpg.

    Copy Merged.
    Create a New file and paste it in.
    Mod it to your desires and save it as header.jpg
    Now click on index.html and enjoy your work.

    If anybody else has a method they use let's hear it.
     
  3. James D

    James D New Member

    I wonder if there is a way to make these templates more user friendly when it comes to these types of customization issues. Having the template is one thing but being able to easily change the header image / graphic I think would be important.

    Just a thought

    I will see if I can tweak it a little when I have time in an image editing program
     
  4. Recidivist

    Recidivist VIP Member

    They are easy to edit if you know what you are doing, obviously. You can't blame the maker because you do not know how to edit it, it's just how it is done.
     
  5. James D

    James D New Member


    I wasn’t blaming on anyone; I was suggesting an easier process. I basically know what or how to edit it but my issue was that by it having three parts and all the curves and stuff it makes it more troublesome and time consuming and why not make it more user friendly. Just a thought was all. Didn’t mean to piss in anyone’s corn flakes. :D
     
  6. enigma1

    enigma1 New Member

    James, usually the template porting/integration on a site requires another slicing procedure because each person is likely to be familiar with a different way of doing it plus the server application where the template will be integrated has different requirements.

    So you could take a screenshot out of the template page then slice it again and integrate the parts you need with your website. There are good reasons for it, including the CSS beneath that may take longer to understand from the template than rewriting it

    You may have a big image in a template which you can optimize by cutting a tiny slice and generate a full-width background. And then you may not like #header or #footer in the CSS because you're accustom to a different terminology and/or combination of CSS classes.

    So consider using a template as a reference and don't try to copy paste the exact HTML for your site.
     
  7. James D

    James D New Member

    Are you saying that it’s simply not possible to create a template where the header image is only a simply image that can easily be exchanged for another one without all this extra work?
     
  8. enigma1

    enigma1 New Member

    I believe everything is possible, if you have the time to read and understand the sample CSS and HTML given with the template then go ahead, change the stylesheet to accommodate a single image for the header. Especially if you are planning to have a site with a couple of pages and no site management.

    For me and for what I learned over time, it takes me less time to re-slice it and adapt it to web-packages that I know.
     
  9. James D

    James D New Member

    I guess I’m not making myself clear,
    The entire point is why I should have to go through all of that to make a simple picture exchange.
     
  10. CovertPea

    CovertPea Moderator Staff Member Verified Member

    You ARE making yourself clear James.

    99% of FWT's template headers have a single image to alter, it just so happens you've picked one of the templates from that 1% range.

    As for your original question:
    1. Ishkey has explained the process of altering the header quite well. (2nd post)
    2. For those people who may not feel comfortable working with graphics, an alternative would be to ask one of our members to alter the image for you.

    If you want a 'blank' header for the charity template, feel free to save the below image.

    CP
     

    Attached Files:

  11. James D

    James D New Member

    That sums up my luck ha!

    Thank you I actually want to add an image, I will have to pay with it later, I am swamped these few days, but again thank you
     
  12. Sybex

    Sybex New Member

    editing template

    Why oh why don't you supply the all the individual images in .psd format with layers intact?

    That way you could simply open the individual image in photoshop (or the FREE program called Gimp which will open and edit .psd files!)and change the text or graphic and save it, so ,much quicker and easier than having to cut bits and pieces out of a big graphic and try to match the exact size and start finish selection points, obviously they were originally in .psd format why convert them to jpg/gif ? it makes it so labour intensive when there is no need

    syb
     
  13. CovertPea

    CovertPea Moderator Staff Member Verified Member

    Thanks for the input Sybex. Not impressed with the angry smiley though.

    Why don't we supply the psd?
    Well actually, we do supply the original .psd file.

    If you had checked FWT out prior to commenting, you would have realised this and perhaps posted a 'thank you FWT' (with a smiley face of course) rather than the above post?

    CP
    Your smiling Mod :)
     
  14. Sybex

    Sybex New Member

    re psd file

    sorry about the angry it was meant to be a sad smiley :(

    But let me explain myself better, ok yep saw and opened the .psd file, but opening it with my version of photoshop and "turning off" layer 1 and text, leaves me with buttons,(welcome to our website and the triple button, advanced web technology's) header, etc as part of one big graphic meaning i have to select, copy and paste the items I want to change, then add the text back in.

    So my question was why cant blank buttons or buttons in .psd format with layers intact be supplied? so the text can be edited or removed as needed.

    The header in the template I am playing with (web technology's company) has a little yellow and white disk before the text which isn't a seperate layer, meaning it has to be removed manually, yes i could just dump a graphic over the top of it to hide it, but i happen to like the background so want it to show like the original template does with the text on top of that background..

    I know lots of people coming to your site have experience in building and modifying graphics, but i also think a lot dont and they come to your site trying to find a simple way of creating a top looking website, one that doesn't look like it was home made.

    So sorry again for the accidental cross smiley but for a beginner like me its so frustrating and I was all excited then sad when I couldnt remove the bits I wanted. It was really meant as constructive criticism because i couldn't understand why you would do it that way.

    rgds
    Syb
     
  15. CovertPea

    CovertPea Moderator Staff Member Verified Member

    Okay Syb, I understand where you are coming from now.

    I have nothing to do with creating the templates here, that kind of stuff is WAY beyond my humble abilities.
    When I first joined FWT, I was impressed to find the 'creator' had been kind enough to supply the layered psd's with his free templates.

    IMHO, including further separate files for headers and such may be expecting just a tad too much for a totally free website.

    Since I've been a member here I've added a few 'blank' butons/headers etc. to several of the free templates. One of which was for the 'web technology's company' template.
    I went searching for it but it appears to have been deleted. (maybe by me?)
    I've uploaded it again so if you want it you can get the zipped file from here:
    WEB TECHNOLOGIES TEMPLATE

    (see post #17)
    By the way, I'm still waiting for that smiley face!

    Cheers and welcome to the forum,
    CP
     
  16. Sybex

    Sybex New Member

    Woohoo!!!

    yes yes yes yes , thank you thank you, yessssssssss !!

    wooohoo your wonderful thanks you so much ...

    :):):):) I had more but it only lets me have 4 smileys lol

    big grin !

    rgds
    Syb
     
  17. CovertPea

    CovertPea Moderator Staff Member Verified Member

    Aww, now you have me smiling.
    Glad I could be of help Syb.
    Jump right in if you'd like to give a hand around the forum.

    Cheers
    CP