Recreating a Logo in SVG (from a PNG)
This is the hdpi logo for GoToQuiz.com, in PNG format:
It’s file size is only 3.83KB, which isn’t bad at all. And it looks crisp on hdpi screens. But I wanted to try recreating it in SVG anyway, mainly as a learning exercise.
Getting the basic outline of the letters was easy, given how blocky they are. I had Adobe Illustrator trace them and output the result as an SVG. This would be my starting point for hand-coding the rest.
First, I rounded off each point that Illustrator generated to integers. For such simple shapes, integers really just make it easier to ensure everything is lining up. A few lines ended up a pixel off from where I wanted them, but that was easy to correct. So this was my starting point:
Web Page Optimization – Changes I Made for Page Loading Speed
It has been years since I optimized the page loading speed at GoToQuiz. At that time, image sprites and CSS/javascript minification were the state of the art. In the intervening years, though, further progress has been made. Of particular note is the “retirement” of older versions of Internet Explorer, and the emergence of CSS3 and HTML5, which allows developers the ability to further streamline their sites. So as I am in the process of revamping the UI, I’m taking advantage of the latest techniques to boost page loading speed. Be aware, this is nothing revolutionary–this blog post is simply an overview of which changes I’m making, and why.
Migrating pages over to HTML5 allows the markup to be more semantic while taking fewer bytes–a double win. Using tags such as nav, section and article helps alleviate so-called “div-itis”, allowing cleaner markup and a smaller overall filesize. HTML5 also follows the maxim of “convention over configuration”, letting you eliminate unnecessary attributes like type=”text/javascript” on script tags, for example.
The adoption of CSS3 has provided many possibilities for creating beautiful visual effects without using image files. Here is an example: on an early iteration of the design of the various headings on GoToQuiz, I used this sprite combined with CSS to create the rounded color bar appearance.
Create thumbnails and avatars in Java
Avatars–icon-sized images used to represent people online–are usually square. Consider, Facebook avatars are 50 by 50 pixel images. Most source images are not square, however. Cameras typically take pictures with a 4:3 aspect ratio. So to create an avatar from an image, you must do two things: crop it to a square and resize it to your desired icon size.
Thumbnails present a similar challenge. When displaying thumbnails in an image gallery, you typically want to enforce at least one of width|height to be the same for all images to avoid a very sloppy look. The cleanest look is achieved with square thumbnails of equal size, though the necessary cropping may not be desireable in every case.
Read more
How to load an image from a URL in java
Assuming you want to load the image from the URL into memory in order to display or manipulate it:
try { URL imageUrl = new URL("http//example/image.jpg"); InputStream in = imageUrl.openStream(); BufferedImage image = ImageIO.read(in); in.close(); } catch (IOException ioe) { //log the error } |
Loading an image from a URL is as simple as that. Now you’ve got a BufferedImage.
It can be even simpler, and if all you are doing is cropping or resizing the image, you may be interested in a little java image utility I wrote. Using my ImageLoader and Image classes, the code would look like:
try { Image image = ImageLoader.fromUrl("http//example/image.jpg"); } catch (IOException ioe) { //log the error } |
The Image class is a wrapper on a BufferedImage and provides some useful methods for cropping, resizing, and writing (saving) the image. Let me know in the comments below if you’ve found this helpful.
Resize images in Java, preserving image quality
It shouldn’t be so difficult to do simple image manipulation in java. Resizing images is a frequently-encountered need, often to create thumbnails or to shrink pictures taken from digital cameras to a reasonable display size. But how to create thumbnails in java without sacrificing image quality? Standard library image manipulation is severely lacking in this area.
Luckily, talented java programmers have worked to create better solutions. I’ve thrown together an image utility, building off of the work of others, to expose a few basic image manipulation functions, namely: open (from a file, URL, InputStream or byte array), save to file, soften, resize, and resize to square. This may be useful to your project. Just read the important caveat toward the bottom of this post.
- Download: ImageUtil-1.11.zip
I make no warrantees about this utility. If you like it, a link back to this blog would be more than welcome.
Royalty-free image sources
Image copyright can be a thorny issue, and most web designers are not legal experts. But you’ve got to be confident that you have the right to use any image you place on your site. If you need an image for free, there are a few sources available. Two are PD Photo (PD standing for Public Domain) and the public domain category of Wikimedia Commons. In fact, all images used on Wikipedia display copyright information when you click on them. If the image has an expired copyright, you can use it royalty-free.
Another option is to check the Prints & Photographs Online Catalog at the US Library of Congress web site. Not every image there is free from copyright restrictions, so always double check. Here is their info page on copyright.
stock.xchng used to be a good source of free images, however they’ve been bought by GettyImages and require payment now for most of the available content. If you are willing to pay a small fee, I’ve had a good experience with Dreamstime (they’ve recently added a free section, too).
Another possibility is to buy one of those stock image collections, such as Big Box of Art or Art Explosion.
One final note: always read the fine print. Even “royalty-free” can have stipulations. If the image features a person, also look for an indication that a model release form was signed (if your project is commercial).
UPDATE: I recently found this free image site that provides you with the Photoshop PSD files.
Royalty-free state flag icons
I needed a set of US state flag icons, but I couldn’t find find a nice royalty-free, no-cost set in the size I wanted. So I went ahead and created the set on the left. I think it came out pretty well. The set includes all United States state flags plus Washington DC, the US Virgin Islands, and Puerto Rico. Each flag icon is 40 by 24 pixels. Some required minor cropping or width-extending to fit the uniform size, or to improve the clarity of symbols on the flag. Each flag has subtle shine and shadow effects to enhance their appearance.
Feel free to use these in your own project, commercial or non. All I ask is for a link back to this blog. Here is a zip file containing the 53 icons in PNG format. Each is a little over 1KB in size and is named after its two-letter postal code. See the included license.txt file as well. Do not re-sell this set or re-host it on any “free graphics” or “clip art” sites or collections, or I will come after you with my team of lawyers. Or ninjas. Or ninja lawyers. And you wouldn’t want that. =)
Feel free to let me know if you’ve found these useful by posting a comment below.
