Editing and working with photos

Discussion in 'Graphics' started by mangelucci, Oct 27, 2008.

  1. mangelucci New Member

    Hello,
    I read through the tutorial "A Basic Primer" written by Ishkey and have a better overall understanding of how the templates work - thanks! I'm still confused on how to edit pictures, however. According to the tutorial we don't need to do anything with the PSD file, but without it how are we supposed to make changes to the graphics??

    Also - when I try to open the PSD file I can't. I don't have Photoshop. Do I need to purchase it to work with these templates? Most of the headers on the template I'm considering for my website are graphic-based (see attached).

    Thanks in advance -
    mangelucci

    Attached Files:

    mangelucci, Oct 27, 2008
    #1

  2. myseogal New Member

    You would probably need photoshop if it is a psd file which stands for photoshop document.

    Let me know if you need help editing them.
    myseogal, Nov 1, 2008
    #2

  3. ishkey Mod - Designer

    Easy - Lets look at the image file you posted "company_name.gif"
    It is a "GIF" file which You Can Edit. (keep the same name when you save it)
    It is referenced in the "style.css" file (see it below, this will display on every page if called)
    Code:
     
#page_title h1 {
 width: 362px;
 height: 126px;
 background: url('images/company_name.gif') #292829 no-repeat 50% 50%;
 color: #cf7235;
}
    You will find "#page_title" referenced in the "index.html" file (the code you called from the style.css above)
    Code:
    <div id="page_title">
 <h1><span>Musicians Agency</span></h1>
 </div>
    Try deleting this code in the index.html file, save it, display it in your browser and see what happens.
    Try using a different graphic, with a different name in place of "company_name.gif in the style.css
    How about different company_name.gif on every page?
    You could make company_name1.gif, company_name2.gif, as many as you want. Then add to the style.css as many sections as gifs you made.
    Code:
    #[COLOR=darkred]page_title1[/COLOR] h1 {
 width: 362px;
 height: 126px;
 background: url('images/[COLOR=darkred]company_name1.gif'[/COLOR]) #292829 no-repeat 50% 50%;
 color: #cf7235;
}
#[COLOR=darkred]page_title2[/COLOR] h1 {
 width: 362px;
 height: 126px;
 background: url('images/[COLOR=darkred]company_name2.gif'[/COLOR]) #292829 no-repeat 50% 50%;
 color: #cf7235;
}
    Then call the code you need in each "html" page like
    Page ONE.html
    Code:
    <div id="[COLOR=darkred]page_title1[/COLOR]">
 <h1><span>Musicians Agency</span></h1>
 </div>
    Page TWO.html
    Code:
    <div id="[COLOR=darkred]page_title2[/COLOR]">
 <h1><span>Musicians Agency</span></h1>
 </div>
    ishkey, Nov 2, 2008
    #3