Blogging Sueblimely

My pick of the best ten free WordPress Photo themes are all built to work with WP 3+ and, as well as being able to change the menu and backgrounds, all have extra features built in. There is a wide range of design and layout options here. Some of these photo themes have feature post sliders and others gallery views which you can set to be your front page.

Even if you do not intend to blog, WordPress can be used as a very easy way to build a website without any coding knowledge.  With a little bit of learning you can easily change the colors to suit yourself and  create something unique so that your photos or artwork stand out.

Boldy

Theme Site Demo Download Documentation

• Nivo Slider
• WordPress 3.0 Menu Management Support
• Easy to set up – Theme Options Page
• Latest Tweets Built-in Widget
• Built-in Pagination
• JQuery PrettyPhoto Lightbox
• Ajax based contact form
• Dropdown Menu

Journal Crunch

Theme Site Live Preview Download Documentation

• WordPress 3.0 Menu Management Support
• Easy to set up – Theme Options Page
• 9 Shortcodes
• Built-in Latest Tweets Widget
• Built-in Pagination
• JQuery PrettyPhoto Lightbox
• Ajax based contact form
• Dropdown Menu

Minimatica

Theme Site & Download Demo

• Clever image gallery slider supporting default photo sizes.
• Gallery & Blog View
• Post Thumbnails
• Post Formats
• Audio & Video playback
• Clean, organized & documented code
• Child themes can be easily built upon it
• Support via Forum

My Corporation

Theme Site & Download Demo

• Minimalistic business and/or portfolio website
• Custom post types and admin options for complete control over the homepage layout

Photoria

Theme Site & Download Demo

• SEO Options
• Localization ready
• jQuery Slider
• Custom Widgets
• WPZOOM Theme Options Panel
• Custom Templates

Quik Gallery

Theme Site & Download Demo

• Gallery style homepage/category/search page layout using featured images
• Built-in NivoSlider
• Blue, green, pink or red color options.
• Header ad spot
• Slimmed down CSS
• Optional Widgetized footer
• Custom logo option

Rocket Wood

Theme Site & Download Demo

• Flickr and Fancybox Integrated
• 30+ Shortcodes
• 14 Page Templates
• 9 Custom Widgets
• Custom Logo and Favicon
• Upload a Custom Favicon
• jQuery Drop-Down Menu
• Working Contact Form
• Twitter Integration

Shaken Grid (Free)

Theme Site & Download Demo

Elements are arranged vertically then horizontally according to a grid resulting in a gap-less layout even with posts of varying heights.

• Two Color Schemes – light and dark.
• Theme Options panel to change the color scheme, your favicon and add a stat
• Uses CSS3 (font-face, transitions, drop shadows, rounded corners) and jQuery but displays fine in older web browsers and Internet Explorer 7+
• Widgetized Sidebar

Simply Delicious

Theme Site & Download Demo

• Free blogging theme based on mmminimal.
• Minimalistic theme features big images, clean styles and easy browsing
• This theme heavily relies on big 640px wide images.

Tech9

Theme Site & Download Demo

• Options panel
• Custom cufon fonts
• Sliders
• White/green color scheme.
• 2column fixed layout

WP Folio

Theme Site Download

• designed by artists to meet artists needs
• minimal design that emphasizes your images (at 900px wide!)
• Features separate design for your portfolio and a news/blog section
• widget-ready sidebar
• automatic rss feeds so users can subscribe to updates to your site
• Theme Options for cusom colors and fonts
• uses the latest web standards
• Allows you to choose thumbnails to represent your project
• Sample Child Theme included to keep your tweaks independent of the parent WPFolio theme.

Are you confused when it comes to photo/image dpi, kbs, ppi and pixel size?  Do the words Image Optimization mean nothing to you?  You are not alone.

Have you uploaded photos to the web to display to family and friends on such sites as Facebook and Flickr to find that it takes forever to upload or the page freezes before the upload finishes? Have you sent emails with image attachments that take  a long time to send.  If so, it is important to know the basics about image sizes for the web.  If you are displaying images on your own website or blog you will need to understand in more detail.

Images that are slow to send, upload or load have large file sizes. In general this also equates to the actual size of the image but two photos that look the same size can have very different file sizes depending on their quality.

Although faster internet speeds mean that you can now use larger file sizes than a few years ago you still have to cater for those people using dial up connections and for those whose speeds have been reduced because they have used up their allotted allowance of bandwidth.  Even with faster connections large size image files can take too long to load on a web page. You are likely to lose your reader’s interest if they have to wait too long to view your image.

What does image file size mean?

Here I am talking about the size in bytes, kilobytes (kb) or megabytes (mb).  To get an idea of the file size of images stored on your computer:

• Windows users can open windows explorer (not internet explorer) to view their files. If you are in thumbnail (large icon) view, hover over an image and its size in kb or mb will show up in a pop up box. If you are in detail view you will see the kb size in the size column.

• How to view image sizes on a MAC if they are not already showing;  Select list view from a Finder window,  then open “View Options” from the View menu (or hit Command+J). Select the checkbox next to “Calculate all sizes”.

Photos taken with my camera have a file size of about 3-6 mb or roughly 3000-6000kb (1024kb=1mb) whereas the 125×125 square images in my right sidebar are all under 20bytes (0.020kb) The original file size of the photo below was 4044kb but the reduced size shown here is only 33.3kb. A huge difference isn’t it? The quality of the image as seen on the web has not suffered at all.
 

Why can you reduce image file sizes so much for the web

A computer screen is still incapable of displaying images at the same quality as your camera saves or your printer prints. Your camera may save an image at  over 300dpi (dots per inch) or higher but your monitor just cannot display it at this resolution.

Pixel Size

For monitors it is the pixel (px) size that counts when displaying images and the pixel size depends on what resolution your monitor is capable of displaying. Pixels are the tiny square or rectangular dots that your monitor uses to display text and pictures.  PPI refers to the number of pixels per inch.  On  a higher resolution monitor, the pixels are more numerous and smaller, so what you see on the screen  also appears smaller and more items fit on the screen.  According to a January 2011 survey by w3schools http://www.w3schools.com/browsers/browsers_display.asp 85.1%  of computer users now use screens with a resolution higher than 1024×768 pixels . If your webpage content is larger than this scrolling is needed.

Although you can now display images with many more pixels than a few years ago you still have to be concerned about upload time and webpage loading times. Here is an example of three images (click thumbnails to see full size ) all the same pixel size, but they have been saved at different quality.

100% file size 553kb

50% file size 91.7kb

25% file size 61.6kb

As you can see the image saved at 50% quality still displays very well, when it is saved at 25% it is not good enough (see all the waves in the sky). The file size saving is also much less between the 25% and 50% images than between the 50% and 100%. The 50% image looks fine on my  screen and I would consider that it is optimized for the web.

For a website I suggest you use images of lower pixel size than the 91.7kb I have used here, as it still takes a while to load (far too long if you have a number of images on the same page).  As I have done here, you can display a smaller size image or a thumbnail on the main page which links to the larger image. Keep in mind that the better quality your image the more likely people are to copy it, even if you have a copyright notice on your site as the images will print out better. I would not normally use images of this pixel size in a post as they would be too wide for this blog column which is only 515px wide.

Here  are close ups of the images – (click on the thumbnails for the larger images). You can clearly see the pixels here. Again at 50% there is not much difference, at 25% the colors start to smudge.

100% quality

50% quality

25% quality

When you are deciding what pixel size to use for your image you need to consider the issue of displaying information “above the fold” (within the area you see without scrolling).  Information (text, image , video etc) that you want to be noticed the most should, where possible, appear above the fold. This way they are likely to stay on your page longer and to click on any buttons or links you have placed there.

Tools to check web page loading speeds

Free online tool – Web Page Test

Page Speed online or use with browser extensions for chrome and Firefox

There are many programs that can reduce your image sizes for you and I will cover that in a future article.

Work with WordPress MU (multi user) is the reason from my recent absence from blogging. The East Coast area of a UK charity, the National Coastwatch Institution, needed a rebuild of one its website to go along with an extension of it’s activities.

Although you may not have the same needs as this organization you may consider using WordPress MU if you want to develop more than one blog.

I had originally created the coastwatch site using the Joomla CMS system but, as the interface was complicated for them, WordPress was my obvious choice. After working with WordPress on various sites for a year or so, I know how flexible it can be. I was pleased to see that immediately after the new site was up and running Keef, who will be a co-author, had written a post and just needed me to tell him to hit the media button to add images. So much simpler.

As NCI East Coast now comprises of two coastwatch stations, managed by two separate committes, each needed their own unique identity, I decided on using WordPress MU to make administration simpler. Both stations now have their own unique pages and blogs on their own virtual subdomains.

The blog and some pages on the main East Coast site are being used as a private member only area for both of the coastwatch volunteer teams. Plugins turn this section into a true community site.

The other East Coast pages are public and contain information common to both stations. By using WordPress MU, the three blogs and three sets of static pages (NCI Eastcoast, NCI Skegness and NCI Mablethorpe) can all be managed from one admin dashboard.

I am hoping to see lots of posts written on the site to gain it speedy search engine page ranking and to raise awareness, more volunteer watchers and, hopefully more funds, for this worthy charity organization. Their volunteers man the coastwatch stations daily, making sure beach and sea goers are safe.

You may like to go along and leave a comment, joining me in congratulating them on their hard work and efforts in getting their second station up and running.

I will expand upon the advantages of and uses for MU in an upcoming post. For those of you interested in setting up an MU site I will also be talking of how to I set the East Coast site up, the plugins I used and where to find futher information.

I will also be discussing how you can use WordPress, including an existing installation, or WordPress MU to create a community site. As with the NCI Eastcoast example, you do not have to run your whole site as a community site – you can just have it as an add-on to a normal WP site.

Do you come across web and blog templates or themes that are ideal layout wise but the colors do not suit you or your site’s purpose. These are relatively easy to change via a templates CSS style sheet but you may need some help choosing the correct color combinations. There are numerous free online tools to help in your decision, so many that it can take time just choosing which tool to choose. Rather than creating a long list of what is available I have chosen a selection of a variety of the more comprehensive but easy to use free tools:

Mimicry is the highest form of flattery

If you are short on ideas, or are just unsure what other colors you can add to those you already like, browsing other websites can be useful but time consuming. Screenalicious, which showcases websites, also displays the color palettes off each featured site, along with the corresponding hexadecimal numbers.

If you have seen a website whose colors you like but are having trouble reproducing them I Like Your Colors will tell you exactly what they are. Simply type in the site URL and you will be given a graphical representation of the colors and their numbers. Here are the results from the Mashable site:

The Firefox Addin Colorzilla not only provides an eye dropper and a color picker tool but allows you to analyze and save a color palette of any webpage.

DOM Color Analysis Results

http://www.smashingmagazine.com/

Color Palette Generators

Then there are the many color palette generators. A few stand out from the crowd with regard to features and ease of use:

Adobe Kuler allows you to explore and vote on color schemes created by others as well as create, save and share your own. You can generate a color theme from scratch or use colors from an uploaded image or from Flickr. If you are not feeling creative you can choose from the gallery of user created schemes.Your swatches can be downloaded as Adobe Swatch Exchange (.ase) files for use in Adobe CS (2,3 and 4) programs. Kuler is integrated into CS4. If you do not have these Adobe products an Adobe Air application, Color Browser, allows you to import and save downloaded .ase files to.organize your favorite color palettes locally.

Color Lovers offers simple and more advanced color palette creation tools; although I find the simple tool harder as it offers no suggestions as to color combinations. As with Kuler you can browse and search for user contributed color palettes and use these yourself. Color lovers provides a whole host of other features to help you with your creations. Vote on the user created palettes and patterns and submit your own. View a showcase of websites to keep up with color trends. Connect with others via forums and groups. Follow their colorful blog. Proclaim your love of Color Llovers to the world by purchasing their T shirts.

Aviary Toucan allows you to create a color palette from scratch or choose colors from imported images (from Flickr, Facebook, Picassa, by URL or from your computer). A “color deficiency preview” shows you how a color palette will appear to those with various different kinds of color blindness.

Color Jack has two tools, Color Sphere and Color Studio, providing you with plenty of ideas and suggestions as well as catering for your own creativity. Export your creations to a bookmark, delicious, illustrator, photoshop or to a URL.

Colors On The Web has 3 basic color tools and mixers as well as articles covering color theory, color terms, combining colors and contrast..

Absolute Color Picker is a free downloadable program that lets you select and pick colors using various color models. It also features a color picker, color scheme generator, color history builder, color scheme management system, screen color grabber (eyedropper)

If you just prefer to choose from existing color palettes rather than create your own there are a number of sites, in addition to those mentioned above, that offer listings with search capabilities including:

• ColorCombos – they also have a tool to “grab” colors other websites.
• Colors on the Web.
• Color Schemer Gallery The Color Schemer products are not free but you can use their gallery and forums without buying..
• Color Hunter is different in that its user created palettes come from uploaded images and its tags are based on the type of image as well as colors.

Yet more tools

Your header image needs to be in line with the other colors on your site. You may have an image already chosen and then base your other colors on this. If not, Idea Labs clever MultiColr Search Lab can help you choose images using colors you have already decided on or just give you ideas for an overall color palette This tool searches through 10 million Flickr Creative Commons images based on your choice of up to 10 colors. They also provide other tools which search the Alamy stock photo site.

Google have very recently integrated color search tools into their Image Search. You are able to filter Google images by the predominant color. Click on “All colors” above the search results and you can choose one of the 12 available colors based on your search terms. For example this was a result of a search for beach sunset filtered by the color pink:

To ensure accessibility for those who cannot distinguish colors easily there are tools to check for legibility and contrast on your site. In addition to the Color Deficiency Preview tool in Toucan, ColorSelector is free desktop software from Fujitsu for judging the legibility of background and text colors. The online tool, Color Accessibility Wheel, shows you how a background and a foreground color will look to those with three types of color blindness, based on colors you choose.

You may not be interested in whole palettes of colors but just want to know the details of one particular color you see online. Eyedropper tools are the simplest way to accomplish this.

• Instant Color Picker is free to use on one machine, with nag screens, or to buy. More than a basic color picker, this tool allows you to zoom in on websites, save up to 20 colors and copy color swatches as bitmap and paste it to other applications. You can also test color combinations using various layouts.
• My trusty favorite program MWSnap is a screen capture tool which includes a color grabber and measuring tool.
• If these are more than you need try the more color grab only ColorSelector for PC or Mac from Fujitsu or ColorPic

Finally, for WordPress users the Theme Tweaker plugin displays the existing colors from your current theme, and gives you a color picker to replace them. You can also change colors in bulk by for example inverting them, converting them to greyscale.. Once you have chosen your colors, you can preview or activate the new theme. You can save your new stylesheet locally and then upload to your blog server to replace your current theme or create a child theme.

There are a whole host of Firefox addins that will help you with your site colors which I will cover in my next post.

You now have the tools at your disposal to choose your site colors but may not have the know how to implement them into your theme. In upcoming posts I will provide you with instructions and details of tutorials and tools you can use to help you with your CSS stylesheet coding.

The internet has come alive with free Christmas gifts for download. It was hard to choose from all that was available but I have tried to bring you a selection of the best. I have spent hours searching, likely a subconscious excuse to put off wrapping Christmas gifts.

Graphics and Icons

Smashing Christmas Icon Sets Smashing Magazine always has great resources.

Nicu’s holiday gallery contains these:

There are 16 icon sets to be found at FreshFreeStuff.net including social networking and RSS buttons – Free Christmas Holidays Icon Roundup . This is a selection from the sets available:

Gifts From Designers To You: Best Of 2008 – goodies include icons, fonts, wordpress themes and headers.

50 Most Beautiful Icon Sets Created in 2008 including this Christmas set:

A set of Christmas smilies is offered by Christmas Corner, many of which are animated:

DigiScrapDepot.com has 3516 Christmas Freebies if you want to
decorate the pages of your Christmas photo scrapbook pages.

1stWebdesigner brings us a range of Photoshop brushes- 48 Snow, Ice, Snowflake and Christmas Brushes

Mel’s Photoshop Brushes gives us a set of Christmas Illustrator Brushes

A search for Christmas on Adobe Exchange shows a plethora of Illustrator and Photoshop images, gradients, patterns, shapes, styles and brushes.

Desktop Wallpapers and Screensavers

25 Outstanding Christmas Wallpapers to Decorate your Desktop! from sagacious of Weird Resources

Vlad Studio has a whole range of Christmas Images/Desktop Wallpapers (higher resolution by subscription) and E Cards.

Wallco.net has a huge selection of free Christmas wallpapers in various resolutions – 42 galleries to date. I really went to town with these and created a whole folder of them to use as a My Pictures Slideshow Screensaver.

To create your own Christmas screensaver slideshow (or any other sort) in Windows XP – go to Desktop/Properties/Screensaver and choose “My Pictures Slideshow” in the drop down box. The default folder is My Documents/My Pictures but in settings you can choose any folder of pictures you want.

Not free but a good bargain – Woo Themes have a 4 for 1 special going until 24th December – $70 USD for a single licence and $150 for a developer licence.

Christmas Image Tutorials

Strobist lets us into some secrets of How to Photograph Christmas Lights using even a basic digital camera. I love Christmas lights although the ones I have appreciated the most this year were the new green and red lights in the car park of a newly renovated shopping centre which showed me the way which spots were free.

Smashing Magazine gives us 60 Beautiful Christmas Photoshop Tutorials

PS Lover has a whole range of Photoshop Christmas Image tutorials but turn your speakers down as they advertise those very annoying smilies who keep saying “Hellooo”

What not to do when blogging

Finally but not least, Michaela Lica of eWritings has provided us with some good Christmas blogging reading by publishing her ebook Blogging Tips: How to be Cocky and Vexatious – a collection of blog entries that followed her 10 Ways to Make Your Fellow Bloggers Hate You meme.

Thanks to Design Bliss for putting me on to many of these freebies in their – Over 100 Free Christmas Design Resources – A Design Bliss Mega-List post

I am now off to join the teaming throngs at the shopping centre which is enough to provoke this Christmas emotion in anyone: