Editing and working with photos

[mangelucci]

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

[myseogal]

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.

[ishkey]

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??

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)

 
#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)

<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.

#page_title1 h1 {
 width: 362px;
 height: 126px;
 background: url('images/company_name1.gif') #292829 no-repeat 50% 50%;
 color: #cf7235;
}
#page_title2 h1 {
 width: 362px;
 height: 126px;
 background: url('images/company_name2.gif') #292829 no-repeat 50% 50%;
 color: #cf7235;
}

Then call the code you need in each "html" page like
Page ONE.html

<div id="page_title1">
 <h1><span>Musicians Agency</span></h1>
 </div>

Page TWO.html

<div id="page_title2">
 <h1><span>Musicians Agency</span></h1>
 </div>