Hi there,

 

I've hit a bit of a brick wall with my web design learning curve. Seems like every site needs a good logo, and I'm really confused about how to produce them.

 

I've got photoshop, and know the basics of how to use it, but it seems the resolution of the text it produces is just too low to look good on the web. For example I want to make a logo/banner/what's it actually called? like this:

 

What I need to know, is how would a pro go about producing something like this?

 

I'm aware of the distinction between vector and raster graphics, and I can produce svgs using Inkscape. I want to avoid this solution though, because i use wordpress, and the svg support is unreliable, and I want my logos to display on all browsers.

 

I've heard that other programs like Indesgn are better because they use vector graphics for text, but I don't know if that means that files are saved as svgs?

 

I'm guessing there must be a fairly easy solution since so many websites have perfectly good logos, and they can't all be svgs? Is it maybe jsut a case of learning more about PS, including all the anit-aliasing options? or using only smaller sized text? Or what?

 

Any help much appreciated,

 

Robin.

 

You can make the logo double the size, then you can resize it with CSS.

For example, let's say the original .logo img is 800px x 400px:

 

.logo img{
   width:400px;
   height:200px;
}

Also I think WP support on svg is great, it's the old browsers that don't support it.

You will need to use CSS, here is a link for you http://css-tricks.com/using-svg/ - all well explained and browser support provided, too.

Yeah, I'm surprised about WordPress not supporting SVG so well - I've used them in the past with WP (though used a .png fallback). Lately I've been a but of a Harry Redknapp and been doing high res .png's for logos (the client and user base was mostly IE and running on slow connections) then optimised the image for speed.

 

Whenever possible, Illustrator is best for logos. You don't have to export into an svg however. If you have the master in vector form, you can create the image for the appropriate screen size or breakpoint. That way, if you make a mistake or the client comes back to you and asks for you to do some signage, t-shirt designs, etc, you always have a high res image.

 

All said and done, I don't have a retina device other than an iPhone, so don't test much in Retina other than calling in favours. Not sure how some of the images could look with that method, but I suggest you stick with PS for now, but bear in mind that SVG may be the way forward in the future. But, who knows.

 

Regarding inDesign, yes, type is 100 times better there and you can create some nifty logos, but that's not what it was designed for and it's aimed at the print market. E.g. PS was for rasters (jah), photographs etc, Fireworks for web, AI for logos and vectors and InDesign for publications. But then again, WP was originally 'just for blogs'. There are a handful of designers who swear by InDesign for wireframing too, but in my opinion, the web is flexible and print is not. I think it would complicate matters to go learn another program just for logo design.

 

Putting the Waffle in Birds Eye, rambling over

Thanks again guys.

 

I've just found an online logo maker called "cool text."(http://cooltext.com/). It generates pngs of text, and what I don't get is how when I zoom in on my browzer, the quality remains smooth, which is how I would expect a vector image to behave. Anyone care to explain?

 

R

The quality doesn't remain smooth on my screen

But if you like these pngs use the generator.

 

Although it will best in the long run, if you learn more about web design, html and CSS (and therefore svg and vectors).

Do you intend to turn this into a career or do you just do it for fun?

I'd definitely like to do this as career eventually!

 

I'm getting more comfortable with css and HTML, and even learned a bit of PHP. The learning curve is not smooth though - like learning any subject I guess there's periods of obvious growth, then times when it's all being integrated and it seems like not much is happening.

 

Re the text, I tried the trick of doubling the size of the image and using css to shrink it, but the original text was so bad that it didn't make enough of a difference. It may not be perfect, but the "text image" made by CoolText is considerably smoother than what I did in PS!

It's great that you intend to turn web design into a career

I think you will find out Flat design is a big trend at the moment - some examples of flat logos http://theultralinx.com/2013/02/20-examples-flat-logo-design.html

The big shadows, bevels and gradients are thing of the past now, and although I loved that shiny web 2.0 style, it is outdated now and Flat is the new black

It's much easier to recreate with CSS only and as less images as possible.

i'm a bit surprised teodora that you suggested halving the size in the css. it means the image a larger file size than necessary and most of all it won't really work because it relies on the renedering engine of the browser to resize - and it's not in the same league as photoshop for example

 

now i could have understood it if the OP was trying to use really small text/favicon and then you could have suggested making the original vector artwork 2 or 4 times the size, then saving a copy as uncompressed bitmap (e.g. png or tiff) and *then* resizing to the target size of 1/2 or 1/4.

 

Robin - can't you simply set the text in inkscape and then file - save as png (for web) ? or if you have gradients then png from inkscape to photoshop then save for web as jpeg?

 

photoshop might not have as good a text rendering as illustrator (as mentioned, the ideal choice for logos) or for that matter indesign, but it should handle text of that size just fine - so either you have antialiasing turned off or your export settings are wrong/no transparent layer

 

did you export as 8-bit or 24 bit with/without transparency?

 

as you can see this text is fine as an 8-bit ps png (photoshop normal text layers) (using the different antialias settings from crispy fried to smoother or whatever they are

 

the only thing i can think of is that you exported as 8-bit png and because of the yellow.-orange- red flames then there are too many colours (more than the 256 of png- to reproduce the nice smooth antialiased text edges (when i dropped your banner into my image below and used 8-bit then it came out with really jagged text edges)

 

 

actually you need to check that you have the matte set to the proper background colour (using 'none' gave me jagged edges - don't get that in adobe fireworks!) and make sure transparency dither is set to none (and snap to web safe too...)

 

if it's not working right you may have to use a 24-bit png (or if you going to have a white background or solid colour then include it in the image and save for web as jpeg with a balanced amount of compression

 

 

i'm a bit surprised teodora that you suggested halving the size in the css. it means the image a larger file size than necessary and most of all it won't really work because it relies on the renedering engine of the browser to resize - and it's not in the same league as photoshop for example

 

now i could have understood it if the OP was trying to use really small text/favicon and then you could have suggested making the original vector artwork 2 or 4 times the size, then saving a copy as uncompressed bitmap (e.g. png or tiff) and *then* resizing to the target size of 1/2 or 1/4.

 

Great post dap

 

When I suggested CSS resizing, I was thinking of the 2x method that is used for retina images You are right, doesn't always work, but logos are not that big (although we don't really know what size the op's logos will be).

Doesn't Dribbble 2x do that - takes double the size image and resize it?

 

Of course, the svg is the best to use in my opinion.

Edited June 1, 201313 yr by teodora