Highlighted

Creating a high quality website logo in Photoshop or Illustrator

New Here ,
Oct 04, 2012

Copy link to clipboard

Copied

I'm trying to create a very high quality crips website logo using Photoshop or Illustrator, but everytime I export the design into PNG, the text borders are not as crip compared with Google logo. How do I create a very crips and sharp logo using Adobe software? Please tell me what software, how to export, what the size of the document should be, what resolution, any detailed tricks, designs and pointers would be helpful. I know I can create a logo, but it is blurry and it shows. When I put my logo on a gray background for instance, the text becomes more blurrier. You know the deal.

Views

21.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Creating a high quality website logo in Photoshop or Illustrator

New Here ,
Oct 04, 2012

Copy link to clipboard

Copied

I'm trying to create a very high quality crips website logo using Photoshop or Illustrator, but everytime I export the design into PNG, the text borders are not as crip compared with Google logo. How do I create a very crips and sharp logo using Adobe software? Please tell me what software, how to export, what the size of the document should be, what resolution, any detailed tricks, designs and pointers would be helpful. I know I can create a logo, but it is blurry and it shows. When I put my logo on a gray background for instance, the text becomes more blurrier. You know the deal.

Views

21.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 04, 2012 0
Participant ,
Oct 04, 2012

Copy link to clipboard

Copied

hmmm. Where to start?

The question points to several areas of digital design fundamentals that indicate you need to educate yourself through classes, books, tutorials. The PS Forum can't really get at all the issues you bring up; resolution, vector vs raster, web graphics, transparency and the web. You are asking how to make a logo and that is a really broad request not easily answered.

A quick search for "Photoshop for Web Design" yields a lot of possibilities. There are a lot of books and a lot of free and not so free online tutorials.

Here are a couple:

http://www.lynda.com/Photoshop-tutorials/Photoshop-for-Web-Design/

http://www.1stwebdesigner.com/tutorials/web-design-layout-tutorials-2010/

Good Luck.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2012 0
New Here ,
Oct 04, 2012

Copy link to clipboard

Copied

Thanks the for the answer. My logo is just text. I'm creating a text logo. My primary question was how do I export a text logo into PNG in very high and crips format? I'm not doing designs and flowers and stuff like that. It is primarily about exporting a simple text logo into PNG. Do I use PNG-24 or PNG-8. do transparency? how does the transparency work when the logo is put on a gray background? How do I create a big and small text logo? Do i shrink the image or shrink the texts each time and export?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2012 0
LEGEND ,
Oct 04, 2012

Copy link to clipboard

Copied

OK, I think that you are talking about a "crisp" logo here.

Do the design work in Adobe Illustrator. That will yield a Vector, AI file. It can be infinitely Scaled.

Then, when you wish to Rasterize it, you can Place it in PS, as a Smart Object, and size it to suit. Then, if used on a Web site, PNG will be good.

If you start with a Raster Image (pixels) in PS, when you Scale it, the pixel structure WILL be altered, and usually NOT for the better.

If you Place that logo AI onto a gray background, I am not sure where, or how Transparency comes in, but if you attach the Image, and annotate it, if necessary, maybe that part will become more clear to me.

Good luck,

Hunt

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2012 0
New Here ,
Nov 09, 2012

Copy link to clipboard

Copied

Hey Bill, thanks for the tip about using the png file..

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2012 0
Adobe Employee ,
Nov 10, 2012

Copy link to clipboard

Copied

in addition to Bill's helpful response, here are some great video tutorials:

enjoy!

janelle

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 10, 2012 0
New Here ,
Sep 29, 2020

Copy link to clipboard

Copied

Hi dear friend.
I think you want to use your logo in HTML after saving it in PNG format and then give it a percentage and it does not show a good result on your computer. Its right? If you want to use it on the web, it is better to use the SVG format.
But about design in Photoshop, I have to say this:
Working with the Photoshop tool is not difficult at all, but the most important thing in designing a vector is that your design has enough dots. Neither low nor high.
Pay attention to the following logo:

logo-twitter.jpg

You can refer to this site to learn [Link removed by moderator]

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 29, 2020 0
Adobe Community Professional ,
Sep 29, 2020

Copy link to clipboard

Copied

Illustrator should be used for logo creation because it is vector base.... which means you can easily resize your logo to any size without it losing resolution. 

Photoshop is raster based.  So you can not resize your logo as well. 

Now you can always bring your Illustrator file into Photoshop... that is not a problem.  Just copy it in Illustrator then paste it into Photoshop.  Choose Smart Layer.... and there you go!  Then you can save itas PNG.

 

As for size.... well you can create your Photoshop canvas to be any size.  In Illustrator.... I always tend to work in legal paper size just because I like it.  But that does not matter.  What matter is how you want to use your logo... then you just make a new Photoshop document to paste your logo into.  OH AND MAKE SURE THE PHOTOSHOP DOCUMENT RES IS ALWAYS AT 300.  This way it is never blurry.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 29, 2020 0
Adobe Community Professional ,
Sep 29, 2020

Copy link to clipboard

Copied

Always design logos in Illustrator. Make them large. You can export as svg if you are using on the web, but if you want to export as a png, it is better to bring it into Photoshop and use it as the Export As gives you a multitude of options and seems to give you the best quality. Make sure the original file in Phototshop is at least 300ppi

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 29, 2020 0