My Web Header Pics

Emotions by Mike is an outstanding website. Mike is a freelance web graphic designer. His site has a lime green background, colorful images, and a white serif title font with added handwritten light green font that gives the header a very personal touch. The site body has a sans serif font and script font for navigation buttons.

The Sofa website has a minimalistic approach for its header. Sofa is a software and interaction design company. The Sofa website has a fantastic use of serif fonts and a monochromatic color scheme that give the website a professional but simple look. Navigation items load content on the main page keeping all the information together.

Dave Barnes has an interesting blog. The use of handwritten fonts in the blog header and navigation items give the site a very personal feeling. Imagery, script fonts and collage photography tie together to create an urban notebook style.

New Blog Header Font

This week I learned how to change fonts in my blog. Changing the header font was quite complicated. My blog already had an image header, so I had many unsuccessful tries before I realized that I needed to upload a transparent image with my blog title in order to keep the existing header image.

I used Tahoma as my blog title font, an existing font in my font library . I wanted to use a script font to give the blog an informal personality. I went to dafont.com and download several handwriting fonts such as marker felt, chalk duster and tall paul. However, the image in my blog header with dissolved squares didn’t match any script fonts. So I decided to go for a sans serif font that gave the header a modern, clean and legible style and fit with the squares.

I added drop shadows to the title name text, to give a sense of space using a darker green color for the shadows. I kept normal blend mode.

I exported the resulting image as png after checking optimized images. PNG files keep the transparent background when uploaded.

Web Image File Formats

When uploading images in a blog page or web site the most common file types to use are: jpg, gif and png.

File extension jpg (related to JPEG - Joint Photographic Experts Group) is mostly used for bitmap images (photos, pictures etc.). JPEG is the best image format for photos and pictures with high number of colors for use on the internet or e-mail.

Finding a JPG file is pretty common. I spotted this image at Cyberpoetry, it’s an art work titled “Broken lead”. It has a beautiful composition with great use of negative space.

File extension GIF (Graphics interchange) is a standard bit-mapped graphics file format. GIF supports 256 levels of color. it is well-suited for simpler images such as graphics or logos with solid areas of color.

Clipart, cartoon and simple drawings usually have GIF file, so I went to a kids site scouting for those. I found this image in Kids News Magazine. It’s a cute drawing with bold colors totally appropriate for this site.

File extension PNG (Portable Network Graphics) is a bit-mapped graphics format that employs lossless data compression, similar to GIF. PNG supports 16.7 million colors, also supports index color, grayscale, true color, transparency, and is streamable. PNG was designed for transferring images on the Internet, not professional graphics. However, the file size will usually be less that of GIF files.

It took me some time to find a PNG file. I found this image at Dress up Games page. It’s a very small file with limited color palette and simple lines suitable for this page.

Oliva Verde

I created the Oliva verde logo for a fictitious tapas restaurant in Graphic Design Studio 3. I wanted to experiment with file types by uploading a flat color logo. I found out that, for this image, the PNG type was smaller that the GIF. I added a shadow to make it look more dimensional and highlight the outline of the logo.

Postcard from Mount Shasta

Mount Shasta is a beautiful mountain and the crown of clouds make it even more majestic. In this picture, I added a border, gradient and shading. It was quite challenging to achieve the final result. I was getting confused following the instructions, but It turned out pretty realistic. The image file type is PNG which resulted in very small file with good quality.

Gaudi's Mosaics

I have a fascination with Antoni Gaudi, a Spanish architect who belonged to the Modernist style movement. Recently I visited Barcelona, Spain and had the opportunity to enjoy seeing Gaudi’s work. In this image you can see a cropped portion of a picture of the ceiling at the famous Park Guell. After cropping the mosaic’s image using the pen tool, I adjusted the brightness and saturation. Finally, I reduced the image to a smaller size to better fit in my blog, and changed the file type to JPEG small quality, maintaining a good image.

A Walk to Remember

This summer I traveled with my family to Ireland with the objective to walk the Wicklow Way. This picture really summarizes our trip, as well as the long journey of parenting. I cropped the picture to emphasize the two figures and elongate the road. The uploaded file is a JPEG with smaller quality to reduce file size. Since it’s a photographic image even at smaller quality it still looks alright.