» 2008 » March- tutorial blog

Slide out and drawer effect

The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks. The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area.

VISIT TUTORIAL
VIEW DEMO

(more…)

Tutorialblog was started in 2005 to provide Photoshop Tutorials on various techniques and effects. It was acquired in 2008 by Hecta Media with aims of broadening the scope of the site and becoming a useful resource for beginner and intermediates alike.

Tutorialblog is published using Wordpress and a custom theme by Kooc
Media.  We also use a number of useful plugins: wp notable, digg this, Akismet, Post Ratings and Translator pro.

The logo typeface and navigation bar are set in the brilliant FS Clerkenwell typeface. The headings are Times New Roman and the body font is Verdana.

Anything else you’d like to know ? Just ask.

Ever since CS, Photoshop has had a feature called “Layer Comps”, which is largely underutilized by designers. The concept of the Layer Comps is very simple, it’s just a quick way to take a “snapshot” of which layers are turned on and which layers are turned off in your document. Think “compositions”. Some Adobe Photoshop files get to be VERY complicated in terms of number of layers, and it can be useful and efficient to be able to jump back and forth between different “states” of your document.
(more…)

This tutorial is a guest post by Pixblix.com

1. Not every image will lend itself well to a repeating background. I like to select a portion of an image that already has a bit of a pattern to it and also has similar colors, say for example a group of flowers. For this tutorial, I’ve chosen an 800×600 portion from a picture of spring fruit tree blossoms. For now it is much easier to work with a larger image than a tiny one; you can resize the tile when it is finished. The objective of this tutorial is to modify the photo so that the bottom edge matches up with the top edge and the left edge matches with the right creating a seamless, repeating background when it is tiled.

   

2. Turn the photo inside out so that all of the corners are inverted to the center of the photo. Do this by choosing the Offset filter: (more…)

Blurring, at it’s most fundamental level is the softening of an image. It is standard procedure to use a very slight blur on photos straight off your digital camera as often they are overly sharp. Sharpness, of course, isn’t a bad thing but it is more beneficially applied at the end of your retouching sessions than at the beginning.

There are many other (more creative) uses for blur though. Here are some examples.

To Imply Depth

Depth of field looks best when done in the camera, but when compositing photographs, you can imply distance and depth by blurring further away objects.

(more…)

We are seeking guest bloggers for TutorialBlog.

If you’re interested in submitting a post for the front page, please send us a brief message here expressing your interest in contributing a guest post. Please include the subject of your proposed post (posts should be related to one of the subject categories on the right side of the main page) but not the entire post itself. We’ll get back to you with details on how to submit the full post.

Posts should not be simply promotional pieces for your product/website. However, you’re more than welcome to include a brief blurb about yourself and a link your website at the bottom of the post.

Looking forward to hearing from you!

Sometimes you don’t need to go any further than your own neighborhood to find color inspiration. Surely not every neighborhood is as eclectically colored as Portland, but I’m sure many are! Check out these very nicely painted earth toned homes:

(more…)

If you design a fair number of websites from scratch, you’ll find yourself doing a lot of the same setup work over and over and over. Create directory with images folder. Create index file, write content type declaration, write basic page structure. Create CSS file, write CSS reset, write basic CSS structure. Just that setup can take you a decent chunk of time and wither your enthusiasm for getting into the meat of your design.

In this next installment of Designer’s Toolbox, we are offering you a way to avoid all that wasted time with a Blank CSS Template.
(more…)