Help editing template logo in Photoshop

langsta23 · February 23, 2010

Hey everyone, first post here. I'm stumbling my way around setting up a Wordpress blog and linking it to my SmugMug site and have run into a big roadblock early on in the process. I purchased a WP template (i know, lame but i'm a beginner and wanted to learn from the template files, etc) and need to change the text in the logo.gif file to the name of my site.

I tried forever to edit the actual logo.gif file in PS to no avail. Finally, I came across a small tutorial on editing the 'whole page PSD file' which is basically a snapshot of the entire home page of my site. All layers, fonts, etc are included and you can work on each individual section of the home page here. This was great as it allowed me to delete the previous logo text and enter my own with fonts and everything already in place.

Here's the problem - the text I want to replace the old text with is longer than the old one and cuts off the end of my new text when doing the "Save for Web & Device". For the life of me, I cannot figure out how to resize that layer or delete or adjust and adjacent layer to get this to work.

Here's some screenshots:

attachment.php?attachmentid=29838&stc=1&d=1266908543

attachment.php?attachmentid=29838&stc=1&d=1266908543

This top image is the original logo.
Middle image is what I want to change it to.
Bottom image is what it looks like when trying to "Save for Web & Device".

Anybody have any ideas?

Thanks very much

eur0ed · February 23, 2010

Can't see the pics!

langsta23 · February 23, 2010

eur0ed wrote:

Can't see the pics!

Thanks - should be fixed now.

angevin1 · February 25, 2010

langsta23 wrote:

Hey everyone, first post here. I'm stumbling my way around setting up a Wordpress blog and linking it to my SmugMug site and have run into a big roadblock early on in the process. I purchased a WP template (i know, lame but i'm a beginner and wanted to learn from the template files, etc) and need to change the text in the logo.gif file to the name of my site.

I tried forever to edit the actual logo.gif file in PS to no avail. Finally, I came across a small tutorial on editing the 'whole page PSD file' which is basically a snapshot of the entire home page of my site. All layers, fonts, etc are included and you can work on each individual section of the home page here. This was great as it allowed me to delete the previous logo text and enter my own with fonts and everything already in place.

Here's the problem - the text I want to replace the old text with is longer than the old one and cuts off the end of my new text when doing the "Save for Web & Device". For the life of me, I cannot figure out how to resize that layer or delete or adjust and adjacent layer to get this to work.

Here's some screenshots:

This top image is the original logo.
Middle image is what I want to change it to.
Bottom image is what it looks like when trying to "Save for Web & Device".

Anybody have any ideas?

Thanks very much

Using a template is not lame at all. Building one from the ground up is for folks that prefer to build versus use.

Why not just build this logo in PS or your fav PS type program? Trying to edit another file is way painful.

langsta23 · February 26, 2010

angevin1 wrote:

Using a template is not lame at all. Building one from the ground up is for folks that prefer to build versus use.

Why not just build this logo in PS or your fav PS type program? Trying to edit another file is way painful.

I've tried building a new file using the same settings but just cannot get it to look the same. I have the correct font loaded in PS but for some reason it doesn't look correct. I also don't know how to do the background transparency the same way.
The whole thing is very annoying.

BinaryFx · February 27, 2010

It looks like you are going to have to supply a link to the template file, as the text discussion is not going anywhere fast! I am sure that once more experienced Photoshop folk look directly at the file in Photoshop, all will be clear.

Stephen Marsh

http://members.ozemail.com.au/~binaryfx/
http://prepression.blogspot.com/

langsta23 · February 28, 2010

Here's the link.
I hope someone can figure it out. Thanks in advance.

BinaryFx · February 28, 2010

langsta23 wrote:

Here's the link.
I hope someone can figure it out. Thanks in advance.

I am kicking myself for not picking up on your clues in the OP, I should not have had to download the 20mb file to figure this out!

Anyway, do the following:

1) view/show/slices
2) use the slice tool [C]
3) click on the slice that contains the text layer
4) move the tool to the "node" handle on the centre right of the slice frame
5) the slice tool should change to a "left right arrow" cursor
6) drag the slice width to the right, toward the word "blog" - make the slice large enough to handle the new text width
7) you should now have enough room to type the new name of the logo and when you "save for web" the larger slice size will be used to carve up the page into various tiles, which the generated HTML code will then link up to make a complete page.

P.S. This WP template is not a good example of making a web page, however it does appear to be a good example of making a webpage in Photoshop that is then carved up into image tiles and put back together to form a "web page".

Hope this helps,

Stephen Marsh

http://members.ozemail.com.au/~binaryfx/
http://prepression.blogspot.com/

langsta23 · February 28, 2010

Binary you are my hero! I'll even use the word 'genius'. Thank you very very much. This worked like a charm and was easy to do. A couple things I will note for anyone that reads this and is trying to do the same thing:

1. I had to use the 'Slice Select Tool'. The regular slice tool didn't allow me to widen the slice but your instructions got me there.

2. In order to see the new full logo, I had to also widen the pixels on the main style.css in the 'logo' section. The original width was 210. I increased that to 260 and it showed up correctly.

Thanks again for everyone's help. I was stuck on this for about 3 weeks and now can finally move on with other tasks. I may be asking for more help as I get to those!

BinaryFx · March 2, 2010

langsta23 wrote:

Binary you are my hero! I'll even use the word 'genius'. Thank you very very much. This worked like a charm and was easy to do.

Thanks, far from a genius, I just happen to know Photoshop fairly well! Glad to be of help.

A couple things I will note for anyone that reads this and is trying to do the same thing:

1. I had to use the 'Slice Select Tool'. The regular slice tool didn't allow me to widen the slice but your instructions got me there.

I was pretty sure that both tools could do the same thing, but I could be wrong...perhaps this was with a key modifier, anyway not very important.

2. In order to see the new full logo, I had to also widen the pixels on the main style.css in the 'logo' section. The original width was 210. I increased that to 260 and it showed up correctly.

Ah, there was more than the PSD file then, I did not know and thought that the WP template was simply a PSD - I may have been too harsh thinking that the template was image only. It sounds as if you are meant to use the supplied template code rather than the code generated in save for web.

Stephen Marsh

http://members.ozemail.com.au/~binaryfx/
http://prepression.blogspot.com/

Help editing template logo in Photoshop

Comments