Editing Bought Templates

[Joshua]

Hi all.

I bought a pre-made flash/HTML template from one of those online sites (templateworld or something like that) and am now trying to customize it.

But I'm having problems with some of the images and rollover buttons.

Now I'm pretty familiar with Dreamweaver and Photoshop, and know once an image is flattened in PS there not much you can do to edit it, but when the images are opened in PS, I only see one layer, so I cannot edit the text that says "Your company name here" etc...

Any suggestions as to what I need to do? I would think they would make it easier to customize.

Thanks guys.

 

[John84]

From my understanding, images in templates usually come with as .psd files. Have you tried to contact the seller?

Maybe the image is simple enough that you can edit when in one layer; can you show us one of the images?

 

[Joshua]

Hi John,

Yes, that's what I always had thought too, and after talking to my brother again (oh, BTW, this site is for my brother) he found the .psd that I needed.

So all is good, but here's my issue now.

Once I'm done editing in PS, what do I do?

I exported all the from PS but I can't drag n drop into Dreamweaver because layers are of course sometimes bigger than they appear in PS, so when I try to use them in DW everything get messed up.

Am I explaining this well enough?

Thanks again.

 

[John84]

Save them as .gif or .jpg files and link to them in dreamweaver by implementing the correct code...

<img src="images/this.gif" />

...just change the red text to the location of the image file.

 

[Joshua]

I have, I've saved them all as .jpg, but the problem is dealing with all the layers.

For example, take the webdesignforum pic on the top of this page, that could easily be about 3-4 layers (BG, text, globe, the text reflection). So if you edited it in PS, and exported the layers, you'd have 3-4 images, not one.

Also, I mean these are templates, they're supposed to be kinda easy to customize. Aimed at people who don't know web design. This seems like ALOT of work, and I'm fairly knowledgeable about Dreamweaver, HTML and PS, so I'm hoping I'm just missing something, since it's been awhile since I created a site from scratch.

 

[DLPerry]

I am likely misunderstanding the issue (finely-aged swiss cheese brain), and I don't use PS, or Dreamweaver, but.....

Wouldn't you just merge/flatten the newly edited layers in PS and save it as a single image, which you would then insert into your html with the appropriate img tags, or do you have to have a bunch of separate images?

 

[Joshua]

Yes, the only .psd that came with the template is one large image, basically it's the entire home page (header image, nav bar, tables, footer with all the legal info etc...)

So my problem is trying to figure out how to get just the section I want (and all layers that make up that section) and exporting just that for use in the new site.

 

[DLPerry]

Ah, I see, I think...

I don't use PS so I'm not certain how that would be done, but I'm guessing you would use a 'selector tool' in PS to select the area you want to edit/save, edit/copy the selected area, and edit/paste it as new image. I'm assuming there is a way to select all layers in PS, but I don't know for sure. There may be more info in the PS users manual.

Of course, as far as using it in the website html -- that is where the img tags would come in.

 

[John84]

can you show us a screenshot of the image that you want edited (just the .gif or .jpg version). maybe editing the .gif or .jpg would be easier than dealing with the .psd.

 

[Joshua]

So I'm not crazy right? The way this is set up is kinda difficult, right?

For starters, here's the 'Header' image, and I guess most important. (but you'll notice the guys legs are cut off, that because they're part of the nav bar, but I guess we'll tackle that later...)

So basically I need to edit the text in this image.

 

[DLPerry]

So I'm not crazy right? The way this is set up is kinda difficult, right?

For starters, here's the 'Header' image, and I guess most important. (but you'll notice the guys legs are cut off, that because they're part of the nav bar, but I guess we'll tackle that later...)

So basically I need to edit the text in this image.

You said you are familiar with using PS, so I think I may still be misunderstanding your question, but....

If text is not separate from the other imagery, then you'll need to remove the existing text (maybe with a clone tool to preserve the background) and replace it with your own.

If it is separate, you would just edit the text to suit, then select/save the complete image desired.

Then plunk the newly saved image into your html with the appropriate <img> tags.

 

[Joshua]

Yes, I tried using the clone tool to get rid of the original text, but it didn't look so good afterwards because of the detail in the BG image.