Freelancer.com

Go Back   Warrior Forum - The #1 Internet Marketing Forum & Marketplace > Warrior Support Forums > Website Design
Register Blogs Social Groups Advertise with usHelp Desk

Reply
LinkBack Thread Tools
Unread 18th Jun 2010, 03:03 PM   #1
Banned
War Room Member
 
Join Date: 2010
Location: Miami (by the way of "Bronx, NY")
Posts: 123
Thanks: 22
Thanked 13 Times in 12 Posts
Default Turn Headline Text Into .jpeg or .png

I'm trying to turn my headline text into a graphic. Its like if you ever see Clickbank Sales Pages, often times they will have there text turned into graphics and it looks good!

How do I do that? Is there software out there that can do that?

Sonny
SonnyKing is offline   Reply With Quote
Unread 18th Jun 2010, 04:01 PM   #2
Senior Warrior Member
War Room Member
 
Don Schenk's Avatar
 
Join Date: 2007
Location: Cincinnati, OH and beautiful Park City, UT
Posts: 2,076
Thanks: 1,487
Thanked 932 Times in 579 Posts
Default Re: Turn Headline Text Into .jpeg or .png

You need a graphics program that can save as jpeg. I don't know if Windows Paint can do so. I use Photoshop, but you can get a free Photoshop look-alike called GIMP. Just google it.

One problem though is Google and the other search engines can not read jpegs. You can add an Alt tag to the image in your HTML program, but that is not as effective as letting search engines see a large, bold text.

If you look at the page in my signature, I have put such a jpeg in there. The word FREE, the words before it, "Then you want this ebook..." the type at an angle, the box, the box shadow, and the words in the box (book title) is all one jpeg created in Photoshop.

The graphs on the right and the book cover I also made in Photoshop.

:-Don


:-Don

Don Schenk is offline   Reply With Quote
Unread 18th Jun 2010, 04:39 PM   #3
Banned
War Room Member
 
Join Date: 2010
Location: Miami (by the way of "Bronx, NY")
Posts: 123
Thanks: 22
Thanked 13 Times in 12 Posts
Default Re: Turn Headline Text Into .jpeg or .png

Thanks Don, I will check GIMP out.
SonnyKing is offline   Reply With Quote
Unread 18th Jun 2010, 04:42 PM   #4
Banned
War Room Member
 
Join Date: 2010
Location: Miami (by the way of "Bronx, NY")
Posts: 123
Thanks: 22
Thanked 13 Times in 12 Posts
Default Re: Turn Headline Text Into .jpeg or .png

How would you even start to do that. Can I just type what I want into GIMP or photoshop? Or to type it into paint, then save it as a jpeg. then photoshop it?

Need some pointers...


Thanks
SonnyKing is offline   Reply With Quote
Unread 18th Jun 2010, 05:41 PM   #5
Active Warrior
War Room Member
 
Join Date: 2009
Posts: 63
Thanks: 4
Thanked 64 Times in 14 Posts
Default Re: Turn Headline Text Into .jpeg or .png

Paint is a bit scruffy if you're going for a polished look. You can type letters into photoshop and the gimp and then you can play with the letters until you're happy with them (add shadows, change colours, add bevels etc).

What is it you're after anyway?

waitstate is offline   Reply With Quote
Unread 18th Jun 2010, 05:45 PM   #6
Graphics Guru
War Room Member
 
krikkod's Avatar
 
Join Date: 2010
Location: Brisbane, Australia
Posts: 203
Thanks: 34
Thanked 41 Times in 26 Posts
Default Re: Turn Headline Text Into .jpeg or .png

If it's your product name you want turned into a graphic then go ahead.

But if it's your headline text you want turned into a graphic eg. "Finally! A Newbie Friendly, Paint By Numbers Money Making System That Works" then advise against it.

It's never a good idea to turn headers, text or links into graphics. Mostly due to the purposes of ensuring search engines can read your text.

If your text is in graphics you lose SEO value over trying to make your text look good.

I'm a freelance web designer, and as much as i like to make things look good i will still never use graphics for text.

You are better off choosing a good font and colour to make your header 'sing'.

However.

If you really must know how to do this i can tell you - and here's how:

- Start a new file in photoshop, adjust the canvas size to the height and width you need.
- Use the text tool to write your header out.
- Choose the font you want for your header.
- Once you have written out your header you can apply styles to it such as gradients and shadows.
- To do this double click on the text layer in your layer palette.
- A window will pop up giving you a whole world of options to style your text. There are alot of options you can use here such as bevel and emboss, gradients, add stroke etc.
- Once you have a play around with them you can see how simple things are too adjust.
- Set your style to how you like it then hit okay to close the style box.
- Your header should now be all styled up
- Go to the menu file>save for web
- A new window will pop up giving you options to save your header as a jpg, png and gif.
- Best option for you would be to save as jpg, and set the compression to 'high'.
- Hit save then save it to your images folder.
- All done!

Now that you have done all of that there are 2 problems with your image header.

Not only is it pretty tedious to initially create but if you want to change the text in your header you will have to edit in back in Photoshop to do so, rather than just editing the text in plain HTML.

But there is a way to do this - kinda.

I have a video squeeze page i just completed that uses text that look like they are graphics but are perfectly plain HTML, meaning if ever the client needs to change the text, they don't even need to own Photoshop to do so. They can just open the HTML file to change the text.

You can see it here - Safe Security Pro

The font i use is not your typical web font. In fact i can use any font i want to use under the sun as HTML text.

Now that squeeze page is something i am giving away for FREE. It will be customized to your product or niche, and you also receive a custom video for free.

I am giving it away as part of my WSO when i launch it very soon. The WSO is a complete graphics package from the squeeze page to the sales page and product shots. If you're interested definitely PM me.

Hopefully you found the info useful either way.
krikkod is offline   Reply With Quote
Unread 18th Jun 2010, 06:29 PM   #7
Banned
War Room Member
 
Join Date: 2010
Location: Miami (by the way of "Bronx, NY")
Posts: 123
Thanks: 22
Thanked 13 Times in 12 Posts
Default Re: Turn Headline Text Into .jpeg or .png

Quote:
Originally Posted by waitstate View Post
Paint is a bit scruffy if you're going for a polished look. You can type letters into photoshop and the gimp and then you can play with the letters until you're happy with them (add shadows, change colours, add bevels etc).

What is it you're after anyway?
I'm trying to turn this text into graphics for my headline, I know it would hurt my SEO indexing that's why I was playing around with the idea...

Thanks for the advice
SonnyKing is offline   Reply With Quote
Unread 18th Jun 2010, 06:32 PM   #8
Banned
War Room Member
 
Join Date: 2010
Location: Miami (by the way of "Bronx, NY")
Posts: 123
Thanks: 22
Thanked 13 Times in 12 Posts
Default Re: Turn Headline Text Into .jpeg or .png

Quote:
Originally Posted by krikkod View Post
If it's your product name you want turned into a graphic then go ahead.

But if it's your headline text you want turned into a graphic eg. "Finally! A Newbie Friendly, Paint By Numbers Money Making System That Works" then advise against it.

It's never a good idea to turn headers, text or links into graphics. Mostly due to the purposes of ensuring search engines can read your text.

If your text is in graphics you lose SEO value over trying to make your text look good.

I'm a freelance web designer, and as much as i like to make things look good i will still never use graphics for text.

You are better off choosing a good font and colour to make your header 'sing'.

However.

If you really must know how to do this i can tell you - and here's how:

- Start a new file in photoshop, adjust the canvas size to the height and width you need.
- Use the text tool to write your header out.
- Choose the font you want for your header.
- Once you have written out your header you can apply styles to it such as gradients and shadows.
- To do this double click on the text layer in your layer palette.
- A window will pop up giving you a whole world of options to style your text. There are alot of options you can use here such as bevel and emboss, gradients, add stroke etc.
- Once you have a play around with them you can see how simple things are too adjust.
- Set your style to how you like it then hit okay to close the style box.
- Your header should now be all styled up
- Go to the menu file>save for web
- A new window will pop up giving you options to save your header as a jpg, png and gif.
- Best option for you would be to save as jpg, and set the compression to 'high'.
- Hit save then save it to your images folder.
- All done!

Now that you have done all of that there are 2 problems with your image header.

Not only is it pretty tedious to initially create but if you want to change the text in your header you will have to edit in back in Photoshop to do so, rather than just editing the text in plain HTML.

But there is a way to do this - kinda.

I have a video squeeze page i just completed that uses text that look like they are graphics but are perfectly plain HTML, meaning if ever the client needs to change the text, they don't even need to own Photoshop to do so. They can just open the HTML file to change the text.

You can see it here - Safe Security Pro

The font i use is not your typical web font. In fact i can use any font i want to use under the sun as HTML text.

Now that squeeze page is something i am giving away for FREE. It will be customized to your product or niche, and you also receive a custom video for free.

I am giving it away as part of my WSO when i launch it very soon. The WSO is a complete graphics package from the squeeze page to the sales page and product shots. If you're interested definitely PM me.

Hopefully you found the info useful either way.
Hi,
Thanks for the advice

I'm definitely interested in your free squeeze page, with video.

You actually might be able to help me with a couple of my design problems. Very, very small problems but I know NOTHING about design, just marketing.

Do you have an email, WF wont let me PM let...

Sonny
SonnyKing is offline   Reply With Quote
Unread 18th Jun 2010, 07:15 PM   #9
Senior Warrior Member
War Room Member
 
Don Schenk's Avatar
 
Join Date: 2007
Location: Cincinnati, OH and beautiful Park City, UT
Posts: 2,076
Thanks: 1,487
Thanked 932 Times in 579 Posts
Default Re: Turn Headline Text Into .jpeg or .png

Good deal Sonny, kirkod explained it for you.

:-Don

Don Schenk is offline   Reply With Quote
Unread 18th Jun 2010, 09:40 PM   #10
HyperActive Warrior
 
Harrison Ortega's Avatar
 
Join Date: 2010
Location: Edison, New Jersey
Posts: 112
Thanks: 11
Thanked 36 Times in 33 Posts
Default Re: Turn Headline Text Into .jpeg or .png

You can do that dynamically using PHP and the GD Library.
Here is a good example http:// visionmasterdesigns.com/demo/image/imagegenerate.html

and how easy it is to do that: http:// visionmasterdesigns.com/tutorial-convert-text-into-transparent-png-image-using-php/

NJ web design / NJ Web Designer. MY Wordpress portfolio. 10 years of HTML/CSS - 6 years developing professional Wordpress websites. Currently not available for services.
Harrison Ortega is offline   Reply With Quote
Unread 19th Jun 2010, 08:25 AM   #11
Banned
War Room Member
 
Join Date: 2010
Location: Miami (by the way of "Bronx, NY")
Posts: 123
Thanks: 22
Thanked 13 Times in 12 Posts
Default Re: Turn Headline Text Into .jpeg or .png

Quote:
Originally Posted by Harrison Ortega View Post
You can do that dynamically using PHP and the GD Library.
Here is a good example http:// visionmasterdesigns.com/demo/image/imagegenerate.html

and how easy it is to do that: http:// visionmasterdesigns.com/tutorial-convert-text-into-transparent-png-image-using-php/
Thanks Harrison,

I see we have Jersey in the house...
SonnyKing is offline   Reply With Quote
Unread 19th Jun 2010, 05:11 PM   #12
Warrior Member
War Room Member
 
Join Date: 2010
Posts: 25
Thanks: 4
Thanked 14 Times in 6 Posts
Default Re: Turn Headline Text Into .jpeg or .png

Use the image as the background of the header and set text-indent to -9999em. This works better than the alt tag.

JonathanKrantz is offline   Reply With Quote
Unread 20th Jun 2010, 10:27 AM   #13
Warrior Member
 
Join Date: 2008
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default Re: Turn Headline Text Into .jpeg or .png

Paint & Paint.NET can turn just about anything that you see on your monitor/screen into a .jpeg, .png (or other types). You can utilize the brief tutorial at: newgm.media.officelive.com/UsingYourPaintProgram.aspx

(copy and paste the bold above to your browser)

~ Royal T ~
RoyalT1 is offline   Reply With Quote
Unread 21st Jun 2010, 04:40 AM   #14
Freeman
War Room Member
 
JackPowers's Avatar
 
Join Date: 2009
Posts: 756
Thanks: 88
Thanked 105 Times in 79 Posts
Default Re: Turn Headline Text Into .jpeg or .png

Quote:
Originally Posted by Harrison Ortega View Post
You can do that dynamically using PHP and the GD Library.
Here is a good example http:// visionmasterdesigns.com/demo/image/imagegenerate.html

and how easy it is to do that: http:// visionmasterdesigns.com/tutorial-convert-text-into-transparent-png-image-using-php/
Harrison,

Sent you PM and email!

JackPowers is offline   Reply With Quote
Unread 21st Jun 2010, 09:11 AM   #15
DJL
HyperActive Warrior
War Room Member
 
DJL's Avatar
 
Join Date: 2008
Location: Texas, USA.
Posts: 438
Thanks: 47
Thanked 193 Times in 133 Posts
Default Re: Turn Headline Text Into .jpeg or .png

When I visit the URL you give below (using IE8) I see a series of error messages pop up before the page finally loads. For example, "No object with ID #preheaderwrapper H1 exists yet. Call curvyCorners(settings, obj) when it is created." followed by similar messages for H2, H3, etc.
Quote:
Originally Posted by krikkod View Post
I have a video squeeze page i just completed that uses text that look like they are graphics but are perfectly plain HTML, meaning if ever the client needs to change the text, they don't even need to own Photoshop to do so. They can just open the HTML file to change the text.

You can see it here - Safe Security Pro

The font i use is not your typical web font. In fact i can use any font i want to use under the sun as HTML text.

"Power tends to corrupt, and absolute power corrupts absolutely.
Great men are almost always bad men."
--Lord Acton, 1887.
DJL is offline   Reply With Quote
Unread 22nd Jun 2010, 03:22 PM   #16
Banned
War Room Member
 
Join Date: 2010
Location: Miami (by the way of "Bronx, NY")
Posts: 123
Thanks: 22
Thanked 13 Times in 12 Posts
Default Re: Turn Headline Text Into .jpeg or .png

Quote:
Originally Posted by RoyalT1 View Post
Paint & Paint.NET can turn just about anything that you see on your monitor/screen into a .jpeg, .png (or other types). You can utilize the brief tutorial at: newgm.media.officelive.com/UsingYourPaintProgram.aspx

(copy and paste the bold above to your browser)

~ Royal T ~

Thanks for the advice Royal...
SonnyKing is offline   Reply With Quote
Reply

  Warrior Forum - The #1 Internet Marketing Forum & Marketplace > Warrior Support Forums > Website Design

Bookmarks

Tags
headline, jpeg, png, text, turn

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




All times are GMT -6. The time now is 08:23 AM.