Turn Headline Text Into .jpeg or .png

by 15 comments
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
#web design #headline #jpeg #png #text #turn
  • Profile picture of the author Don Schenk
    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
  • Profile picture of the author krikkod
    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.
    • Profile picture of the author SonnyKing
      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
    • Profile picture of the author DJL
      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.
      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.
  • Profile picture of the author Don Schenk
    Good deal Sonny, kirkod explained it for you.

    :-Don
  • Profile picture of the author JonathanKrantz
    Use the image as the background of the header and set text-indent to -9999em. This works better than the alt tag.
  • Profile picture of the author RoyalT1
    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 ~
    • Profile picture of the author SonnyKing
      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...

Next Topics on Trending Feed