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.

More About Colors

Btemplates has a big collection of blog templates that make it easy to find color scheme examples. Monochromatic schemes consist of a base color with a couple of tints and shades. A good example is a template called Cosmetic Girl that has desaturated pink as its main color.

The template called Pepper has mainly an achromatic scheme with minimal touches of color. Achromatic schemes have various shades of grays. Pure achromatic blogs are difficult to find, usually some color appears in the form of links and small logos.

Analogic colors are next to each other in the color wheel. The template name Ink Stain nicely combines blue, purple and pink.

Complementary colors are in opposite sides of the color wheel. An example of a complementary template is the one called Sosuechtig Orange, that uses orange and cyan. The template called Tired Girl is a good example for desaturated complementary colors using dull shades of red and green.

Split complementary color schemes use one color and the two next colors of its complement. An example for this scheme is Blogy Ondas that uses saturated blue with yellowish green tint and shade orange. To create a harmonious design two of the colors are used with tints and shades.

Color Scheme

I went back to my previous classic template hoping to have a better chance of changing the colors. My objective for the blog is a fun, personal, and vibrant look. I decided to use a split complementary color scheme. Since I couldn’t change the header color I decided to base my triad around green lime. To keep it harmonious I used some tints of greens and shades of purple. I used a fully saturated orange to give the post titles emphasis. I used tints and shades of the colors in the sidebar to dull it and keep it as secondary information. Even though green is a cool color, the lime green value with the addition of the orange and purple makes the blog have a warm scheme. I was unable to change the color background, so I kept the page header white which really makes the blog name stand out.

So Many Templates

It is incredible how many blog templates are available to download for free on the internet. Some people are creating amazing artwork to help bloggers. My thanks to all of them.

I wanted a blog template that would best represent the blog content and myself. The one I chose is called Paper Wall, but it looks more like an artist’s studio floor. For some years, I have been taking painting and drawing classes. The template reminds me of the messiness of the paint, the vivacity of colors, and the texture of papers. All of this makes me feel joyful and alive. This template can easily resemble my ideal art studio. The color of the header beautifully stands out in the background. The sidebar column with the clip boards gives the template a work-in-process feeling. The post date is displayed with pieces of paper and thumb tacks, giving the blog an informal look. These touches give the blog a feeling of personal notes witch really defines the content.

However, there are somethings that I wasn’t happy about and I couldn’t fix. When uploading the template, I realized that I couldn’t make changes through the dashboard layout menu. The font and color menus were not working. Even though I don’t have any knowledge of HMTL coding, I manipulated it somehow to make the blog title fit. The page elements menu was not responding either. I couldn’t move the blog post elements, so I decided to keep the default format rather than moving the “posted by” line to the bottom. The search box also looks unfinished and I don’t know how to dress it up. I would welcome any thoughts or suggestions.

Template Thoughts

I’m a novice at blogging. I used to hear that “it’s so easy to create a blog”. But, after watching Carolyn's videos and trying to customize my blog, I realize it can be quite challenging. It is easy to create a simple blog, but difficult to create an engaging and appealing blog. I chose the TicTac template for my blog. The lime color header with diffused overlapping squares give the page a vibrant and dynamic look. The template follows the 2/3 ratio with a right column layout. As a left-to-right reader, I felt the layout is comprehensible and well organized. The sidebar column is in the right column, closer to the cursors facilitating movement. I changed some of the colors and fonts. I chose orange for post titles to emphasize posts and direct viewers to them. I also increased the page header font to make it stand out. I chose green for sidebar titles to maintain unity and to keep the gadgets de-emphasized.

In Plain English

Do you have a question about new technology, computer software, saving money, or choosing a light bulb? Chances are that you can find an explanation at Commoncraft.com. They specialize in crafting educational videos that help to explain many complex topics “in plain english”. In three-minutes videos, you would get a simple lesson in a fun and easy going style.

Need an explanation? Go to Commoncraft

Why I'm here

I’m Paloma Lucas, a graphic designer in process. I’m in my second year at Foothill College. For the past year, I have explored several programs of the Adobe Creative Suite, created digital art, traveled throughout the history of graphic design, discovered the thrill of photography, and sharpened my drawing skills. This quarter I’m going to dive into web design, splash ink in printmaking, and build my foundations in 2D design. I want to have a well rounded graphic design perspective that will help me later in my chosen path.

Graphic design is all about visual communication and presentation using typography, visual arts and page layout techniques. The internet has added complexity to the process of creating effective visual communication. End user interactivity adds a new consideration to the design process. I want to learn more about how to create a web sites that enhance the interactive experience of a web visitor by the way they look and feel. This will help me have a deeper understanding of design principles and techniques.