1stwebdesigner - Graphic and Web Design Blog » Tutorials

The Ultimate Guide to Getting Started with Zen Cart (Part 2)

Kevin Stanley — Tue, 31 Aug 2010 10:00:51 +0000

This article is the continued part 2 version of Getting Started with ZenCart. In part 1 we learned about ZenCart, and it’s basic files and getting started with the “Bare Bones” template. We also learned a little about the admin screen provided by ZenCart. In this part 2 version I will go more in depth about using and customizing ZenCart OpenSource Shopping Cart.

Custom logo of your e-Commerce Store

First we will go back to our files that we downloaded in part one. Within the header.php file we can see the following code:

header.php

// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');

You will notice that the logo width, and height is defined in this area, but we will also need to modify our template .CSS file to make it match to what we add here. This will tell the template what dimensions we want, and the css file will give the matched output. Changing one or the other and not both can sometimes output errors.

The logo image itself is located in the template directory under the “images” folder. The filename can be changed if you want, but again must be defined in the header.php file.

The Catalog Menu

You will be using this option in your admin panel to add and remove or modify products to your store. Though it is pretty straight forward I have still had many clients ask me to help them with it. It seems like if I explain it to someone, then they understand it and can do it themselves, so instead of assuming we can do this part – I will give a detailed explination. Be sure to make a note that even under the catalog menu, when items are added or modified – you will always have extra options that appear beside or below each item. I see many people a lot of times miss these extra options, then later wonder where to change something at. Please be sure to take a few minutes to look around on each screen to see what options are available to you.

Here is a list of each of the options available under the Catalog menu:

1. Categories / Products
This is the main part where you can add new categories to your store, and add/change/remove products that you have available for sale. Again, please check all the options available to you when you are under these sub-screens.

2. Product Types
This section will allow you to select a generic type of product you are listing – Either general, music, or digital download. This section by default is ok to leave alone unless you want to specify products into sub-areas.

3. Products Price Manager
This will be the area you modify prices in your store. You will add the prices when you add a product, but if you wish to modify any of that data later on, then you will need to visit this area to change it.

4. Option Name and Option Value Manager
For changing data that has been input already when adding items.

5. Reviews
This is where users will be leaving reviews and you will be able to moderate it. Check it often and be sure to approve comments and feedback being left by your visitors.

6. Specials
This is the section you will need to visit to add special discount deals to your website. It will display as showing the old price, then the new price highlighted in red to show it is a “special” or on sale item. You can set the variables for these items as well as moderate and edit them under this screen.

7. Featured Products
This is the area to add items that you want to be “featured” – If you choose the box under box layout that displays featured items either on your page, or your sidebar, then you can set the specifics for these items under this section. This is a good way to show items you want to sell either on your sidebar or main page. This can also be set to randomly show items each time the page is refreshed.

8. SaleMaker
Make your own sale, and choose how to run it. If you want to make everything 10% off or make it 50% off and last for 3 days then this is the section you need to visit. You can also specify categories and other variables within this page to specifically suit your needs.

9. Products Expected
This will show the items dates that are out of stock and expected back in. These variables can be set from a few different screens and modified under this section. If you are out of inventory on an item and want to change the status to show back in inventory then you will use this screen.

ZenCart Addon Modules

Many modules are available for ZenCart. Most of these can be found directly on the ZenCart website. Modules range from PayPal payment addons, to extra sidebar modules. Each of these serves a great purpose and can help out when customizing a ZenCart install. I have found a few modules that I usually install with each website I create with ZenCart. You can browse through the repository of modules by following the link [HERE]

Here are a few of my favorites:

1. Flat Rate Clone
2. Blank Sidebox
3. Ad Manager

Zen Cart Define Pages Editor

This is located in the admin panel of your ZenCart install. You can get to it by going to “tools” then selecting “Define Pages Editor” – This allows you to select a page and edit it within your ZenCart admin panel. This makes it easy to modify some of your other pages on your website. From here you can add information to your home page, or modify your terms and conditions or even your contact page.

The defualt available pages to edit are:

Checkout_Success

Conditions

Contact_Us

Discount_Coupon

Main_Page

Page_2

Page_3

Page_4

Page_not_Found

Privacy

ShippingInfo

Site_map

These are all self-explanitory, and when edited through your admin panel will show the changed results on your website. You can also choose to edit via text editor or HTML within your admin panel.

Zen Cart EZ-Pages

This is also in the admin panel under the “tools” menu option. This is an easy way to create new pages for your website. This option panel will also allow you to select where on your website the pages are located, and where the link to them is displayed. You can use this to create a bio page for your website, or even a different about page to give additional information about your company or website. EZ-Pages makes it very simple to add more to your website without having to code more template files. You can also edit the pages you have already created from here by selecting the “edit” button on the right side of the screen after selecting a page.

Custom Zen Cart Templates

For those of you looking to create a ZenCart Template or Theme from scratch – Here is the basic file structure that will need to be followed. You can either copy the default them and modify it from there, or even use the before-mentioned theme “Bare Bones” to create one as well. Most theme templates work the same as basic HTML and CSS – so with good knowledge of both of these you can easily create your own template.

includes/languages/YOUR_TEMPLATE/english.php
includes/languages/english/YOUR_TEMPLATE/index.php
includes/languages/english/YOUR_TEMPLATE/header.php
includes/templates/YOUR_TEMPLATE/template_info.php
includes/templates/YOUR_TEMPLATE/common/tpl_header.php
includes/templates/YOUR_TEMPLATE/common/tpl_footer.php
includes/templates/YOUR_TEMPLATE/images/logo.gif
includes/templates/YOUR_TEMPLATE/css/stylesheet.css

Make sure when personalizing a template and creating one, you use the template_info.php file within your theme to tell ZenCart the information it will need for your files. Here is a quick look at the information:

The above example shows the name of the template (Which will also be displayed within your admin panel when selecting a template to use) As well as the version number, author, description, and a link to the screenshot. Creating your own template will require a file like the above example to ensure your information is properly processed to work as a template for ZenCart.

In Closing…

I hope everyone has enjoyed this two part article on starting with ZenCart. If there are any questions or requests then feel free to comment below and I will try to help out as much as possible. I have found ZenCart to be VERY powerful and a great opensource shopping cart platform to use on a variety of websites. Thank you for reading!

The Ultimate Guide to Getting Started with Zen Cart (Part 1)

Kevin Stanley — Mon, 30 Aug 2010 10:00:41 +0000

In this article I will be covering the basic installation and functionality of ZenCart eCommerce shopping cart. I have been using ZenCart on clients eCommerce websites for a while and found the most common questions about installing, and modifying along with the most edited files to get you up and running with ZenCart. I will also cover some basic theme creation for ZenCart as well. This should be an excellent starting point for everyone looking to setup an online store and create a custom look and feel.

When I first started with ZenCart I found myself searching the web trying to find where the most simple things were located. Even for me on the ZenCart website itself I found it hard sometimes to find the simple answers I was looking for. I was looking for basic things like changing the page title, and editing the meta information. These small things seemed so hard to find at first. The more I found myself using ZenCart over the past year I have found out easy ways to change and modify it for each website I have it on. I learned that it actually wasn’t as hard as I was making it to begin with. Even though you can find most of the information online and different sources, I wanted to make an article that was a central location for doing the main things to install and setup ZenCart.

First things First

Now go grab a copy of ZenCart to install on your server. You can download the latest release by visiting here:
ZenCart Download
This will come with everything you need. The install is pretty straight forward. If there are any technical questions for those of you that have not installed a script of any kind before, then please see the help file documentation or visit the ZenCart website for installation help. I am going to assume that most of us here have installed a script before so I can move on to the good stuff.

Right After The Installation

Right after the installation you will now have your script up and running for the first time. You will notice that by visiting your site that you installed it on, there is a lot that seems to need changing. First off the ZenCart logo is in place, and all of the text on the page is aimed at ZenCart with links back to ZenCart. Considering that it’s free, I don’t mind seeing it all at first – But let’s get started. We will need to select a theme to use, as well as change the front page text, and add our meta information.

Let’s Get Started

To Start, I want to take a look at the file structure. There are a few main files that can be easily edited to modify many different things on our ZenCart powered website. To make it easier on myself I have found that downloading these files and saving them locally allow me to make changes on my desktop, then upload the modified files to my server via FTP to make the changes to my website.

Let’s start by downloading the following files using your ftp software and logging into your website:

/includes/languages/english/index.php

/includes/languages/english/header.php

/includes/languages/english/meta_tags.php

We will do more with these files later one, so be sure to save them where you can access them later on. These files will do most of the setup for your ZenCart installation. I will cover these each in more detail after we choose our theme and get the basic site setup to use.

Get that Template!

Now we will choose a theme. I have found one theme that I like the best. It is somewhat of a “framework” theme that is very easy to work with, and has always allowed me to make a custom site for every client I have used it for. The theme is called “Bare Bones” – This theme is basic, very easy to modify, and a perfect starting point for a custom ZenCart template. You can download the Bare Bones template by clicking [HERE]

Logging In To your ZenCart Installation

Now it is time to log in to your admin account of your ZenCart Install. To do this you will visit your website domain name then add the forward slash and “admin” – You can then use your login name and password that you set during the install of ZenCart to access the backend of your store.

This is where most of your business end will take place. From the Admin panel you can setup the “Boxes” or “Layout” of your site, as well as add / remove products for your store. We will start with a basic overview of the menu functions and screens to give you an idea of how it all works. First off let’s go change our template.

To Change your template in ZenCart use the menu and select “Tools” then select “Template Selection”

Now you can see the installed templates located on the right hand side of the screen. Selecting “Edit” on the right side of the admin panel will allow you to select and change templates within your ZenCart Install. Let’s select the Bare Bones template we have uploaded and activate it now by selecting “Update” below the drop down box.

Layout of the Site

Now to choose some layout options. Again at the top of the admin panel menu select “Tools” then select “Layout Boxes Controller”

Using this you can add change and remove different options that will be set for your ZenCart powered site. These are some basic functions that include the search option, as well as displaying newly added products. Make sure when you choose to turn the boxes on, you are also editing the options that appear on the right side of the admin panel. This allows you to choose options like where to place the box, and additional options for each individual box being placed on the site.

Getting Rid of those Banners

Now to remove the banners that are default with the ZenCart install. Again go to “Tools” Then “Banner Manager” – You can then click on each one displayed to de-activate them. You can add your own later if you want, but we will remove these to better help see our website and how to set it up for now.

Store Configuration

For this part you may want to spend some time viewing the options yourself. On the menu in the admin panel you can select “Configuration” and see the self explanitory options that are all below it. This will be the main area you can setup your store name, and store info. There are many other options that you will want to set under the configuration area. This will ensure your website is personalized to what you need.

Where are we now?

Ok, you should have a basic starting point now where your store looks really empty, and you have the files ready to start making it your own. Let’s go back to the files we downloaded earlier and take a quick look at each one and what they do. This step is important for making your ZenCart powered store SEO friendly, as well as making it custom to suit your needs. First we will look at the index.php file:

index.php

php
/**
 * @package languageDefines
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: index.php 6550 2007-07-05 03:54:54Z drbyte $
 */

define('TEXT_MAIN','This is the main define statement for the page for english when no template defined file exists. It is located in: /includes/languages/english/index.php');

// Showcase vs Store
if (STORE_STATUS == '0') {
  define('TEXT_GREETING_GUEST', 'Welcome Guest! Would you like to log yourself in?');
} else {
  define('TEXT_GREETING_GUEST', 'Welcome, please enjoy our online showcase.');
}

define('TEXT_GREETING_PERSONAL', 'Hello %s! Would you like to see our newest additions?');

define('TEXT_INFORMATION', 'Define your main Index page copy here.');

//moved to english
//define('TABLE_HEADING_FEATURED_PRODUCTS','Featured Products');

//define('TABLE_HEADING_NEW_PRODUCTS', 'New Products For %s');
//define('TABLE_HEADING_UPCOMING_PRODUCTS', 'Upcoming Products');
//define('TABLE_HEADING_DATE_EXPECTED', 'Date Expected');

if ( ($category_depth == 'products') || (zen_check_url_get_terms()) ) {
  // This section deals with product-listing page contents
  define('HEADING_TITLE', 'Available Products');
  define('TABLE_HEADING_IMAGE', 'Product Image');
  define('TABLE_HEADING_MODEL', 'Model');
  define('TABLE_HEADING_PRODUCTS', 'Product Name');
  define('TABLE_HEADING_MANUFACTURER', 'Manufacturer');
  define('TABLE_HEADING_QUANTITY', 'Quantity');
  define('TABLE_HEADING_PRICE', 'Price');
  define('TABLE_HEADING_WEIGHT', 'Weight');
  define('TABLE_HEADING_BUY_NOW', 'Buy Now');
  define('TEXT_NO_PRODUCTS', 'There are no products to list in this category.');
  define('TEXT_NO_PRODUCTS2', 'There is no product available from this manufacturer.');
  define('TEXT_NUMBER_OF_PRODUCTS', 'Number of Products: ');
  define('TEXT_SHOW', 'Filter Results by:');
  define('TEXT_BUY', 'Buy 1 \'');
  define('TEXT_NOW', '\' now');
  define('TEXT_ALL_CATEGORIES', 'All Categories');
  define('TEXT_ALL_MANUFACTURERS', 'All Manufacturers');
} elseif ($category_depth == 'top') {
  // This section deals with the "home" page at the top level with no options/products selected
  /*Replace this text with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/
  define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.');
} elseif ($category_depth == 'nested') {
  // This section deals with displaying a subcategory
  /*Replace this line with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/
  define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.');
}
?>

It is easy with this file to remember one golden rule: If it starts with the word “DEFINE” then you can change the value for it. Make sure when editing these .php files you keep everything within the single quotes and don’t overwrite something by accident. It is good practice to back up files and keep local copies as well.

Let’s check out some of the most basic areas of the index.php file that we will want to change to start personalizing the ZenCart powered site:

index.php

define('TEXT_MAIN','This is the main define statement for the page for english when no template defined file exists. It is located in: /includes/languages/english/index.php');

// Showcase vs Store
if (STORE_STATUS == '0') {
  define('TEXT_GREETING_GUEST', 'Welcome Guest! Would you like to log yourself in?');
} else {
  define('TEXT_GREETING_GUEST', 'Welcome, please enjoy our online showcase.');
}

define('TEXT_GREETING_PERSONAL', 'Hello %s! Would you like to see our newest additions?');

define('TEXT_INFORMATION', 'Define your main Index page copy here.');

This is the main page information. You can change it to make it your own to fit your website as you need to. Some of the main page content can also be edited using the “Page Editor” from the admin panel – but for now we will stick to doing it this way. You will notice some of the text that is located in the above code, also displays within your website on the homepage.

The lower portion of this file contains more areas you can define. Some of these are more detailed. Let’s take a look at it:

index.php

if ( ($category_depth == 'products') || (zen_check_url_get_terms()) ) {
  // This section deals with product-listing page contents
  define('HEADING_TITLE', 'Available Products');
  define('TABLE_HEADING_IMAGE', 'Product Image');
  define('TABLE_HEADING_MODEL', 'Model');
  define('TABLE_HEADING_PRODUCTS', 'Product Name');
  define('TABLE_HEADING_MANUFACTURER', 'Manufacturer');
  define('TABLE_HEADING_QUANTITY', 'Quantity');
  define('TABLE_HEADING_PRICE', 'Price');
  define('TABLE_HEADING_WEIGHT', 'Weight');
  define('TABLE_HEADING_BUY_NOW', 'Buy Now');
  define('TEXT_NO_PRODUCTS', 'There are no products to list in this category.');
  define('TEXT_NO_PRODUCTS2', 'There is no product available from this manufacturer.');
  define('TEXT_NUMBER_OF_PRODUCTS', 'Number of Products: ');
  define('TEXT_SHOW', 'Filter Results by:');
  define('TEXT_BUY', 'Buy 1 \'');
  define('TEXT_NOW', '\' now');
  define('TEXT_ALL_CATEGORIES', 'All Categories');
  define('TEXT_ALL_MANUFACTURERS', 'All Manufacturers');
} elseif ($category_depth == 'top') {
  // This section deals with the "home" page at the top level with no options/products selected
  /*Replace this text with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/
  define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.');
} elseif ($category_depth == 'nested') {
  // This section deals with displaying a subcategory
  /*Replace this line with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/
  define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.');
}
?>

These defined objects will allow you to change the terms used on the website such as “weight” – “product name” – “price” and etc. If you wanted them to display differently you could simply change the name within the single quotes and it will display that way on your website.

Below this list of defined objects you will see where there are two titles available to change. Both are located on your website homepage.

index.php

} elseif ($category_depth == 'top') {
  // This section deals with the "home" page at the top level with no options/products selected
  /*Replace this text with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/
  define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.');
} elseif ($category_depth == 'nested') {
  // This section deals with displaying a subcategory
  /*Replace this line with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/
  define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.');

Changing the values for these will change more information on your homepage. Setting these to give custom welcome messages are a good start to customizing your ZenCart install. This is all a good starting point to setting up your online store.

Moving On

Next we will take a look at the header.php file we downloaded.

header.php

Using this file we can change our header text, our search field text as well as the search button itself, and the logo for our website. Titles are defined in this file for use across the store. We will get more into changing the logo and customizing the header later on. Let’s look at the other files we have downloaded:

Meta_Tags.php

There are a few main things we will change in the meta_tags.php file.

// page title
define('TITLE', 'Zen Cart!');

// Site Tagline
define('SITE_TAGLINE', 'The Art of E-commerce');

// Custom Keywords
define('CUSTOM_KEYWORDS', 'ecommerce, open source, shop, online shopping');

The above code is what will help with SEO for your ZenCart powered site. Changing the page title, tagline, and adding keywords is very important. This will help your site be seen later by search engines and also to display to visitors what your website is and has to offer.

The other thing I want to point out within the meta_tags.php file is the favicon. The favicon image is the tiny icon that appears on your toolbar next to where you type your http://www -

This area at the bottom of the meta_tags.php defines that for us, so we can easily add a favicon.ico image to be displayed on our site:

Meta_Tags.php

// favicon setting
// There is usually NO need to enable this unless you need to specify a path and/or a different filename
//  define('FAVICON','favicon.ico');

So What is Next?

Next in part two I will cover the following items:

1. Adding a custom logo to your ZenCart powered website.

2. The catalog menu for adding products to your website.

3. Extra addon modules available and how to edit them.

4. Define Pages Editor for custom pages

5. Custom Templates and File Structure of templates

Stay tuned for the second part of this tutorial. If there is something else you would like to see or if you have any questions then feel free to comment below. I will respond and help out as much as I can. I hope everyone enjoys!

How to Create a LCD Monitor in Photoshop

Kanthavel Jatheepan — Tue, 17 Aug 2010 10:00:20 +0000

In this tutorial I am trying to share some knowledge in Adobe Photoshop CS4. We are going to draw a LCD monitor by using Photoshop. We are not going to sketch it as it is pretty simple. I will explain all techniques along the tutorial so that every one can follow easily. So what are we waiting for? Let’s get started.You can download source files from here.

Step 1

Open your Adobe Photoshop. Create a new document with 1000px x 1000px size.

Step 2

Select Pen tool (P) and draw like this.

Right click on the object which you drawn in previous step and select Make Selection. Then you need to fill this object with Gradient tool (G) colors i used #fbfcfc for light ash and #d9dcde for little bit ash.

Step 3

Next is side of monitor. Create a new layer under layer1. Draw an object with pen tool as below.

Then fill that object with the color of #a7a7a7. So you will end up with a picture similar to this.

Step 4

Next step is create new layer under the layer2. Draw an object like below. This is going to be stand for the monitor

Then fill with #c5c2c2

Step 5

OK, now draw an object for a shining effect to right side of the monitor. So draw an object like this,

Then fill black color with a opacity of 50%.

Apply Gaussian Blur effect with the value of 2.6 hint : Filter > blur > Gaussian Blur…

Step 6

Next We will repeat the same job as we done in previous step. But white color.

Step 7

Now create new layer and draw a white color object to get shining effect to bottom of the monitor.

Step 8

Ok lets give some details. Drawing some lines will make our monitor beauty. So take Pen tool (P) and draw these three lines as bellows. Use #787979 for your line.

And then draw white lines very closed to the lines which you drawn before. Please see this picture.

Step 9

Now friends, we shall give shining effect to monitor’s stand. Create new layer and draw a white color object like this.

Then take Eraser (E) and erase the border of that object.

Ok now create next layer and draw this with Pen tool (P).

Fill white color to that object.

Then apply Gaussian Blur filter to that object. hint : Filter > blur > Gaussian Blur…

Step 10

Create a new layer under the all shining layers and create this object. We are trying to make shadows in the stand. Draw this object with Pen tool (P) fill black color and reduce this opacity to 50%.

Then apply Gaussian Blur to this object as well. hint : Filter > blur > Gaussian Blur…

Create another new layer

Step 11

Draw a bottom border to monitor’s stand. Fill color with #737373.

Step 12

Now create new layer and draw display borders. First draw two white borders. You can use Pen tool (P).

Then draw black lines like this.

Step 13

Ok now get any picture to put on the screen. I used 1stwebdesigner.com screen shot as my screen display. So i got a screen shot and put in top of all other layers.

Then adjust shape of your picture to match with monitor screen. You may use Warp tool. hint Edit > Transform > Warp

Then we will give some shining effect to the monitor’s screen. So draw an object with Pen tool (P), right click, and select Make Selection… then OK. Make sure that feather radius is 0.

Once you get selected area you will be able to fill with Gradient tool (G). Use white color for shining.

So you end up with a picture similar to this.

Step 14

In this step we create shadow to this monitor. Take Pen tool (P) and draw shadow, and fill with black color.

Then apply Gaussian blur effect.

Step 15

Draw two buttons to this monitor. Select Rounded Rectangle tool (U). Draw a rectangle and fill with #9d9d9d. Then apply styles.

Step 16

Ok our monitor almost done. At the end we will give Gradient background to this picture. That’s All !!!

How to connect your site with twitter using @Anywhere

Irina Borozan — Mon, 16 Aug 2010 21:00:10 +0000

Twitter has launched @Anywhere, a more simple way of integrating twitter in your site. With it you can add follow buttons, hovercards, linkify twitter usernames and connect with twitter. In this tutorial, I will show you how to use @Anywhere in your site. I will add some twitter @Anywhere features to the application build in my previous tutorials, the distance finder (part1 of the tutorial, part2).

What are we going to build?

The distance finder we created using the previous tutorials uses the google maps api to let you find the distance and route between two locations. In this tutorial, I’ll show you how to share your search results with your twitter followers. I’ll also show you how to add hovercards and linkify usernames.

You can view the demo here. And also download the source code.

Prerequisites

The first thing we need to do in order to use @Anywhere is to registered a new twitter application. We can do this here. Once we fill in that form, we will be given an APIkey to use in the app.

Next, we’ll have to include the @Anywhere script. We’ll add the following code to your section:

Don’t forget to fill in the api key!

As some of the options from @Anywhere require jquery, we will have to include that too:

Adding a comment box

Let’s see what we need to add to show a small comment box to help us share the search results with our friends.

We’ll have to add another div to the layout, where to show the comment box with the text to share with our friends.

In the javascript function that shows the route (called continueShowRoute) we will have to add some code to show the comment box.

//we have to create a div where @Anywhere will place the comment box; the div will be created inside the share div
var twitter = "";
document.getElementById("share").innerHTML = twitter;
// we’ll call the share_twitter function with the two addresses as parameters.
share_twitter(address1, address2);

The share_twitter function is used to create the link to share with our friends and show the comment box.

The code which uses @Anywhere to show the comment box is pretty simple. It looks like this:

twttr.anywhere(function(twitter) {
   twitter(".comments").tweetBox({
      label: 'Share with your twitter friends!',
      defaultContent: 'My search on distancefinder: '+url,
      height: 30
   });
});

It calls the anywhere function for the twttr object and passes the tweetBox function as a parameter. The comment box will be shown in the div with the id given as parameter (“.comments”). We can set the following options for the comment box:

Label: the text to be shown above the box
DefaultContent: the content of the box
Height, width: the boxes dimensions
Counter: whether or not to show the counter for remaining characters
OnTweet: a function to be called when the tweet button is pressed.

We will also have to share the link to the current page. We’ll also have to add the two address values to the url to be able to share a search result. This way, when the friend clicks on our link, they will be redirected to the application page with the addresses set and see our results. We will use PHP Get to pass the two addresses.

As the url might get too long for a tweet, we’ll have to shorten it. For this we can use tinyurl to obtain a shorter url address. To do this, we have to make a request to:


http://tinyurl.com/api-create.php?url=THE_LONG_URL

We’ll make a php script that receives an url address, sends a request to tinyurl.com and returns the result. We’ll store it in the file called getShortURL.php. The script looks like this:

We’ll have to call this script using ajax from our share_twitter function and, when we get the result from the script, show the comment box from @Anywhere.

Here’s how the code for this looks like:

var xmlhttp;
function share_twitter(a1, a2)
{
  var my_url = location.href;
  if (my_url.indexOf('?a1=') != -1)
  {
    my_url = my_url.substr(0, my_url.indexOf("?"));
  }
  my_url += "?a1="+a1+"&a2="+a2;

  xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }
  var url="getShortURL.php";
  url=url+"?url="+encodeURIComponent(my_url);

  xmlhttp.onreadystatechange=stateChanged;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
}

function stateChanged()
{
  if (xmlhttp.readyState==4)
  {
    twttr.anywhere(function(twitter) {
      twitter(".comments").tweetBox({
         label: 'Share with your twitter friends!',
         defaultContent: 'My search on distancefinder: '+xmlhttp.responseText,
         height: 30
      });
    });
  }
}

Here’s what the share_twitter function does. It first get the url of the current page:

var my_url = location.href;

If there are already some variables set in PHP GET it erases them and adds the new values (a1 and a2, the functions parameters)

if (my_url.indexOf('?a1=') != -1)
{
  my_url = my_url.substr(0, my_url.indexOf("?"));
}
my_url += "?a1="+a1+"&a2="+a2;

The rest of the code is a bit more complicated (also, I’ve not shown here the GetXmlHttpObject function; you can see it in the source code), but you don’t have to worry if you don’t get it! All you need to do is that it is used to make the request to the getShortURL.php script and receive the result. When it gets the result (if (xmlhttp.readyState==4)) it calls the @anywhere code to show the comment box and sets the url value to the short url it received.

We will also have to add a few lines of code to our app, to be able to load our friends search results. As I said, we have sent the a1 and a2 parameters (the two addresses) through GET. We will have to add a script to check if the variables are set and if they are, to show the correct map.

We will add this php code before the tag:

start('".$_GET['a1']."', '".$_GET['a2']."');";
}
?>

As you can see, the script will call the start function if the two parameters are set. Let’s see how the start function looks like:

function start(a1, a2)
{
   document.getElementById("address1").value = a1;
   document.getElementById("address2").value = a2;
   initialize();
}

All it has to do is set the address values in the textboxes and to call to initialize() function, the one that shows the map.

And that’s it! We now have a comment box in our app. Of course, the users will have to be logged in their twitter accounts and allow your app to connect to their accounts. But all this is taken care of by @Anywhere!

Let’s check out other features of @Anywhere:

Linkifying twitter usernames

With only a few javascript lines added to the head section of your site, @Anywhere will convert all twitter usernames on your page in links to the proper twitter profiles.

Here’s the script we need to add:

twttr.anywhere(function (T) {
   T.linkifyUsers();
});

You just have to call the linkifyUsers() function. This code will turn all twitter usernames found in the section to links. You can also chose to only linkify the usernames in a section of your site. To do this, you will only need to specify the id of the element which has the usernames you want linkified.

twttr.anywhere(function (T) {
   T("#ELEMENT_ID").linkifyUsers();
});

Hovercards

Hovercards are small tooltips that show some data about a particular Twitter user. These will show up if you go with the mouse over a twitter username on you site. To add this option, you will have to add this script:

twttr.anywhere(function (T) {
   T.hovercards();
});

You can also limit the scope when the hovercards appear, just like with linkifying usenames.

Let’s add a twitter username to the site and test these features:

Demo App by @anirib

@Anywhere seems pretty cool, eh?

How to Create a Killer Portfolio in Photoshop [Very Detailed]

Valters Bergspics — Tue, 10 Aug 2010 10:00:22 +0000

In this in-depth tutorial, I will show you how to create a portfolio in Adobe Photoshop CS4. If you have never tried a site build in Photoshop then don’t worry because I have explained everything so that even noobs can continue with this tutorial. So what are we waiting for? Let’s start.

View full size | Download PSD

Resources that you will need:

Step 1 – Creating document

So, lets create new document, (File > New…). Make this document 1200 px per width and 1500 px per height and press OK.

Step 2 – Background

2.1 Convert “Background” layer to “Layer From Background…”. Thats because to let us make this layer editable.

2.2 Rename “Layer 0″ to “Background”.

2.3 Press right mouse button on layer to go to Blending Options.

2.4 Set Color Overlay to #f2f1dd

Step 3 – Headers Background

3.1 Take “Rectangular Marquee Tool” and set Style to “Fixed Size”, set width to 1200 px and height to 108 px.

3.2 Select now the very top (just like in the previous image), create new layer, name it “header background” and fill it with any color using “Paint Bucket Tool”.

3.3 Go to layers “header background” Blending Options > Gradient Overlay. Change only color, everything else is by default. So color use from #dfc78d to #ccb681.

Step 4 – Logo

4.1 Write logo or use your own logo. I wrote logo and made some nice modifications to it. So write down “PORTFOLIO”, set font to Bebas (it’s in the resources section upper), font size to 72 pt and set it to “Smooth”, put it somewhere in headers section. Something like that:

4.2 Lets add some nicer look to logo. Go to Blending Options.

Set Drop Shadow:

Blend Mode: Normal and color complitely black – #000000
Opacity: 14%
Distance: 0 px
Size: 6 px

Everything else is by default.

Set Inner Glow:

Blend Mode: Normal
Opacity: 100%
Color: #e8e8e8
Size: 7px

Everything else is by default.

Set Stroke:

Size: 1px
Position: Inside
Color: #ffffff

Everything else is by default.

So now it must look much more better than before.

4.3 Adding “Dagg Murphinn’s”. Write down persons name, use this setup: font – Bebas, size – 18 pt, “Smooth”, color – #403a20. Put it in place like this:

4.4 Lets cut “IO”. We need to “Rasterize Type” layer “PORTFOLIO”, to do this click with mouse right button on layer “PORTFOLIO” and select “Rasterize Type”. This is because to let us delete some area from “IO”. Now take “Rectangular Marquee Tool” and select like this (“DAGG’s” height and some pixels more):

Oh, and if you cant select that area, then you forgot to change “Rectangular Marquee Tool’s” Style to Normal. So move selected area:

Don’t forget that now you have selected layer “PORTFOLIO”. Now just click button Delete on keyboard.

Select this area:

Press and hold CTRL and drag with mouse selected area:

4.5 Lets add some shining things. Create new layer between “header background” and “PORTFOLIO”, name it “shiny 1”. Select that area (in picture below), take “Brush Tool” and take brush like this – , use size for brush approximately 560 px and just click it like that:

With “Eraser Tool” take the same brush style (just like before upper) and smaller size (I took 300 px) delete these areas:

Select this area:

Create new layer “shiny 2”, place it under “shiny 1” layer. Take “Brush Tool” and again brush is the same style, but size ~ 200 px. Click one time in selected area!

Delete these areas just like before, and set layers “shiny 2” opacity to 40%.

YEAH! With logo we have done!

To let us work more easily and more qualitative, lets create folders to group layers. Click on layer “Dagg murphin’s” and create new folder.

Now click on the same layer “Dagg murphin’s”, and holding Shift button on your keyboard click on layer “header background”. It must look like that:

and then simply drag selected layers into that folder.

I forgot to change folders name, so name it “header”.

Lets group a little bit more, make folders like that:

Step 5 – Menu

5.1 Make new layer into folder “menu”, name it “menu background”. Take “Rectangular Marquee Tool”, select Style to “Fixed Size” – width: 1200 px and height: 32 px.

Select area under header, like that:

Fill it with color #7b5a34 using “Paint Bucket Tool”.

5.2 Create new layer above layer “menu background”, name it “menu background 2”. Select area with “Rectangular Marquee Tool”, Style to “Fixed Size” – width: 1200 px and height: 30 px, like:

Fill it with color #a87c47.

5.3 This is very similar to point 5.2. Create new layer above layer “menu background 2”, name it “menu background 3”. Select area with “Rectangular Marquee Tool”, Style to “Fixed Size” – width: 1200 px and height: 28 px, like:

Fill it with any color. Now go to layers “menu background 3” Blending Options > Gradient Overlay. Change only color:

Where position 0% – #886439
Where position 50% – #7B5A34
Where position 100% – #88643A

5.4 Write menu links.

Setup:

Font: Tahoma
Font Size: 15 pt
Smooth
Color: #ffffff

5.5 Creating separators. Create new layer above layer “Home …”,name it “sep”. Take “Rectangular Marquee Tool”, Style - Normal. Fill selected area with white color. Add Layer mask to that layer:

Take “Gradient Tool” and use setup “black to white to black” like this:

Take Gradient action across layer, from one side to other. Must be like this:

Duplicate layer “sep”.

Move new layer 1 px to right. Go to Blending Options > Color Overlay and chose black color. Set opacity to both “sep” layers to 20%. Merge both layers (select both layers > press mouse right button > Merge layers). Name new layer to “separator”. Duplicate this layer as much times as you have links and count off 1. So I have 5 links, so I must have 4 separators. The first one is already created, so i must duplicate this layer 3 times. When that is done, place layers between every two links.

Step 6 – Slider

6.1 Create new folder – “Slider”. Create new layer into “Slider”’s folder, name it “picture”. Get some picture and resize it to 434 px per width and 322 px per height. That’s random digits, you can chose your own size.

6.2 Duplicate this layer and put it under “picture” layer. Go Blending Options and use steup:

Color Overlay: white – #ffffff
Stroke:
- Size: 2 px
- Position: Inside
- Color: #af977c

Now we need to increase every side on edge to 5 px. To do this, press CTRL + T, zoom in to facilitate work and drag every side outside 5 px.

6.3 Creating arrows. Create new folder under layer “picture copy”, name it “arrow left”. Take “Ellipse Tool” and make a ball holding Shift on keyboard. Put it in place like this:

Do Gradient Overlay on that layer. Colors: from #70604e to #af977c.

6.4 Rasterize layer “Shape 1” (4.4) and rename it to “arrow background”. Now you can do two ways to select that area that you do not need: just selecting area to delete, or holding CTRL (in that place in image below) and selecting all layers area:

Now just click Delete on keyboard.

Create new layer above layer “arrow background”, name it “stroke”, select all “arrow background” area (just like in step 6.4), go to Edit > Stroke…

Use color #c2b8ab for stroke and location inside.

Zoom in, press CTRL + T to resize, and reduce all sides by 1 px except the right one.

add layer mask (5.5), take Gradient Tool and use gradient from black to white, now just drag it from right to left.

Create new layer above previous one. Name it “shiny”. Select all layer “arrow background” and unselect from it bottom.

Fill it with white color and go to its blending options.

Setup:

Opacity: 8%
Fill Opacity: 0%
Gradient Overlay:
- Color: from white to white, and there where are opacity changers above color chosers, select first one to 100% and second one to 0%

Create new layer above previous one, name it “arrow”, take “Rounded Rectangle Tool” and set radius to 10 px or more. Make it like this:

Press CTRL + T and rotate it like this:

Do “Rasterize Layer” (4.4) and delete area that is under “shiny” layer.

Duplicate this layer (5.5), press CTRL + T and transform it vertically (right click and Flip Vertical), drag it under previous layer.

Merge both arrow layers (5.5), duplicate the new one and place both layers that you like it. And merge these arrow layers again, rename it to “arrows”.

To copy all this what we have done to arrows, lets copy (duplicate) folder “arrow left” and rename it to “arrow right”. Holding SHIFT drag it to right side of picture. Press CTRL + T and transform it horizontally (right click > Flip Horizontal).

Arrows completed!

6.5 Adding some extra text one picture. Create new layer above layer “picture”, name it “text background”. Select all “picture” area (6.4), unselect some area:

Fill in that area with black color and set opacity to this layer 35%.

Write down some random text.

Setup to heading:

Font: Tahoma and Bold
Size: 12 pt
None
Color: #bcbcbc

Setup to paragraph:

Font: Tahoma
Size: 11 pt
None
Color: #bcbcbc

Step 7 – Creating “Fast info”

7.1 Create new folder below “Slider” folder. Name it “Fast info”, create again new folder in this filder, name it “who am i”. Upload some icon. Name this layer “icon”. Write some text.

Setup:

Font: Tahoma
Size: 15 pt
Smooth
Color: #5e3a04

7.2 Create new layer, doesn’t matter how you name it. Select area like this (only 1 px per height):

Fill it with #d5bba2. Now duplicate this layer and drag it like this:

Merge layers.

And repeat duplicating layers and merging til you get something like this:

Rename this layer as “line”.

Write down dome random text.

Setup:

Font: Tahoma
Size: 11 px
Color: #373737

Now you have one “fast info” completed, now you can re-do steps 7.1 and 7.2 to create second one or copy these layers (all folder) to create second “fast info”.

Step 8 – Latest in blogs

8.1 Create new folder below “Fast info” folder, name it “Latest in blogs”. Write “Latest in blogs”. Use this setup:

Font: Tahoma
Size: 16 pt
Sharp
Color: #4b310b

Create new layer under previous one. Select area (1 px height):

Fill it with black color. Set opacity to this layer 20%. Duplicate this layer and drag it 1 px under previous layer. Go to Blending options and set Color overlay to white. Set Opacity to this layer 100%. Merge both these layers and rename new layer to “line”.

Now you must erase right and left side for better looking. To do this, take “Eraser Tool”, brush style like this – , size approximately 200 px.

8.2 Grab some random picture, resize it to 50 x 50 px. Rename it to “pic”, go to its blending options > stroke and user setup:

Size: 1px
Color: #786754
Position: Outside

Write some random text. Setup:

Font: Tahoma Bold
Size: 14 pt
None
Color: #4b310b

Now you must create line like this:

To do that, you just need to follow step 7.2, but lines pixels are 1 x 1. When it’s done, rename new layer to “line”, and set color overlay to #cac4b0 color.

Make folders and layers like this:

Now duplicate folder “article” as many times as you wish and drag it below, I did 4. And remember to delete layer “line” in last “article” folder, because that layer is needless.

So, left side is now completed!

Step 9 – Right side

9.1 Create new folder below folder “Latest in blogs”, name it “right side”. Grab “Rectangular Marquee Tool”, set style to Fixed size – width 300 px, height 1300 px. Select area like this:

Create new layer “background”. Fill it with #ece9d4 color.

9.2 Create new folder inside this folder, name it “contact me now”. Write some text, use this setup:

Font: Tahoma
Size: 13 pt
None
Color: #9e4205

9.3 Select area with “Rectangular Marquee Tool”, using 1 px per height.

Create new layer, fill it with #dfd8c1 color. Now duplicate this layer and drag it 2 pixels down.

Merge these two “line” layers, rename it to “hr”.

9.4 Add some text with this setup:

Font: Tahoma
Size: 11 pt
None
Color: #553b2a

9.5 Re-do steps 9.2 to 9.4 (or just duplicate these layers and rename such things as “contact me now”) as many times you wish to add some panel. Now you will have some challenge to do by yourself, now when you have learned how to make some very simple things in Photoshop, you must add panels.

I think that you can do these simple things. I will just say some stups that will help you.

For picture:

How to make border like that: take a look at step 6.2, but here borders color is #7d765e

For “more”:

Font: Tahoma
Size: 10 pt
None
Color: #70673e

For picture that is not hovered:

How to make border like that: take a look at step 6.2, but here borders color is #a7a089

And also, go to blending options > color overlay > color: #000000, opacity: 30%.

For picture that is hovered:

How to make border like that: take a look at step 6.2, but here borders color is #9e4306

And there is no such thing as color overlay for hovered layer.

Icons you can get from icon pack at the top of article.

If you have successfully followed previous steps, than you must have something like this:

Step 10 – Footer

10.1 Create new folder below folder “right side”, name it “footer”. Create new layer “background”, take “Rectangular Marquee Tool” and set Style to “Fixed Size”, set width to 1200 px and height to 280 px. Now select very bottom of document.

Fill it with #1e1e1e color. Go back to “right side” layer “background” and delete area that is needless.

10.2 Go back to “footer”. Create new layer above “background”, name it “shadow”, select area:

Fill it with any color. Go to blending options > gradient overlay and change only colors: from #1e1e1e to #121212.

10.3 Above layer “shadow” create new folder named “our team”, in it write text “OUR TEAM” using this setup for Inner Shadow:

And for color overlay use just color #c55b13.

10.4 Create line like this (just the same as in step 8.2, but color overlay chose #ba7546):

10.5 Write down some names and surnames:

Setup:

Font: Tahoma
Size: 14 pt
Sharp
Color: #6b6958

10.6 Duplicate folder “our team” and delete last layer (where are names and surnames), rename new folder to “offer us a job”, then extend line:

10.7 Take “Rounded Rectangle Tool”, set radius to 4 px. Drag it like that:

Use setup:

Drop Shadow:

Inner Glow:

Gradient Overlay (From #1a1a1a to #1c1c1c to #1a1a1a):

And get something like this:

Write some text, setup:

Font: Tahoma
Size: 12 pt
None
Color: #b89883

10.8 Duplicate these layers:

10.9 Create button, use the same steps as in 10.7:

Setup:

Drop Shadow:

Inner Glow:

And color overlay just color #21160f.

10.10 Create new folder below “offer us a job”, name it “button and copyright”. Create shape with “Rounded Rectangle Tool”, radius 4 px. Do “Rasterize Layer” (4.4) and delete needless area to get something like this:

Use Gradient Overlay setup for this layer:

From #b1ae95 (0%) to #ece9d4 (17%) to #ece9d4 (74%) to #a19c7c (100%)

Name this layer as “top background”.

10.11 Add arrow from icon pack at the top of article. Delete needless area and go Images > Adjustments > Desaturate.

10.12 Add text using setup:

Font: Tahoma
Size 14 pt
Smooth

Drop Shadow:

And color overlay just color #2c2c2c.

10.13 And copyright using setup:

Font: Tahoma Bold
Size: 10 pt
None
Color: #a96b41

And that’s it! We’re done! Please post your outcomes!

jQuery for Complete Beginners: Part 4

Jack Franklin — Mon, 02 Aug 2010 10:00:05 +0000

Welcome back to jQuery for Beginners. Just a quick recap first – in the first two weeks we covered the very basics of jQuery and interacting with elements. Last time round we made an accordion – something which taught us a few of the jQuery special animation functions that are built in to jQuery. Today we will be using those functions and a bit more as we look at creating a nice looking Gallery page, built with HTML and CSS, and then adding some nice interactive effects with jQuery.You can see the live demo here. You can also download the source code here.

Firstly, open up a new HTML page, add the basic HTML code and then include jQuery like so:

I’ve also added another script tag that is blank. This is where our code will go. Notice that when I included jQuery from the Google CDN (we covered this back in the first post) I’ve used “jquery/1/jquery.min.js”. Using just “1″ means we will automatically be given the most recent version of jQuery, until we get to jQuery 2, which is a fair way off for now. You could be much more specific, of course, if you wished, but for me it makes logical sense to keep up to date with the most recent versions.

Now we’ve got that sorted, I’ve got a basic HTML structure for our gallery, ready made with five images. If you go to the bottom of this post, you can download them, along with the completed code.

div id="gallery">
		A beautiful Sunset over a field
		Some penguins on the beach
		The sun trying to break through the clouds
		Palm tress on a sunny day
		The sun bursting through the tall grass

Next up we will apply some CSS styling to make it look nicer. Seeing as this is a jQuery tutorial, I’m not going to explain much of this. Essentially I’m just adding a border, styling the font and floating the images so they display next to each other.

	#gallery {width: 960px; margin: 0 auto;}
		.galleryitem {width: 300px; height: 300px;float: left; font-family: Lucida Sans Unicode, Arial; font-style: italic; font-size: 13px; border: 5px solid black; margin: 3px;}
		.galleryitem img {width: 300px;}
		.galleryitem p {text-indent: 15px;}

And your page should look something like this:

Looks pretty good!

Our next step is going to be some jQuery. At last! We are going to remove the paragraphs and make them appear on hover, with some nice CSS styling to make them look really nice. What I’ve done is create a CSS id which we will apply to a paragraph when the corresponding image is hovered over:

	#galleryhoverp { margin-top: -55px; background-color: black; opacity: 0.5;
		-moz-opacity: 0.5;
		filter:alpha(opacity=50); height: 40px; color: white; padding-top: 10px;}

So our first step is to hide all the paragraphs and then resize our gallery items so just the image is displayed. We’ll also save all our gallery items to a variable for later usage.

	$('p').hide();
	var galleryItems = $('.galleryitem');
		galleryItems.css('height', '200px');

And now lets add an effect for when the gallery item is hovered over. Firstly lets find all the images and save them.

var images = $('.galleryitem').find('img');

The hover function is slightly unusual in that it takes two functions. The first is what should happen when the image is hovered over, the second when the mouse stops hovering over that image.

	galleryItems.hover(
			function() {
				//when hovered over
			},
			function() {
				//when hovered ends
			}
		)

The code is very simple. We just select the next paragraph using the next() function, show it and then give it that id we created a while back. On the hover-out function, we just do the exact opposite:

galleryItems.hover(
			function() {
				$(this).children("id").next('p').show().attr('id', 'galleryhoverp');
			},
			function() {
				$(this).children("id").next('p').hide().attr('id', '');
			}
		)

And there you go! If you try it out now you should see the paragraphs show when you hover over, and then leave when you change to a different image.

There is one more effect we will add. When you click on an image, it should enlarge, fill the centre of the screen and all the other images disappear. Again, I’m creating some CSS which we will add to the image we want to display:

#singleimagedisplay {width: 800px;}
#singleimagedisplay img {width: 800px;}
#singleimagedisplay a {float: right; color: white;}

We’ll add this code to the image’s parent – the div with a class of ‘galleryitem’. The code for the entire click event is below:

	images.click(function() {
			$(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();
			$(this).next('p').show().html($(this).next('p').html() + 'Back');

		})

So, when each image is clicked, these are the steps we take:
1. Give the id of ’singleimagedisplay’ to the image’s parent.
2. Set the height of the image parent to the height of the image. This uses jQuery’s height() function, which finds the height of the specified item.
3. Select all the other gallery item divs using siblings() and hide them.
4. Edit the paragraph that comes with the image to have a link on the end, which links back to the home page. jQuery’s HTML function allows us to edit the HTML code with in an item, but only if we put something inside the brackets. Else, it just gets us the value. So .html() gets the code inside the paragraph, and html(‘new stuff’) changes the content of the paragraph. Bear in mind, if you use .text() or .text(‘hello’) that will just edit the text, but if you wish to add HTML code inside an item, you need to use html().

And if you check out your page, you will find it works! There is one final issue. When viewing a single image, if you hover out, the paragraph goes away. We don’t want this, so we need to go back to our hover function and make a slight edit:

galleryItems.hover(
			function() {
				if($(this).attr('id')!='singleimagedisplay')
				{

					$(this).children("img").next('p').show().attr('id', 'galleryhoverp');
				}

			},
			function() {
				if($(this).attr('id')!='singleimagedisplay')
				{
					$(this).children("img").next('p').hide().attr('id', '');
				}
			}
		);

All we do is see if the id on the item is not set to ’singleimagedisplay’ which means that we are on the main gallery page, and then we can run the code we had originally. And we are done. You can download everything below:

Download the page and images.

I hope you found this a useful lesson, and I will see you next time.

40 Dazzling Photoshop Abstract and Lighting Effects Tutorials

Daniels Mekšs — Thu, 29 Jul 2010 10:00:41 +0000

Well done abstract and lighting effects can enhance your artworks exceedingly and this is very popular trend now in photo manipulations, backgrounds, website headers – definitely useful tutorials to be aware of .

You can add them to premade photos, or create whole new scenes from scratch. Photoshop gives you those abilities and allows you to express in all ways. In this post you’ll find 40 best tutorials around web to master abstract and lighting effects.

1. Super Slick Dusky Lighting Effects in Photoshop

In this tutorial you are going to put together a sunset image mixing some vector shapes and dusky lighting effects to produce a slick image that will make a nice album cover for a chillout mix.

2. Space Lighting Effects in 10 Steps

In this Photoshop tutorial you will be shown how to create a space scene with some nice lighting effects in 10 easy steps.

3. Advanced Glow Effects

In this tutorial, you’re going to create some really sharp-looking glow effects using a combination of layer styles, the Pen Tool and Color Blending. The end effect is quite stunning and you’ll pick up some tips effecting the tutorial.

4. A Cool Lighting Effect In Photoshop

In this tutorial, you will learn how to create that effect you was able to see on the screen at the Macworld San Francisco. It’s basically some lighting effects with blurs and blend modes, but the effect is awesome.

5. Windows Vista Aurora Effect Photoshop Tutorial

In this tutorial, you’re going to see how to create the Windows Vista wallpaper effect yourself. This Vista lighting effect, sometimes referred to as the Aurora effect, can really transform an ordinary wallpaper to something extraordinary.

6. Awesome Digital Bokeh Effect in Photoshop

This tutorial will show you how to create a digital bokeh effect in Photoshop. The process is very easy and we will be using the super powerful Brush Engine, one of the coolest things in Photoshop.

7. Make Abstract Wallpaper with Brushes

In this tutorial, you will try to mimic the nice abstract preview that Axeraider70 made for his Ultimate Brush Pack 3. This will give the beginners a better idea on how to use these great resources.

8. Space Environment

Learn how to create realistic space scene from scratch using Photoshop.

9. Light and Glow Effect In Photoshop

This Photoshop effect tutorial covers the creation of several different light and glow effects in Photoshop. The effects in outcome consist of smoke, light trails, sparkles, stars and bokeh effects. Luckily it’s pretty simple to create each of these effects in Photoshop.

10. Create an Amazing Ad in Photoshop

In this tutorial you will use some images and play with Blend Modes and Color Adjustments to create a really cool Nike Ad in Photoshop.

11. Create a Dark and Surreal Geometric Space Poster using Photoshop

This tutorial will show you how to create an abstract space poster using geometrical shapes, masks and apply some filters in Photoshop. Layered PSD file is included.

12. Make a Freezing Cold Snow-themed Abstract Piece

In this tutorial, you’ll learn how to create a snow-themed large piece. You’ll learn how to plan the composition of the piece, to add elements into the composition, how to recycle the piece itself to generate more elements for the piece, how to incorporate pen tools into a design and finally how to finish off and fine tune the piece to make it look great.

13. Use Lighting Effects to Make Photos Sparkle

This tutorial shows how to create a variety of light effects that can be applied to photography or illustration with equal impact. From sparkles, pixie dust effects, colored light spots and light beams, to using splatter effects as a form of lighting, it’s all here.

14. Sparkling Hot Girl in Photoshop

This tutorial will show you how to create an image using light effects and sparks technique. It basically mixes some techniques from different tutorials and takes the best from them.

15. Achieve Brilliant Lighting Effects in Photoshop

In this tutorial, you’ll learn the essential process of achieving brilliant lighting effects in Photoshop. Using default brushes, blending options and a few stock images, you’ll learn step by step a variety of techniques that you can use in your own digital artworks to achieve professional results.

16. Give a Photo a Complete Glamour Makeover With Stunning Light and 3D Effects

This tutorial teaches you how to transform a regular, every day photo into a real glamour shot. In this tutorial, you will learn how to retouch a model’s face and subtly manipulate her hair. In addition, you will enhance the canvas by adding attractive lighting and 3D effects. This tutorial requires considerable Pen Tool skills, but with perseverance and a passion for design, you will certainly be able to achieve great results.

17. Amazing Photoshop Light Effect in 10 Steps

Learn how to create beautiful “Buy me a coffee” wallpaper in Photoshop. You’ll be using basic brushes and some blending effects.

18. Incredibly Realistic Water Text in Cinema 4D and Photoshop

This tutorial will show you how to create a water text effect. Even though it might look complex it’s a very simple effect. You will need to use Illustrator for the text, then Cinema 4D to make it a 3D text and Photoshop to mix the 3D with some real photos to create a nice and realistic result.

19. How to Enhance Your Subjects With Striking Light Effects in Photoshop

This Photoshop tutorial will show you a simple technique that can be used to enhance any kind of subject with stunning light effects. You will use in particular selection tools, gradients and brushes to achieve the result.

20. Create an Electrifying Light Guitar

In this tutorial, Pawel Kiec will take you though the steps of extracting an image, creating a background, and then making an electrifying glowing guitar that resembles pure neon light. You’ll learn how to manipulate blending modes to achieve color and light, and you’ll also learn how to extract images with the pen tool, and even create flowing lines in Illustrator to compliment the Photoshop work.

21. Energize Your Graphics with Abstract Energy Lines

In this tutorial, you will learn how to create some energetic lines you can use to create more lively digital creations. Effects such as this are great for enhancing abstract compositions.

22. Recreating The Aurora Borealis

In this tutorial, you are going to recreate the northern lights effect, otherwise known as “Aurora Borealis”. Using a combination of filters such as Render Clouds and Motion Blur, you then transform the combined effect to form the shape of an aurora, with a touch of perspective.

23. How to Create a Gorgeous Glassy Text Effect

This tutorial will show you how to create glassy text effect using a series of shapes with different transparency and color effects.

24. Create an Abstract Design with Patterns in Photoshop

Follow this walk through to recreate this detailed design with nothing more than gradient and pattern effects.

25. How To Design An Abstract Wallpaper In Photoshop and Illustrator

In this tutorial you will be creating abstract shapes using the Pen Tool and Shape Tools in Illustrator and then using those shapes to produce an abstract wallpaper in Photoshop using various color blending techniques, textures and transformation tools.

26. How to Create a Realistic IES Lighting Effect in Photoshop

This tutorial will show you how to create a realistic IES (photometric) lighting effect. Yoy’ll be using Photoshop CS4 as well as some free plugins and software.

27. Abduzeedo 2010 Light Effects in Photoshop

In this tutorial you will see how to create new Abduzeedo’s 2010 symbol. It’s a sort of monitor/halftone effect mixed with glows and other light effects. You will play with Blend Modes and Blurs. The whole process is quite simple and it won’t take more than 20 minutes to achieve the same result.

28. Drawing an Abstract Lightbulb

This tutorial covers a couple of simple techniques, which if used accordingly can help you attain great lighting effect.

29. Create Simple, Yet Elegant Abstract Spectrum Lines in Photoshop

This tutorial will show you the method used to design a simple, yet elegant abstract spectrum lines in Photoshop. You will see how easy it is to achieve this nice effect and you can use it a wide range of occasions including perhaps site header backgrounds, logos, or add extra flavor to your photo manipulations.

30. Create an Abstract Composition in Photoshop

In this Photoshop tutorial you will learn how to create an abstract composition using rendered images and light effects. As you can see from the final result preview you will create a mystical and magical effect. In this tutorial you will have to use plenty of Photoshop tools, and also Cinema 4D, but if you don’t have Cinema 4D that’s ok, you will be able do all rest steps of this tutorial.

31. The Making of “Constant Slip”

This tutorial takes you through the creative process of making intriguing light effects and applying them in your work. This is more a process description of making this illustration, than a detailed step by step how to. It will give you some good guidance on how to deal with an illustration like this and cover the overall workflow.

32. Create an Explosive Abstract in Cinema 4D and Photoshop

In this tutorial, you will be creating an explosive abstract piece called “What is Man?“. You will have to use Cinema 4D to create the explosive effects. You will then take the 3D elements over to Photoshop for the final composite and lighting.

33. Create a Vibrant Abstract Space Artwork

In this tutorial, Paul from ForCG.com will show you how to create a vibrant and colorful abstract space artwork using Photoshop, Illustrator, and stock images. You’ll learn techniques on blending modes, the use of the pen tool in Illustrator, and how to combine elements for a visually stunning effect.

34. Quick and Effective Planet, Star and Meteor Impact Creation in Photoshop

In this tutorial, you will learn how to make planet, star and meteor impact in Photoshop in a quick and effective manner. This is intermediate level tutorial so some steps can be a little tricky, but the outcome is worth it.

35. How to Create Great Abstract Artwork via Custom Brushsets and Particle Effect

In this tutorial, you will be able to follow the steps needed to create this cool abstract artwork via custom brushes and particle effect in Photoshop. You will be demonstrated how to create your own brushes and use them to add particle effect to the image to spice it up.

36. Create a Fantastic Abstract Fan Poster

In this tutorial, you are going to get creative with layering, lighting, and texture to build fantastic abstract piece. More specifically, you’re going to employ some unusual techniques to make a fan poster for the band Omega Code, but you’ll quickly see many different applications for what is taught here.

37. Calculations and Colorization

This Photoshop tutorial will show you how to create an Alpha Channel using the Calculations dialog and you’ll use it to get a really great abstract colorized photo effect.

38. Create a Trendy Galactic Poster Design in Photoshop

Galactic space scenes are a popular theme for digital art, they’re packed full of texture and vibrant colour, which are two ingredients of an awesome design. Using Photoshop’s blending modes along with a mix of textures and brushes, you’ll get lost in space and create an abstract cosmos poster design.

39. Colorful Glowing Text Effect in Photoshop

This tutorial will teach you how to achieve great looking light text effect with some simple techniques.

40. Create an Abstract Cloud Jumper in Photoshop

In this tutorial, you’ll manipulate a photo with abstract elements to make it more interesting and active.

50 Most Creative Character Illustration Tutorials

Daniels Mekšs — Mon, 26 Jul 2010 21:00:31 +0000

Drawn characters are usually cute and they can make us laugh. Nowadays, designers can turn their pencil sketches into beautiful digital art with lot of beautiful effects. You can use striking vector character as a mascot for your business or website.

This article contains 50 best Photoshop and Illustrator character designing tutorials. Most of these tutorials require a hand drawn sketch, so don’t forget about your pencil and paper.

1. Create a Cute Little Tiger in Illustrator

In this tutorial, you will be drawing the tiger, but you will be doing it a little bit different. Instead of portraying the tiger as a savage and mean creature, author will teach you how to draw a cute little tiger that you will be able to use in your projects, as a desktop wallpaper, etc. You will also learn lots of Illustrator techniques as well. This is the perfect tutorial for year 2010, the year of the tiger.

2. Create a Cute Baby Monster Character in Illustrator

Vector monster tutorial for all you designers learning Illustrator to get stuck into! Use Illustrator’s basic shapes to form the outline and structure of a cute baby monster character, before adding colour, gradients and effects to bring the design to life.

3. Draw an Angry Little Samurai in Illustrator

This tutorial will show you how to draw a samurai in Illustrator using shapes, free time and desire.

4. Create a Character Mascot with Adobe Illustrator CS4

In this intermediate Illustrator tutorial you will be shown how to create a vector character mascot from a sketch in Adobe Illustrator CS4. The techniques in this tutorial can easily be applied to other illustrations, icons, and design elements; as well as legacy versions of Illustrator.

5. How to Create a Curious Owl in Illustrator CS4

Learn how to create non-spooky scene set at dusk, with a curious owl sitting on a branch and some scenery in the background.

6. Create a Cute Panda Bear Face Icon

In the following easy tutorial, you will be shown how to create a cute panda bear face icon all from ellipses (well, actually there is one rectangle for the background). The great part about this tutorial, is that you can easily apply the techniques to other icons, illustrations, logos, or other projects.

7. Create a Cute Furry Vector Monster in Illustrator

Follow these steps in Adobe Illustrator to create your very own super cute fuzzy monster character. You’ll be working with the basic shapes to start, then use a variety of gradients to add depth. You can then finish it off with some detailed fur effects to really lift the design from the screen.

8. How to Turn a Sketch into a Fat Cat Vector Illustration

This tutorial aims to guide you from sketchbook to screen; a “Fat Cat” doodled with biro translated into a neat vector caricature. Intermediate knowledge of Adobe Illustrator is advised.

9. Create the Face of a Greedy Monkey

This tutorial will help you create a simple illustration of a monkey face. It uses the Ellipse Tool, the Pen Tool, the Rectangle Tool, the Crystallize Tool or the Gradient Tool. For the shadow effects you’ll use some classic effects like the Inner Glow or the Gaussian Blur.

10. How to Create a Slick Anime Character in Photoshop

In this tutorial, you’ll learn how to draw an Anime Style character. To start, you’ll rely on basic shapes and the Brush Tool. Also, you’ll learn one of author’s personal techniques he calls “The Front Mirror” which he uses for almost any of his animation projects. This technique will save you lots of time, and will help you to draw many characters for your projects in a very fast way.

11. Creating Vector Characters in Illustrator

This character was created to be a mascot of sorts, and aimed at all ages. It is usable at a variety of sizes, and in both print and animation. See detailed PDF walk-through tutorial how to create it.

12. Create a Happy Sun Character

This intermediate tutorial is great for logos, children illustrations, and other projects relating to climate change. Moreover, you can easily apply this tutorial to other illustrations, logos, and projects.

13. Create a Student Character Mascot with Adobe Illustrator

This is an intermediate Illustrator tutorial level where you can learn how to create a vector student character mascot from a sketch in Adobe Illustrator. The techniques can easily be applied to other character design, illustrations or icons.

14. Create a Character Illustration Wallpaper

Following this tutorial you will be able to create a character illustration wallpaper in Photoshop just like in image below.. In this tutorial you will be focusing more on the shapes, scaling and using group layers.

15. Drunken Monkey Photoshop Tutorial

This article will explain yo you step-by-step how author’s designed an attractive character in one of his recent projects, namely for the company “Drunken Monkey Collectibles”. He will review the entire design process, from the first sketches and drafts to the final touches with Adobe Photoshop.

16. Create a Vector Pirate Cartoon Character from a Hand Drawn Sketch

By firstly using the power of pen and paper a character design is created, which is then scanned into the computer to use as a base for tracing with Adobe Illustrator. The final outcome is a colourful cartoon character in vector format.

17. Create a Blue Vector Character from Pencil Sketch to Coloring

Quick tutorial in which you will going to make a blue character illustration thing. You will be using Photoshop on this tutorial, but don’t forget about pencil and a paper because you’re going to start this with sketching.

18. How to Create a Stinking Zombie Flesh-Eater in Illustrator

In this tutorial, you will see how to create a cartoon zombie in Illustrator. Starting by creating a fresh corpse, you will then ‘yuck’ it up using a number of techniques.

19. Create Simple Cartoon Characters in Photoshop

You will be walked through the basics of colourful vector art to get you going on Photoshop CS and newer.

20. How to Create a Cute and Adorable Twitter Icon in Photoshop

In this tutorial, you will learn how to create a cute and adorable Twitter icon. Throughout this tutorial, you will use some of the basic tools like Ellipse Tool, Pen Tool and Gradient Tool.

21. Create a Cool Vector Panda Character in Illustrator

Here’s a step by step walk-through of the process used to create a cool Panda character, from the basic outlines through to the detailed final design.

22. How to Create a Cool Monkey Character in Illustrator

In this tutorial, yo’re going to be creating a monkey character illustration using Adobe Illustrator. You’ll be using basic Shape Tools, the Pen Tool and various other Illustrator techniques to create the illustration.

23. Create Lady Birds Insect Tutorial Using Adobe Illustrator

You can find these cute little bugs being almost anywhere and they won’t ever cause anything but cheers. In this tutorial you will be shown how to create one cool lady bird using Adobe Illustrator.

24. How to Create a Cute Bunny Vector Character

In this Illustrator tutorial, you will see you how to create a cute bunny character. This tutorial uses simple shapes and gradients that are easy to apply to other character illustrations. The great thing about this tutorial is you don’t have to be an amazing artist to be able to do this.

25. Create A Cute Creature Character From A Sketch

In this tutorial you will see how to create a cute creature from a sketch. This tutorial uses custom brushes, the Paintbrush tool, Pen tool, and the Live Paint Bucket tool. Even if you’re not a huge fan of the cuteness, you can use these techniques for other illustrations, logos, and vector elements.

26. Character Development Tutorial Series

This 5 part video tutorial series using a combination of images, video, and commentary will walk you through the process of creating a character from scratch. This tutorial does a great job of showing you how to loosen up, explore ideas, and develop concepts into finished artwork.

27. Character Design from Life

In a handful of over-the-shoulder video tutorials author, David Colman, shares some tips on using real-life inspiration to create unique characters. What makes this series really shine, however, is that is offers a glimpse at how you can take your drawings to the next level by implementing simple and effective design elements.

28. How to Create Typeface Characters

Learn how to take different sections of the characters of a specific font and put them together, giving birth to different kinds of creatures.

29. Drawing Homer Simpson

This tutorial will teach you how to draw the Simpson’s favorite character, Homer Simpson, from grounds up. Your drawing project will involve drawing the outline of the character, applying strokes to these outlines, and then using various selection tools to color Homer’s skin and clothing. You will then finish it off by adding shadows and highlights to make it look similar to the image below.

30. Character Creation in Adobe Illustrator

Simple tutorial where you can learn basic techniques of character creation.

31. How to Create a Vector Illustration and Prepare it for Micro-Stock Sale

There are numerous micro-stock websites that vector designers can design for and make consistent earnings through. This tutorial details a professional workflow for creating vector illustrations and prepping the artwork for these sites. There are also included a bunch of time-saving tools and tips as well.

32. How to Create a Vector Character

This tutorial walks you through the creation of a vector character logo using Adobe Illustrator and Photoshop CS4.

33. Drawing Vector-Looking Cat Illustration Using Photoshop

If you are a beginner or an amateur, this tutorial in web-graphics would certainly be of a great use for you. The aim of this tutorial is to place in the clearest light the process of creating the chosen image. Step by step you will see the whole process and with the help of author’s notes you will clarify all these stages.

34. Cartoon Character – Dexter

Dexter is probably one of those cartoon characters that don’t need an introduction, but anyway, for those who never heard about him, Dexter is boy genius that has a giant secret laboratory filled with his great inventions. In this simple tutorial I will show you how to draw this character inside Adobe Illustrator.

35. How to Make an Animated Paper Robot

In this tutorial you’ll go through the steps of designing and making an animated paper robot character. Not just a picture, this is a moving character that will sit nicely on top of your computer monitor.

36. Make Colorful Bean Characters on Illustrator CS4

Learn how to draw these awesome looking characters using Pen Tool and Gradients.

37. Create the Face of a Grumpy Bear

In this tutorial you can learn to create a grumpy bear face. For the basic shapes you’ll only need the Ellipse Tool and some Warp effects. Later, for some discrete details, you’ll need the Inner Glow, the Gaussian Blur or the Drop Shadow.

38. How to Design a Cheeky Koala Mascot Head

This tutorial will show you how to combine basic shapes with some clever coloring and blending to make a fantastic looking koala character. You’ll use some opacity masks, brushes, gradients and effects, in addition to an easy shading technique you’ll find yourself using in plenty of other projects.

39. Create the Face of a Goofy Bunny

The following tutorial will help you create the face of a goofy bunny. You won’t need the Pen Tool. Only the Ellipse Tool and the Rectangle Tool plus some basic effects like the Inner Glow, the Drop Shadow or the Warp effect.

40. Create Character Driven Book Cover Art Using Illustrator and Photoshop

This two-part tutorial on creating the “Let’s Go To Monster School!” book cover, will show you a complete process from initial sketch to the final artwork, using an Illustrator to Photoshop integrated workflow. In Part 1 you will employ Illustrator to trace our hand drawn sketch, lay down the shapes and define the basic colors.

41. How to Create a Cute Vector Bear T-Shirt Design

Get busy with Adobe Illustrator and design a cute bear character and surrounding scenery in just two colours, ready for use as a cool t-shirt design.

42. How To Draw a Cute Vector Dog Character in Illustrator

Follow this step by step design process of the making of a vector character. You’ll start with a hand drawn sketch of Chris Spooner’s dog, Jake the labrador retriever, then add various lines, colour fills gradients and highlights to produce a cute cartoon representation.

43. Draw a Nice Punk Kid in Illustrator

This tutorial will take you through the process of drawing a nice punk kid in Illustrator. You’ll be working with the basic shapes to start, then use a variety of gradients to add depth and details to our illustration.

44. How To Draw Ferb Step By Step

Phineas and Ferb is an animated television comedy series. They are also known as “Disney’s Phineas and Ferb“. This tutorial is about only Ferb where you will be guided how to draw Ferb step by step in Illustrator. It’s a very basic tutorial where beginners can also practice this easily. You can also download the source file of Ferb at the end of this tutorial.

45. Create a Cute Pig Postcard from Sketch

This tutorial aims to guide you from sketchbook to screen; a “Cute Pig” drawn with pencil in just a couple of minutes translated into a vector postcard.

46. Creating Convincing Characters

In this tutorial, you’ll learn some basic skills for converting your character from a pencil doodle to a complete, fully coloured image – learning some crucial Illustrator skills along the way.

47. Symmetrical Illustration: Thug Bunny!

This tutorial will go through the method of using symmetry in your artwork. Learn how to do half the work but still get the full benefit from your artwork.

48. How to Draw a Funny Bee Illustration

Although they can be very dangerous, bees are loved around the world for honey they are producing. From this tutorial you will learn how to create a funny illustration of a bee inside Adobe Illustrator.

49. Design a Cute Hamster Avatar

Learn how to design cute hamster in Illustrator from scratch. There’s also a soundtrack included in tutorial to help you work.

50. Draw a Beautiful Female Character

Office life would be very boring if there wouldn’t be those hot and strict secretaries. This simple tutorial shows you how to create a beautiful female character using Illustrator.

How To Create Recognizable And Really Unique Article Thumbnails

Daniels Mekšs — Mon, 19 Jul 2010 10:00:47 +0000

Picture can save a thousand words. That’s true and it works everywhere, even in blogs. Next thing visitors spot after the title is thumbnail. Well done post thumbnails will attract more visitors and they will explore your website with interest.

In this article I’m going to share some tips and advices about beautiful post thumbnails. You will see lot examples of using thumbnails and hopefully learn something new.

Size and Location

Correct size and placing is as important as the thumbnails themselves. Don’t overplay with the sizes. Too small size might not display all the information you need, but too large size will be distracting. Don’t choose too striking or too imperceptible position either. Cleary visible spot for your thumbnails is good, but the content is more important, right? Too imperceptible spot won’t attract so many visitors. Below you will find some of the most popular thumbnail placing and size.

Large thumbnail below title or introduction

Layouts where quite large thumbnail lies below heading or introduction has become quite popular. They’re handy, because you can insert a lot of information there. You don’t have to resize your preferred image to half. Great preview is available. Lot of blogs choose to put pictures or screenshots there, because creating so large thumbnail yourself is time-consuming. Usually the width is fixed, but the height varies from around 200 to 400 pixels. And that’s great, because if you are using a photo, you can crop it as you like. These large thumbnails if made properly can really attach lots of visitors. But be aware that not all designs will look good with these large thumbnails.

Fubiz

Denis Designs Blog

Little Box Of Ideas

SW Graphic

Chilli Blog

In Chilli the thumbnail is actually above title. The thumbnails aren’t too large, they fit perfectly and make superb contrast with this awesome dark design.

Square thumbnail leftwards title

This is definitely most used layout in design blogs. It’s very practical and the thumbnails doesn’t take up too much room. Users can quickly scroll trough posts. Sizes of these thumbnails usually varies from 100 to 250 pixels for each brink. If you have a good taste and accordant skills, these thumbnails can look really beautiful and make people willing to read your posts.

PSDFan

Appstorm

PSD Vault

SpeckyBoy

Square thumbnail below title and leftwards content

This solution is very similar to previous one, but not used as much. It allows users to focus more on the title, and only after the title they spot the thumbnail. I like this solution, because you can read the title and then get a small preview about article. However thumbnail is not as important as the content itself and in this location the thumbnail distracts attention from your post introduction a little. But there are many blogs, where this layout looks very good. The most popular again is square shaped thumbnail, but there are blogs using rectangular thumbnails too.

Forcg

Web Designer Depot

My Ink Blog

Creative Fan

Square thumbnail rightwards title

Infrequent placing, but basically it’s pretty much the same as within the left side. Only people are not used to it, that’s why it looks a bit strange. Personally I prefer left side placing, because I don’t like switching my look from thumbnail to beginning of the title and backwards. But in some blogs those thumbnails actually make segregated column and look pretty solid.

UX Booth

Techniques

Photographs

Photos matching the subject you are writing about can really highlight your post. Choose them with taste and keep the photos relevant. If you are writing about jQuery tutorials, don’t put a photo manipulation as thumbnail. I suggest checking out 60 Free High Quality Stock Photography Sites if you want to find free stock photos. But I think you will agree that photos on those sites usually aren’t exactly as you imagined. If you want the quality, you have to pay for it. Here are some good sites to get finest quality images:

Of course, it’s pretty expensive to buy images there one by one, but subscription would be a good option. Then you could use some magnificent images to afforce your posts. If you have already found and included some photos in your post, you can assuredly put one of those photos as thumbnail.

Screenshots

If your post includes well designed webpage, tool or a software, then why don’t you put it as a thumbnail? It will completely measure up with the content and you will unite appropriate with enjoyable. People will get a preview about what’s in the article.

Psd.Tutsplus has a freebie to offer, it’s pretty logic that they’re putting preview of it as a thumbnail.

Here Smashing Magazine is writing about jQuery and some tools and they have included a screenshot of one of them as the thumbnail. It’s a good looking tool with nice contrast and at the same time it gives readers a visual preview about what can they expect from the article.

Show off content

This method is even more simple than using screenshots. If you are writing about art or design, you can just pick one image from your post and set it as thumbnail. Again, people will get a preview of post content and thumbnail will be attractive.

Abduzeedo always chooses one gorgeous image from their daily inspiration series and sets it as a thumbnail. Readers spot the great artwork and want to see more.

Reencoded is writing about humorous artworks and they’ve picked up colorful and catching image as their thumbnail.

Text on thumbnail

Adding some text to your thumbnails can help people focus to your posts. This text can also help to bring visitors if they search for images in sites like Google.

Trendland has a unique and really great solution. Once you hover the thumbnail, a pop up with some introduction is revealed. That way you can save a lot of space and visitors can have both visual and written preview available.

United style

If you are writing lot about similar topics, a united thumbnail design is a neat solution. You can create thumbnails after premade template. That way you will save time and you will have stylish thumbnails. Many blogs have CSS solutions for thumbnail styling.

See those shadows under thumbnails in Web Stuff Share? They’re under every thumbnail making them look small arches. That gives your blog more unified look. Every thumbnail is different there, but you can see those shadows right away.

Hv-Designs releases freebie pack every Friday. Instead of creating new thumbnail every week, Richard Carpenter has created a template and just changes the number once a week.

Other uses

Thumbnails are not used just in main page while users browse trough posts. Of course that’s the most important use of them, but there are still some other, worth to mention, uses.

Related posts section after article is a nice feature itself. But monotonous links just themselves aren’t embolding users to read some other articles. You need to brighten them up. That’s where thumbnails come in again.

Web Design Ledger has nice 5 related posts after article each with pretty large fixed size thumbnail.

Smashing Hub also has 5 related posts, but they’re using small squared thumbnails. The cons are that there are large spacings between titles and those thumbnails are really small.

But Graphic Design Blender has a solution for this problem. They have placed titles in fixed space below thumbnails. Though there are less posts, but the spacing is good and it’s very compact.

Featured posts

Featured post thumbnails are even more important, because they will be seen by much more people. Again, if your thumbnails are worked great, they will attract lots of visitors.

Iso 50 doesn’t have a lot of space for featured posts, but those small dishy thumbnails are working great on the right side of posts.

Epicera Studio has got really large thumbnails and they’re using jQuery to rotate them. There is also category and title with direct links on thumbnails. If you have a lot of space in your design, this is one brilliant solution.

Gallery view

Blogs, who are posting a lot often use gallery style post view. Thumbnails are very important then. Since you won’t be able to add long post descriptions, only available information will be title and thumbnail. And, of course, in that miscellany people won’t focus so much to the titles. They will look for a pleasant picture to click on.

Design Aside is publishing a lot of posts, so they have chosen gallery post view. With those large thumbnails it’s very easy to quickly run over the content.

Chonch Style has customized thumbnails to match the designs. Pretty large rectangular thumbnails with title on them makes browsing agreeable.

List thumbnails

When you have a long list with articles or links again, as in related posts, people won’t be willing to read those titles anc click on them. Small thumbnail is a fine way out.

Web Design Ledger has placed two lists with their premium files and recent articles on the left side. Each link has a small 25×25 pixel thumbnail in front of it. You can’t get a good preview of them, but at least it’s something and it’s much better than just boring list of links.

Boompa has added small squared thumbnails showing off their new music. There aren’t many of links, so they can afford the thumbnails to be larger.

Quick tutorial

I’m going to show you how I created 150×150 pixel thumbnail for this article. I’m going to use screenshot above mentioned of PSD Fan.

1. Create a new document like shown below.

2. Take the screenshot and paste it into your document. Then press Ctrl + T and enter settings shown below.

3. Move your photo up a bit using Move Tool. You should have something like this.

4. Go to Filter – Blur – Gaussian Blur and apply 1.5 pixels. Then go to Filter – Blur – Motion Blur and apply 4 pixels with 10° angle. You should have something like this.

5. Grab Rectangle Tool, set it to Fill Pixels mode and fix it’s size to 150×32 pixels. Create a new layer and draw it. Place it somewhere in bottom.

6. Lower the Fill Opacity to 35% and apply 1 pixel black stroke with 40% Opacity.

7. Add your text. I used

Myriad Pro
Regular, 18 pt, Sharp, White, 0 Tracking
Drop shadow, 30% Opacity, 0 px Distance, 0% Spread, 1 px Size

Then I duplicated layer, rasterized it and painted it black. I placed it under original and moved 1 px down. That will give you little depth effect.

8. Select soft brush (I used 50 px large) and brush around brinks. Then go to Filter – Blur – Box Blur and apply 20 pixels. In this case I lowered the Opacity to 45%.

9. Create a new layer above your screenshot layer. Fill it with 50% grey and set it to Overlay. Use Burn and Dodge tool to darken corners and highlight middle part. After you’re done, apply some Gaussian blur (I used 8 pixels). Lower layers Opacity if you need.

10. For final touches, I added some blurry vivid colors, warm photo filter and black and white Gradient map with low opacity.

Summary

Well, what can I say to you? You’ve seen various layouts, techniques and uses of thumbnails. Now it’s time to improve yours.

Learn Photoshop.

There aren’t specific tutorials for creating thumbnails much, but if you’re blogging about Photoshop, then sometimes it’s really worth checking out some of the tutorials. Learn new techniques and explore facilities. That will relief your work immensely.

Ask advice

If you aren’t sure about your design, ask for a feedback. You will get objective opinion and will be able to do some work on mistakes.

Analyse

You’re probably using Google Analytics or similar service to track your sites stats. So research more and find out how big influence on tour visitors your thumbnails have.

Ways of use

You saw some great ways to use thumbnails. Don’t be afraid to be creative. Think where you could use your thumbnails to benefit the best from them.

Ultimate Guide to HTML Emails – Basics, Tips, Tutorials and Resources

Daniels Mekšs — Sat, 17 Jul 2010 11:00:03 +0000

HTML emails is a great marketing tool, and if built good, they work great. In 2009 HTML email ROI was $43.52 for every dollar spent on it. If you are a freelancer be aware that sooner or later your clients will start asking for you to build HTML emails.

You might think that it’s not a big deal. Just a miniature HTML web page. But the difference from building HTML websites is that you aren’t building it to just a couple of browsers with very similar structure, but to 20+ email clients people are using. And believe me, they won’t swallow your code so easily. Each of them has it’s own particularities and that makes

HTML emails so hard to make. Below you will find 50+ tutorials, tips, resources, templates to get familiar with HTML email building.

Basics

1. How to Create and Send HTML Email

See pros and cons of using HTML email, and learn how to send HTML email in 7 easy steps.

2. 20 Email Design Best Practices and Resources for Beginners

Even for experience designers, building email newsletters isn’t easy. You receive a lovely looking design, and you crack on with the development. Unfortunately, it just doesn’t work as it should in every email clients. This is where these twenty best practices come in handy.

3. Getting Started in Email Marketing

Mailchimp, one of the most powerful email marketing tools, shares lot of useful articles with you. From designing and coding HTML email to deliverability and spam filter avoiding. You can also download Mailchimp’s Email Marketing Field Guide.

4. Campaign Monitor Articles & Tips

Campaign Monitor is an email marketing software for designers and their clients. You can find here great articles covering almost everything beginner can learn from, guides, email templates, plugins, and they even have their own email marketing book.

5. A Guide to Creating Email Newsletters

In this article, you’ll be able to explore common design patterns of email newsletters and learn which approaches work well, so that you’ll be prepared to create one for yourself and your clients.

6. The 10 Basics of HTML Email Newsletters

Here you will find 10 basic tips for putting together your own HTML email newsletters.

7. Design and Build Email Newsletters Without Losing Your Mind (and Soul)

This article gives you the information you need to plan, design and build an HTML newsletter that renders well and is actually useful to recipients. It’s a quick and dirty guide to effective email newsletters.

Tips & Advanced Tutorials

1. 10 Tips for Designing HTML Emails

If you don’t know anything about HTML emails, they’re annoying to develop and break all the rules you’ve ever learned as a web designer, but being able to code them is a valuable skill to possess. This article will look at ten quick and easy tips to get beginners started on the road to creating beautiful and functional emails.

2. 6 Easy Ways to Improve Your HTML Emails

Designing email newsletters sends you back ten years. Deprecated tags, tables, inline styling, oh my! This article lists six methods that will immediately improve your email layouts.

3. 8 HTML Email Tips I Wish I’d Known Sooner

The solution for designers who need to design HTML email is to create designs that work relatively consistently across platforms and email clients. This article shows you eight tips for making that happen.

4. Ensuring your HTML Emails Look Great and Get Delivered

Getting your email to look good is only one piece of the puzzle, so here are some recommendations on how you can improve the chances of your emails actually getting delivered.

5. 20 HTML Email Tips

This list of 20 best practises addresses critical issues in coding and design in three key areas: format, functionality and usability. PDF format.

6. Rock Solid HTML Emails

Useful tips and guides from David Greiner, the co-founder, of Campaign Monitor.

7. Tips and Best Practices for HTML Emails in Outlook 2007, 2010

For the Outlook 2007 and 2010 version Microsoft switched from the IE rendering engine to the Word engine, which is completely crippled compared to IE. Even if they switch to IE for 2012, we’ll have clients using 2007 and 2010 for years. So if you haven’t yet learned the ins and outs of designing emails for Outlook, now’s the time to learn!

8. Campaign Monitor Blog

Here you will find tons and tons of useful tips and tutorials on HTML email building from experts in this area.

9. Using CSS in HTML Emails: The Real Story

Some tips on HTML email writing and using CSS in them.

10. Tips For Your First Email Campaign

Here are some tips you should give to new customers who are sending their first email campaigns. Share them with your clients before you begin your next email marketing projects, and you might prevent more than a few headaches!

11. Email Subject Lines: 15 Rules to Write Them Right

Fifty characters could be all that stands between you and success in your next email campaign. Fifty characters is all the space you have in a typical email subject line to catch your reader’s eye and entice him to open your email and take the action you want. Look at 15 rules to make it right.

12. Smart Email Marketing

20+ useful tips to strengthen your email marketing performance.

13. Using CSS and HTML in Email Newsletters

Gere are Groundwire’s guidelines for creating successful email newsletters that will look good even in the worst email clients.

14. Create a Free Email Newsletter Service using WordPress

In this tutorial, you will be using WordPress and Feedburner with a few plugins to create a simple Email Newsletter Service for your WordPress blog. You can track the performance of your newsletter by checking how many subscribers you have, how many clicks each link gets and much more.

15. Build a ‘WordBurner’ Email Newsletter Manager using WordPress and FeedBurner

Similar to previous one, this tutorial will show you how to use your regular WordPress website combined with Feedburner to make a simple email newsletter manager.

16. How To Code HTML Email Newsletters

This article brings you up to date on How best to Code HTML Email so that it will display well in most email software. It provides an exhaustive overview of how to code HTML email newsletters with links to free HTML email templates, CSS compatibility tables, services that test your HTML email, and much more.

17. Create an Email Newsletter Template

This is a two-part tutorial first showing you how to create the template in Photoshop and then how to turn it into working HTML page. Go to the second part here.

18. How to code an HTML Email Newsletter

This step-by-step tutorial, is going to show you exactly how to code an HTML email.

19. Email Newsletter Distribution And Mailing Services: Guide To The Best Free Online Solutions

In this guide you will find the best free email newsletter distribution and mailing services available out there, as well as complementary information to help you identify and select your ideal one.

20. Top 10 Marketing Tips for Great Email Newsletters

If you follow these 10 small business marketing tips, you’ll be on your way to creating an effective email newsletter to help build your business.

21. Best Practices for Coding HTML Emails

This article features the most important things of coding html emails.

22. The Principles of HTML Email Design

This article is an excerpt from Create Stunning HTML Email That Just Works, focusing on the first principles of HTML email design. Read on to start learning how to design beautiful and effective HTML emails.

Templates & Resources

1. Starter HTML Email Templates for Your Email Marketing Campaigns

Here are four basic, flexible templates from Mailchimp that you can use to get started. They’ve been tested to render properly in all the major email programs, like Outlook 2007, Lotus Notes, Gmail, and more. Just download all the templates in one .ZIP file and customize any way you want with your favorite text editor.

2. Cake Mail Newsletter Templates

Choose from 6 basic and 15+ advanced templates for your HTML emails.

3. 30 Free HTML Email Templates

Getting your email to look great in all the major email clients can be a challenge at times, so the hard work has been done for you with these 30 free email templates. They’re tested in all the major email clients, so add your own content.

4. Excellent HTML Newsletter Templates – Best Of

Here is round-up of some of the best free HTML newsletter templates on the Internet you can download without paying a penny.

5. 35+ Free HTML Email Newsletter

This article is showing you a great deal about 35+ free newsletter email templates, where you will find some great design for our personal and business use if there is policy for use listed templates for commercial use, you must follow links website which providing us very much professional and beginner level newsletter templates.

6. Guide to CSS Support in Email Clients

This guide has been put together to save you the time and frustration of figuring it out for yourself. With 23 different email clients tested, this guide covers all the popular applications across desktop, web and mobile email. For the complete report on all 24 email clients across the desktop, web and mobile email world, download the complete guide in PDF format.

7. Email Standards Project

The Email Standards Project works with email client developers and the design community to improve web standards support and accessibility in email.

8. Premailer

For the best HTML e-mail delivery results, CSS should be inline. This is a huge pain and a simple newsletter becomes unmanageable very quickly. This script is our solution.

9. Email on Acid

Preview your HTML email in the top 18, most popular email clients. Though only AOL, Gmail and Outlook 03 is free.

10. Emogrifier

This utility deals with the problems posed by certain email clients (namely Outlook 2007 and Google Gmail) when it comes to the way they handle styling contained in HTML emails. Emogrifier automagically transforms your HTML by parsing your CSS and inserting your CSS definitions into tags within your HTML based on your CSS selectors.

11. Is Not Spam

IsNotSpam online spam checker was created to help you test email and newsletter content, and alert if it is likely to trigger spam filters.