Ngayxanh Web Design Resources

How To Create A Simple Portfolio Site Running On Surreal CMS

Jon Phillips — Thu, 13 Aug 2009 00:27:21 +0000

I always enjoy working on new things and learn about new CMS and how they work and all. I recently connected with Cory at Surreal CMS, and I decided to write a tutorial on how to create a portfolio site and run it with Surreal CMS.

It’s pretty simple actually. In this tutorial I’ll show you how I came up with the basic design, we’ll also go through coding that layout (markup and CSS) and I’ll show you how to integrate Surreal CMS and how it can be used to run your site and your client’s sites. We’ll also go through the process of branding the CMS so that your clients see your own logo instead of the Surreal CMS logo.

Now let’s get started!

First We Need A Design

I used Adobe Fireworks to create the basic layout and graphics. You can check it out below – This is what we’ll slice, code and use to run Surreal CMS with. It’s a rather basic layout, but it’ll be perfect for the purpose of this tutorial.

Here’s the layout:

Quick Overview Of The Layout Design

I created a new document in Adobe Fireworks and set the width and height to something I’m comfortable working with. In this case I went with 1200×1000px. And I chose #EEEEEE as the background color.

In the first layer I created a rectangle and gave it a height of 130px and a width of 1200px. The rectangle has a linear gradient that goes from #70A033 to #48761C (the green rectangle at the top – which we’ll use as our body background image).

I then created the logo using Century Gothic and the nav menu is set in Helvetica. I made it uppercase and put a -1px letter spacing. Then I created a main content box and set the color to #FFFFFF (so it contrasts a bit with the #EEEEEE in the background)

Then it was just a matter of figuring out what to put in those content boxes. I figured it’d be cool to have some thumbnails of recent projects (that would open in a lightbox when clicked) and a little ‘about us‘ blurb. I used some cool free icons from Function.

And then at the bottom there’s the usual footer with a Copyright notice and all.

Slicing Up The Images

I grabbed a 1×130px sample of my green gradient box. This will become our body background image and it will repeat horizontally.

I also saved the logo and tagline as a transparent PNG file.

And then I just sliced the icons.

Coding The Layout

Our portfolio site will have 4 pages:

Home
About
Work
Contact

First of all we’re going to have to create the following files:

nav.php
footer.php
index.php
style.css

We’re going to need more PHP files for the about, work and contact pages, but for now let’s focus on writing the markup and CSS for the homepage.

Let’s Start With The Header

You’ll notice that I use a class=”editable” on many divs and paragraphs. This is because Surreal CMS will look for those regions and make them editable via the CMS admin panel. Make sure you never use a class=”editable” for anything else than what you want to show up in the CMS.

So, we’ll need to declare the DOCTYPE and then we can start coding away. Here’s the first part of the website:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Simple Portfolio Site Running On Surreal CMS

Then the logo and navigation:


	
		
			home
			about
			work
			contact

We’ll come back to the header section later, but that’s a start.

As you can see I gave my header an ID of ‘header‘, and I gave the unordered list a class of ‘menu‘. Obvious, right?

And Then The Main Index

We’ll start the main index file with the header we just did and then do a php include to grab the nav.php file, like this:

< ?php include('nav.php'); ?>

And then we’ll need a main div (maincontent) that will hold all of our content. Right before that maincontent div I put a paragraph and gave it a class of ‘message‘. This is the box that’s between the header and the content on the homepage.

	Hello there! Welcome to surreal portfolio. This site is an example of what you can do with  Surreal CMS - an easy to use and powerful CMS that can make your life as a designer much easier! (oh hey, and this section is easy to edit via the Surreal CMS admin panel)

And of course we close this file with another php include, our footer file:

< ?php include('footer.php'); ?>

A Simple Footer

The footer is pretty simple, just a paragraph inside a div. Then we end the document with the closing body and html tags.


	Copyright 2009 - Jon Phillips & SpyreStudios - Powered by Surreal CMS.

We’re Getting Somewhere

Now we have a somewhat functional homepage (though it’s butt ugly since we didn’t write any CSS yet) Here’s what our homepage should look like now:

Here’s the homepage markup in it’s entirety (we’ll add some content and javascript soon):

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Simple Portfolio Site Running On Surreal CMS




< ?php include('nav.php'); ?>

	Hello there! Welcome to surreal portfolio. This site is an example of what you can do with  Surreal CMS - an easy to use and powerful CMS that can make your life as a designer much easier! (oh hey, and this section is easy to edit via the Surreal CMS admin panel)


	

< ?php include('footer.php'); ?>

Now We Need Content

So, before we write any CSS, let’s add some content. Let’s take the ‘maincontent’ div and add some stuff in there:

We have 2 sections:

Latest From The Portfolio
About Our Company

Since the first section to come up is the ‘Latest From The Portfolio‘, let’s create a div and add some images:

	
		
		Latest From The Portfolio

See, I also added rel=”lightbox” to my image links. We’ll need to go back in the header.php and add the JS file for this to work. I used Lightbox 2 and you can download it here and instructions are also available on the website.

Let’s go back to our header and add the JS files and the Lightbox 2 CSS file in there. Like this:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Simple Portfolio Site Running On Surreal CMS

Now let’s do the ‘About Our Company‘ section. Another div and 2 paragraphs inside it. You’ll notice I’ve also put H2 headings for each section.

	
		
		Latest From The Portfolio
			
			
			
			
			
		
		
		About Our Company
			We're a small, yet highly focussed, team of designers and developers from Montreal, Canada. We build websites for clients from all over the world and we love what we do!
			This website is our home on the web - please take a minute to have a look around or click here to learn more about us...

Now The CSS!

I don’t think it’s necessary for me to explain the whole CSS file. Everything is pretty self explanatory: maincontent div for the main content, content1 div for the first block of content, same for the second block of content, unordered list with a class of menu for the navigation menu. Pretty easy, right? (you can always leave a comment and I’ll try my best to answer your questions)

Here’s the CSS in it’s entirety:


body {
background:#eee url(images/bodybg.jpg) repeat-x;
color:#444;
width:900px;
font-size:14px;
font-family:helvetica, arial, sans-serif;
margin:0 auto;
padding:0;
}

#header {
margin:0;
padding:0 0 15px;
}

h1 {
float:left;
width:397px;
margin:0;
padding:30px 0 20px;
}

h2 {
font:bold 26px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:0 0 20px;
}

h2.computer {
background:url(images/computericon.jpg) no-repeat;
font:bold 18px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:8px 0 30px 56px;
}

h2.coffeecup {
background:url(images/coffeeicon.jpg) no-repeat;
font:bold 18px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:12px 0 30px 50px;
}

h3 {
font:normal 22px georgia, serif;
color:#000;
margin:0;
padding:25px 0 12px;
}

img.right {
float:right;
background:#eee;
border:1px solid #ccc;
margin:0 0 15px 20px;
padding:10px;
}

img.left {
float:left;
background:#eee;
border:1px solid #ccc;
margin:0 20px 15px 0;
padding:10px;
}

ul.menu {
text-transform:uppercase;
float:right;
margin:0;
padding:50px 0 0;
}

ul.menu li {
font-size:18px;
font-weight:700;
letter-spacing:-1px;
display:inline;
margin:0;
padding:0 8px;
}

ul.menu li a,ul.menu li a:visited {
border:none;
background:transparent;
color:#fff;
display:inline;
margin:0;
padding:0;
}

ul.menu li a:hover,ul.menu li a:visited:hover {
background:transparent;
border:none;
color:#000;
display:inline;
margin:0;
padding:0;
}

p.message {
clear:both;
font:normal 24px helvetica, arial, sans-serif;
background:#fff;
letter-spacing:-1px;
color:#313F4C;
line-height:30px;
margin:0 0 30px;
padding:30px;
}

p.message span {
font:18px normal georgia, 'Time New Romans', serif;
color:#888;
font-style:italic;
margin:0;
padding:0 0 0 10px;
}

#maincontent {
float:left;
width:840px;
font:14px normal helvetica, arial, sans-serif;
background:#fff;
color:#313F4C;
line-height:34px;
margin:0 0 10px;
padding:30px;
}

#maincontent p {
line-height:28px;
}

ul {
line-height:18px;
list-style-type:none;
display:block;
margin:0;
padding:0;
}

ul li {
list-style-type:none;
display:block;
margin:0;
padding:0 0 8px;
}

ul li a {
list-style-type:none;
color:#556D84;
display:block;
margin:0;
padding:10px;
}

ul li a:hover {
list-style-type:none;
display:block;
color:#000;
margin:0;
padding:10px;
}

#maincontent img {
border:1px solid #ccc;
background:#eee;
margin:0 3px;
padding:8px;
}

#maincontent img:hover {
border:1px solid #bbb;
background:#ddd;
margin:0 3px;
padding:8px;
}

a,a:visited {
text-decoration:none;
color:#48771E;
}

a:hover,a:hover:visited {
text-decoration:none;
color:#000;
}

.footer {
float:left;
font-size:12px;
width:900px;
color:#999;
padding:10px 0 40px;
}

.content1,.content2 {
width:840px;
font:16px normal helvetica, arial, sans-serif;
background:#fff;
color:#333;
margin:0 0 30px;
padding:0;
}

Creating The Other PHP Files

Now that we’re done with the header, navigation, main index, footer and CSS, let’s create our work, about and contact pages.

This is actually very easy: Simply duplicate the index.php file 3 times, rename to about.php, work.php and contact.php and you’re almost done. Open up those 3 new files in your favorite editor and remove the ‘message’ paragraph and insert some lorem ipsum in the maincontainer div. (at the end of the tutorial you have a download link so you can grab all the files from this tutorial)

Creating Your Surreal CMS Account – PROMO CODE!

We’ve partnered with Surreal CMS to give you guys and gals a little something. You can create a free account with Surreal CMS but there are some restrictions. With the upgraded account you’d be able to manage an unlimited number of websites, use your own custom logo and color scheme (clients will love this), and access the CMS via your own domain at cms.yourdomain.com instead of via surrealcms.com. Those features are not available with free accounts.

The Designer/upgraded account costs $25 per month, but Cory agreed to give the first month free to readers and visitors of SpyreStudios. You can read more about it and grab the promo code by visiting this page (this offer is valid up till September 31st).

Integrating Surreal CMS To Our Design

Now that we have a working website, let’s work on the fun (and actually pretty easy) stuff

Surreal CMS really is a simple, no-fuss CMS. All you have to do to make a region editable (I mentioned this earlier) via the CMS is to add a class=”editable” to an element. It’s that easy! You can also add a title=”something here” to elements, though if an element already has an ID, you won’t need to add the title attribute.

Step By Step

1- Go to Surreal CMS and signup. Once you’re done with the signup process, login with your email and password. You’ll be on the ‘My Websites’ page. Click on ‘Add a Website’ and enter your FTP information, test the connection and browse to your website root. The website root is where you will upload your website files, in most cases that’s the main folder, also called ‘root directory’.

Click ‘Save Changes‘ when you’re done.

2- Click on the website URL and then on ‘Enable Pages‘. Then select the pages you’d like to enable. Make sure you actually upload those files manually to your website root directory. For this tutorial I uploaded all my php files, my css file, the js folder that contains the lightbox script, a css folder that contains the lightbox css, and my images folder. When you’re done, you’ll be able to change the display name of the file so it’s easier to work with in the CMS.

3- Since we put the class=”editable” to many of our divs and paragraphs, we’ll be able to edit those regions via the admin panel. Next to each of the file names you’ll see an ‘Edit‘ link, click on the one next to the index.php. It’ll load the Editor. There you will see the content regions you defined as ‘editable’, you’ll also have a ‘publish to web’ button which, when clicked, will update your html or php file. And you can also edit your markup by clicking on the ‘Edit Content Regions’ button. What that means is once you’ve uploaded your files, you don’t have to re-upload anything, you can manage everything via Surreal CMS.

That’s basically it. You can manage your whole site from within the Surreal CMS admin. Want to add a new editable region? Easy! Just load up the ‘Content Region Editor‘ and add the class=”editable” to the element you want to edit with Surreal CMS.

The class=”editable” can be added to a number of html tags (more than this list – those are some of the most popular ones anyway):

blockquote
div
h1 — h6
img
ol, ul
p
pre
span
table, td, th

4- You can even change the title and meta description and keywords via Surreal CMS. Just click on ‘Properties‘

Adding Editors

This feature is pretty cool. Say you’re building websites for clients and you want them to be able to edit their site themselves (that’s the whole point right?) Simply add an editor, edit the welcome message, and voila! You’re done! Your client will be able to easily edit the content of the pages the same way you would via the Surreal CMS admin.

Use Surreal CMS With Your Own Domain

That part is pretty straight forward. This is if you would like to be able to access the CMS via your own domain instead of the default edit-content.com website.

Login to your web hosting account
Navigate to the DNS (or Name Server) Management section
Select a domain/sub-domain that you want to use to access the CMS
Create a CNAME record that points to edit-content.com

Branding Surreal CMS With Your Own Logo And Color Scheme

Of course if you use Surreal CMS to build websites for your clients you’ll want them to see your logo and color scheme instead of the default colors and logo. Click on the ‘My Account tab at the top, upload your logo and change the color scheme. It’s that easy. You can also change your contact information and password via this page.

Here’s the default design of the Surreal CMS admin:

Here’s my own:

It’s A Wrap!

That concludes our tutorial on creating a portfolio site running on Surreal CMS. I hope you liked it! Here’s our final result: Surreal Portfolio.

You can download the files from this tutorial here (downloaded 83 times already!).

If you would like to try out Surreal CMS, remember that you can get a Designer Account for the first month for free (the offer is valid up till September 31st). The Designer/Upgraded account enables features that are not available with the free account!

Cheers!

A Simple Twitter App with Ruby on Rails – Building Friendships

Noupe — Wed, 12 Aug 2009 21:41:05 +0000

Introduction

This is the third and final part of series on how to create a twitter style web application with Ruby on Rails. This part will cover how to add friendships between users.

The first part of this tutorial: A Simple Twitter App with Ruby on Rails – Messages With Ajax
The second part of this tutorial: A Simple Twitter App with Ruby on Rails – User Authentication

Self-Referential Relationship

To create friendships between users we have to deal with a special type of association, which is called a self referential relationship. It is called this because the model (in this case, User) references itself. Why? Well if a given “user” has many “friends”, those “friends” are also “users”. Furthermore, each of those friends can also have friends, so we are dealing with a many to many relationship.

The relationship can affectively be called a “friendship” because friendships can be gained and lost (as in real life). So, let’s create the friendship model with two foreign keys.


  > ruby script/generate model friendship user_id:integer friend_id:integer

Now, migrate the database:-

  > rake db:migrate

Making and Losing Friends

We will need to create and destroy friendships and for this we will need a controller for friendships:-

  > ruby script/generate controller friendships

Now add the create and destroy methods as shown below:-

class FriendshipsController < ApplicationController
  def create
    @friendship = current_user.friendships.build(:friend_id => params[:friend_id])
    if @friendship.save
      flash[:notice] = "Added friend."
      redirect_to root_url
    else
      flash[:error] = "Error occurred when adding friend."
      redirect_to root_url
    end
  end

  def destroy
    @friendship = current_user.friendships.find(params[:id])
    @friendship.destroy
    flash[:notice] = "Successfully destroyed friendship."
    redirect_to root_url
  end
end

So, what exactly do we relate the user model to?? Well, first we need to specify that the friendship model belongs to a friend (which is actually a user!). You can do this by adding some more lines to the user model:-

class Friendship < ActiveRecord::Base
  ...
  belongs_to :friend, :class_name => "User"
end

We need to add two lines to the User model. A User has many friendships and has many friends through friendships. This reads almost exactly as it is coded, which is a testament to Ruby on Rails.

class User < ActiveRecord::Base
  has_many :friendships
  has_many :friends, :through => :friendships
  ...
end

Listing your Friends

If we want to list all the registered users and allow the current user to befriend other users, then we will need to create a new view in the users folder called index.html.erb:-


  < % @users.each do |user| %>

      < % if user.username != current_user.username %>
        < %=h user.username %>
        < %= link_to "Add Friend", friendships_path(:friend_id => user), :method => :post %>
      < % end %>
    

  < % end %>

Now, let’s put the controller actions in place. Open the users_controller file and add the index and show methods.

class UsersController < ApplicationController
  def index
    @users = User.all
  end

  def show
    @user = current_user
  end
  ...
end

We need to do two more things before we can give this a whirl. First add the friendships resource to the routes file:-

map.resources :friendships

…and finally, we can add some links on the posts/index.html.erb file:-

...

< %= link_to "Make Friends", users_path %>

< %= link_to "My Friends", { :controller => "users", :action => "show", :id => current_user } %>

Ok, we can now start up the server and browse to http://localhost:3000 to have a look.

Summary

Obviously there are several directions you could take this application. A lot of features could be added and it could be spruced up, somewhat. I hope these tutorials have helped you in some way and again, I would highly recommend that you try Ruby on Rails, if you haven’t already.

Author: Phil McClure

Phil McClure is a Software Developer from Belfast, Northern Ireland. His main interests are software architecture, design patterns and how these can be applied to web development. Phil blogs at Therailworld. Follow him on Twitter.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

Create Surreal Nature Inspired Objects by Fusing 2D and 3D – Psd Plus Tutorial

Saad Moosajee — Wed, 12 Aug 2009 13:29:15 +0000

We have another Psd Plus tutorial exclusively available to Plus members today. If you want to take your digital work to the next level, then we have an exciting tutorial for you. Learn how to use 3D objects, and natural particles, to create an exciting layout, using multiple techniques. Learn more at the jump!

This Plus Tutorial is Filled with Creative Tips

In this tutorial, I will be explaining how to create surreal objects by merging 3D techniques and 2D techniques. This is by no means a beginners tutorial, basic knowledge of Cinema 4D and fairly decent knowledge of Photoshop will be required to successfully complete this tutorial.

Plus members can Log in and Download! If you’re not a member, you can of course join today! Below is the final image we’ll be creating in this tutorial.

Precise and Detailed Instructions Inside

Plus members can Log in and Download! Otherwise, Join Now! Below are some sample images from this tutorial.

PSD Plus Membership

As you know, we run a premium membership system here called ‘Plus’ that costs $9 a month (or $22 for 3 months!) which gives members access to the Source files for tutorials as well as periodic extra tutorials, like this one! You’ll also get access to Net Plus and Vector Plus, too. If you’re a Plus member, you can log in and download the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to subscribe to the Psdtuts+ RSS Feed to stay up to date with the latest Photoshop tutorials and articles.

How to Tweak Your Home Office to Be Productive Full-time

FreelanceSwitch.com — Wed, 12 Aug 2009 12:30:00 +0000

Change is on my mind. This week has been my first week as a full-time web worker. I feel like I have been initiated into a club, and have a new sense of freedom. My home is my office, my work hours are flexible, and I can wear what I want. I like those changes!

I also find myself thinking about the changes I need to make for my new work situation to be as effective as possible. This week I am away from home, and I have been thinking about major and minor adjustments I will need to make in my work space and lifestyle. My home office has been quite effective on a part-time basis, but will it cut it when I will be there all day (or all night), when I need to concentrate when the kids get home from school, and when I am under pressure to get a task finished?

Here are five issues I need to deal with when I am working from home next week:

1. Rethink Your Office Location

A home office should be a dedicated room away from noises and distractions with a door that can be closed when necessary. Unfortunately we don’t have a spare room for an office—a side-effect of having so many kids. At first I used an outdoor table in an under-cover barbecue area, but even in sunny Queensland, sometimes the weather (not to mention the flies and mosquitoes) made work difficult.

A home office should be a dedicated room away from noises and distractions with a door that can be closed when necessary.

After that I started using our dining room table, which isn’t often used for dining. Although it’s a heavy-traffic area, and close to the clash of pots and pans at washing up time, it has been quiet enough during my part-time working hours. During noisy times I have been wearing headphones.

But I’m working at my home office all day every day, and that isn’t going to cut it. I need a new place for my desk. My ideal desk location would:

be well ventilated, with fresh air to keep the brain working
be well-lit, preferably with natural light during the day
have a window to look out of when I’m thinking or having a break, preferably with something nice to look at, like a garden
be spacious enough so that I don’t feel restrained or claustrophobic
to be in a separate part of the house to the noise, including TV, music, washing up and kids in general.

Would you add anything else to my list?

To make things more complicated, I have an eight-month old baby and a shift-working wife, both of whom may need to sleep during the day time, so my desk should be away from the sleeping area. On the other hand, when my wife is doing a day shift, my desk needs to be close enough to the cot to keep an eye on my son. This is the fun of freelancing—what other type of office needs to take these kinds of issues into account?

What other type of office needs to take these kinds of issues into account?

I’m looking forward to a surprise when I get home: my wife is rearranging the house (including my desk) in a way that she thinks is going to work. I’m curious to see what she has done. Fortunately she is going away a week later so that I can fix things if necessary!

2. Declutter Your Desk

I admit it: I inherited the hoarding gene from my dad. Over the years I have collected piles of paper containing “useful” information, including reference information, useful tips, decade-old receipts, and the kids’ report cards from school. They’ve been shuffled from box to box each time we’ve moved house, and seriously need to be sorted out. My desk is also surrounded by spare monitors and keyboards and computer speakers, “useful” knick knacks, and piles of books.

When I was working from home part-time and out servicing clients most of the day, my jungle of junk was bearable, but as a full-timer it is only going to frustrate me and drive me away from my work. It’s time to seriously declutter my work space.

I’m not brave enough to throw out whole boxes of paperwork – there are definitely useful documents in those boxes. But I won’t have time to sort through it all in one sitting. I need to find an alternate location to store it, and schedule time each week to slowly sort out the wheat from the chaff. And for the paperwork I decide to keep, I need to invest in a better filing system.

I need to find an alternate location to store it, and schedule time each week to slowly sort out the wheat from the chaff.

Next week when I am setting up my desk in its new location, I’ll be asking myself two questions:

What needs to be on my desk in order for me to work effectively?
What needs to be close at hand, but not on my desk?

Whatever isn’t included in the answers to those two questions either needs to be thrown out, or stored elsewhere. In answering those questions, I need to work out whether I need a bookshelf close to my desk, and whether I will be printing often enough to keep my large color laser printer on my desk, nearby, or in another room.

3. Optimize Your Tools

“Sharpen the saw” is one of the basic principles of Covey’s “Seven Habits of Highly Effective People”. This principle was inspired by something Abraham Lincoln said:

“If I had six hours to chop down a tree, I’d spend the first four hours sharpening the ax”.

Before this week I spent my time working in different jobs with different focuses doing different tasks. But now my time is much more focused, and I spend a lot of the day doing similar tasks – some of which involve considerable repetition. That means that if I can find a way of saving a few seconds per task, over a day or a week it may add up to saving me many hours.

This week I have started thinking about some software tools that can make some routine jobs faster and less frustrating:

I now have several Gmail accounts that I need to check regularly. The nature of the accounts makes me reluctant to forward one of them to the other – they should remain separate. I tried a few Firefox extensions that didn’t really work for me, and settled on using two different browsers: Firefox and Flock. I chose Flock because I heavily rely on several Firefox extensions, and Flock is based on Firefox.
I’ve found that there are some tedious HTML code fragments, common phrases, and standard emails that I need to type a few times every day, and started looking for some software to take away the pain. My main workstation runs Linux, so I tried the Flock web clipboard, the snippets plug-in for the Glipper clipboard manager, and copying and pasting from a text file that I kept handy. I settled on using AutoKey, which is similar to TextExpander on the Mac and AutoHotKey on Windows.
I regularly need to upload files to various online storage repositories, including video sites and Amazon’s S3 file storage. I’m sure there is a way to use a single tool to upload to all of these services, but I’m still looking for the right one.

Have you found some software tools that maximize your productivity? Let us know in the comments.

If I can find a way of saving a few seconds per task, over a day or a week it may add up to saving me many hours.

Now that I will be spending more hours at my desk, ergonomic issues have become more crucial. Since writing an article about ergonomics in May, I have been slowly improving my work space. I have purchased a Logitech Wave keyboard which makes typing a breeze, bought an easy-to-read 24″ LCD monitor, and placed my laptop on a stand so that the monitor is at the right height and the keyboard is out of the way. So many web workers suffer from health issues relating to computer equipment and usage that it is well worth doing an ergonomic evaluation of your own workstation.

4. Rethink Your Workflow

Now that my workload has increased, as has the number of deadlines I need to meet, it is time to streamline my workflow. By making changes to how I do each task, and the order I do them in, I should be able to achieve a much better use of my time. As I master each new task, I am carefully thinking about new and better ways to achieve them, the most efficient order in which to do them, and whether there is any duplication that can be eliminated.

Work in a way that maximizes productivity and minimizes effort.

I need to decide whether to do all of my work in one big chunk of time, or split my day up into smaller pieces. I’m hoping to get into a routine where I do similar things at the same time each day in the most effective order. And I still need to find out what time of day I have the most energy for tackling the difficult jobs that need a lot of concentration. I think that is normally first thing in the morning for me, but that may change as my lifestyle changes.

In short, I’m planning to work in a way that maximizes productivity and minimizes effort so that I can get the most out of each day.

5. Plan For Flexibility

Flexibility is definitely one of the things that has drawn me to becoming a web worker from a home office. One of my concerns is that if I allow too much flexibility in the way I spend my time, I may end up working until the early hours of the morning on a regular basis. While enjoying some flexibility, I still need to get work done throughout the day.

Here are some things I am hoping to achieve with my flexible hours:

I will care for my eight-month old son when my wife is on day shifts at the hospital. Since going back to work after the baby, she has done a large proportion of night shifts, and doesn’t get much sleep during the day because of the baby. Now if she is rostered on a day shift, I can look after him during the day, and work while he sleeps and at night.
When my wife is home during the day, I can arrange my schedule so that we can spend more time together on a regular basis.
I want to get back into a pattern of regular exercise, especially walking around the wetlands near where I live.
Working from home should also give me the time and opportunity to set up a small music studio again, something I haven’t had time for since the 80s and 90s.

I can start to plan my time in advance so that I accomplish these new goals and still have time for work.

Now that I have worked out how I want to make the most of my new flexibility, I can start to plan my time in advance so that I accomplish these new goals and still have time for work. Without this planning, I’m afraid that either I’ll take too much time off work during the day and find it difficult to meet deadlines, or I’ll be so focused on work I won’t achieve my new goals. Planning and good time management should help me achieve a healthy balance between the two.

Many of you would have gone through a similar journey in becoming a full-time work-from-home freelancer. Do you have any tips to share with us? Let us know in the comments.

Creative Freelancer Conference Starts on August 26

FreelanceSwitch.com — Wed, 12 Aug 2009 12:20:40 +0000

HOW Magazine and our friends at Marketing Mentor, a creative industry consulting firm, are presenting a business conference for self-employed professionals in the creative field this month. It’s called the Creative Freelancer Conference and will run from August 26 – 28, 2009 at the Omni San Diego Hotel.

This event is aimed at graphic designers, copywriters, illustrators and photographers, as well as interactive, interior and industrial design professionals who are operating on their own. If you’re interested in panels, roundtables and workshops on the following topics, you should definitely consider attending:

marketing and positioning,
growing a freelance business,
taking advantage of social media,
money-saving tax solutions,
crafting proposals and contracts,
maintaining a work/life balance

Online registration is now available at CreativeFreelancerConference.com.

Robert MacKenzie

Charley Parker — Wed, 12 Aug 2009 03:44:31 +0000

Robert MacKenzie is a California born artist currently living in New York City and working for Blue SKy Studios, the film and animation development studio whose credits include the Ice Age movies, Horton Hears a Who and Robots.

On his blog MacKenzie occasionally posts about his work with Blue Sky, but more often chronicles his personal projects, from travel sketches to still life or on-location cityscape subjects, to the illustrations for his new book, which is a retelling of the classic Jack and the Beanstalk story.

He painted the illustrations for the latter in gouache and watercolor. Prior to his recent book illustration projects, MacKenzie had been working professionally for years in Photoshop, and he found the return to traditional media both challenging and rewarding.

There is a detailed walk through of his process for the image above, top.

MacKenzie also illustrated a children’s book titled Fly, Cher Ami, Fly!: The Pigeon Who Saved the Lost Battalion, an at least one other whose title I don’t know.

MacKenzie also contributed to the collaborative comics/illustration volume Out of Picture, with his colleagues at Blue Sky.

Chalk Art | A Showcase by 8 Anamorphic Artists

Misty Belardo — Tue, 11 Aug 2009 20:31:43 +0000

There are a lot of avenues that an artist can let his creativity flow. One such medium is called Street art or pavement / chalk art. The artist uses a specialized sidewalk chalk, they are typically large colored (and sometimes white or cream) sticks of calcium sulfate mostly used for drawing on pavement or cement sidewalk.

The technique here may also be called Anamorphosis. Oblique anamorphosis is closely related to an artistic technique called trompe l’oeil (French for “deceiving the eye”, pronounced “tromp loy”). Both use perspective constructions to create a “trick” image, but the difference lies in the nature of the trick.

For an anamorphosis, the viewer is presented with something that does not make sense when viewed conventionally, and so he or she must seek out the unconventional viewpoint from which the trick is resolved. For trompe l’oeil, the viewer, standing in one particular (and usually conventional) place, is tricked into seeing an invented image as if it were reality.

We have hand picked some cool Street Chalk Art for your inspiration. (photo source)

Chalk Art by Kurt Wenner

The Muses was created by Kurt Wenner an international master artist who interpret Renaissance Classicism with a thorough single voice. His works transcends the typical canvass and frames. He also creates architectural art and of course he is famous for his Street Chalk Art.

Chalk Art – Julien Beever

Julian Beever is an English artist who’s famous for his art on the pavements of England, France, Germany, USA, Australia and Belgium. Beever gives to his drawing an anamorphous look. His images are drawn completely deformed which give a 3D image when viewed at the right angle. See for yourself it’s amazing!

Chalk It Up by Lee Jones

Since graduating in 1982, Lee Jones worked for several years as a free lance artist, production artist, and managed a printing company, before opening her own design studio, LJ Designs, in 1990. Then in 1994 she was introduced to street painting and immediately fell in love with this centuries old art form. She has been street painting throughout Central Florida and in festivals all across the country ever since.

Ice Age – Edgar Müller

Edgar needed 5 days to compile this huge chalk drawing. With five of his assistants, he painted all day long from sunrise to sunset, which resulted with this incredibly realistic and 250 square meter painting. You can also check out his Lava Street Chalk art here. Edgar is from Germany.

Ford – Manford Stader

He began his painting, pavement art during his art studies at the famous Städel Artschool in Frankfurt, at the beginning of the 1980s and in 1985 he already became one of the few master street painters. Master Madonnaro.. a title which is awarded by the largest international street painting competition in Grazie di Curtatone in Italy. Pavement Painting Contest. Pavement drawings, sidewalk chalk art, done by artists coming from all over the world.

Joe Hill / Max Lowry

What is the most difficult aspect of street painting?

J: Getting intense tone on location. Chalk can look really washed out. If you ever see pavement art in real life it’s usually very pastel. Most 3D artists ramp up the contrast and colour on their photos if they use chalk: you can usually tell from the tone of people in the background of the pictures – they are normally really dark. It’s also why some 3D artists insist on people only using the photo they take for publicity etc… Although it’s sometimes not possible, I really like trying to achieve intense tone, so that passersby can enjoy the spectacle. Also, it doesn’t feel like you’re cheating!

M: Trying to get Joe to smile.

Ulla Taylor

Ulla Taylor has performed at festivals and events as a pavement artist since 1987, and tours festivals extensively as a solo artist. Her work ranges from community art at festivals creating original images of celebration… to fine handcrafted promotions and enhancements for government departments, businesses and corporations.

Tracy Lee Stum

Tracy Lee Stum is a fine artist committed to creating spectacular modern masterpieces that transform, captivate and inspire. Best known for her 3D street paintings, also called anamorphic or pavement chalk art, she specializes in extraordinary visual solutions for applications in communications media, identity branding, product design and performance art based projects worldwide; her signature style defines work which adds unparalleled beauty, originality and imaginative design to any project or event.

Get Going with Adobe Bridge CS4

Kajik — Tue, 11 Aug 2009 13:46:35 +0000

In this tutorial, we’ll take a look at one of the most underestimated and unused tool in the Adobe product family called Bridge CS4. It is available in most of Adobe’s professional Creative Suite applications and I’m sure some of you use it, but a lot of people just ignore it, not realizing its potential to speed up your workflow and help organize your files. What’s Adobe Bridge? Why should I use it? How does it work? Where to start? That’s what you’ll learn in this tutorial.

Introduction

Adobe Bridge CS4 is a very powerful media manager letting you browse, organize, locate, relocate or view different images or files from different Creative Suite products like Photoshop, Illustrator and any other application. Besides wonderful preview options, you can additionally alter images or files directly inside of Bridge or switch between your Creative Suite applications using Bridge as a “bridge.”

At first, I wasn’t sure why I should use Bridge and how it should speed up my workflow, but after experimenting with it, I realized what Bridge is capable of. Is there a difference to the Finder or the Explorer? Yes! There’s a huge difference and this tutorial covers all the features and will help make you an efficient Bridge user in future!

First Glance

When starting Bridge for the first time, Bridge asks you, if you want it to start at login so it is instantly available when needed. You can skip this option and come back to the preferences to change it later if you want.

If this isn’t the first time you’ve started Bridge, but nevertheless want to check your settings, go to Edit > Preferences > Advanced to turn on or turn off the Start Bridge at Login option. I recommend starting Bridge at login, since it doesn’t require that much speed and works fine in the background. You can then open it much faster and use it instantly.

Preferences

Similar to other Adobe Products, there is a wide range of options you can enable or disable in the Preferences panel inside of Bridge. I would like to shortly mention some of the settings which I changed. Go to Edit > Preferences or use the keyboard shortcut Command + K.

General

The first place to start is the General section including the Appearance, Behavior and Favorite Items settings. Most of the Adobe products let you alter your interface colors. In Bridge, we can change the User Interface Brightness and the Image Backdrop, sliding from white to black or vice versa. I prefer working with a darker interface, since it emphasizes the actual images and relaxes the eyes, but that’s up to you. You can additionally choose between different accent styles which you can see below.

Cache

The next step is the Cache section where you can increase the display performance by changing your Cache size and how Bridge handles your Cache. Keep in mind, the higher the values, the more hard disk space and performance you’ll need to display your thumbnails and image previews. Again, experiment with the settings to find what fits your system best. You should definitely compact and purge your Cache once in a while for better performance.

Advanced

Another important section which you already know is the Advanced section, where you can change the preview settings like rendering or size. I enabled Bridge to start at login and activated Software Rendering and Monitor-size Previews.

Well that’s it for now, we may or may not come back to change some options in the Preferences panel throughout this tutorial, but the best thing to do is spend some time with the preferences to make sure you utilize the full potential of your application.

User Interface, Options and Workspaces

Now, we are ready to jump into Bridge to get to know the interface, different options, task based options and much more. We’ll skip the standard application menus for now and start with the options in the upper area inside of Bridge.

Go Back and Go Forward

Bridge works just like the Finder on your Mac or the Windows Explorer on your PC. These two buttons will go back or go forward one step in your file structure. You can see your file structure in the Folder panel which we’ll talk about shortly.

Go to the Parents or Favorites

This little triangle, which points down, opens up a drop-down menu where you can instantly jump to the parent folder, where the currently displayed images, files or folders are located in or jump to your favorites from the Favorites panel.

Reveal Recent File or Go to Recent Folder

This little icon opens up a drop-down menu where you can select recently viewed files from all your applications or recently viewed folders from your system.

You can either clear both lists by simply choosing the appropriate option in the drop-down list or change the number of the recently viewed files or folders in the list by going to Preferences > General > Number of recent items to display. There’s a little difference between displaying the recently viewed files and opening the recently viewed files. I’ll show you the icon which opens up the files and folders shortly.

Get Photos from Camera

If this is the first time you are using the Photo Downloader, Bridge will ask you, if you want to download your images as soon as Bridge detects a connected device like a camera or a scanner. I recommend choosing yes. Again, you can change this at a later time. This feature is very useful and speeds up the work for Photographers or Designers who work a lot with cameras, scanners and other similar devices.

By clicking on the icon, the Bridge Photo Downloader will open, providing a few settings which you can change prior to downloading your images to your system. For example, you can choose your different devices, set the location where you want the images or files to be saved, rename them while importing them or converting them to other formats.

What I like about the Photo Downloader is the nice preview of the images, which can be enabled by clicking on the Advanced Dialog. By doing that, you’ll be able to additionally assign metadata from templates or by entering metadata manually.

Refine Options

This drop-down menu reveals the task based options in Bridge, which we’ll talk about shortly and skip for now. The options are: Review Mode, Batch rename and File info.

Open in Camera RAW

This little icon will open up your images in Camera RAW where you can edit the image directly inside Bridge. By clicking on Done, Camera RAW will return the altered image to Bridge. The nice thing about the new Camera RAW option is that you don’t have to change any settings in the preferences prior to opening your files. Whether it is a .dng, .tiff or .jpeg file type, you’ll be able to open them up simply by clicking on this icon or using the proper keyboard shortcut.

Output to Web or PDF

I really like this built-in Output module, where you can simply create PDF files or nice Flash galleries similar to the ones from Lightroom. You can choose from different formats, colors, layouts and much more. We’ll talk about the Output section later in this tutorial where you’ll learn how to export your favorite images, collections or selected files to PDF or the Web.

Workspaces

Similar to other applications from Adobe, Bridge CS4 is made up of multiple panels and toolbars each composing a specific Workspace. Workspaces vary depending on the tasks they were built for. Staying at the top, but moving to the right, you’ll soon discover the Workspace section where you can choose from different workspaces, each prepared for a specific task.

Depending on your screen size, there could be space to display all of them, by simply dragging the double-dotted line to the left, but if your space is limited, you can either click on the little triangle on the right to choose another workspace from the drop-down menu or right-click on the name of a workspace to replace it with another one. Depending on your task in Bridge, you’ll often change the workspace for better control.

In case you don’t like the default workspaces and want to arrange the workspace to your needs, you can do that by dragging and sliding the edges of the panels to create more space. After you’re done, simply save your own workspace by clicking on the little triangle choosing New Workspace, giving it a name and saving it. It will then appear in the workspace list.

Search

To the right of the Workspace list, you can find the Search bar. The search functionality is improved and offers a variety of options besides working much faster and more efficient. You can now search your current folders and subfolders in Bridge or use Spotlight or Windows to help find your files on your system. Applying Keywords, Ratings and other Metadata will help you find and filter your files much faster. We’ll talk about that shortly.

Another very nice feature is the functionality to add other search criteria besides the name or keyword. By clicking on the New Search button, the Find window will pop up. You can now add other search criteria, change the folder and matching of the results.

Compact Mode

I really like this feature and it speeds up my work. By clicking on this icon, Bridge will change its size to compact mode which is big enough for good view, but small enough to reveal most of your screen and other applications running in the background.

You can then simply drag and drop any image from Bridge to the appropriate application you like. Although you can open up files by double-clicking, right-clicking or opening them through the Tool menu at the top of bridge, I prefer dragging and dropping the images or files since it is more comfortable and faster to me.

Breadcrumb List

As you can see, Bridge provides a nice breadcrumb list, where you can simply switch back one or more folders just by clicking on the name. By clicking on the triangles pointing to the next folder, you’ll be able to view subfolders in the same folder or files from the subfolders. This listing speeds up the navigation and gives you a nice file hierarchy to look at.

Browse Quality

When working with a lot of images, you wouldn’t necessarily want high quality images for thumbnail preview, since it would slow down your system. What you can do in Bridge, is choose to browse quickly by preferring embedded images, which you can activate by clicking on the first icon beneath the workspace list.

In case you want to preview your images in high quality for a more accurate preview, you can simply click on the little triangle next to the second icon which is the icon for the thumbnail and preview generation options. You’ll now be able to change your preview quality from fast preview to high quality preview.

Filter by Rating

This little icon, displaying a star, helps you filter your images by their rating. This isn’t the only way you can filter your files. You can additionally use the Filter panel which provides a lot more options you can use to filter your files and folders. We’ll take a look at the Filter panel shortly.

Sort

Right next to the Filter by Rating option you’ll find a drop-down menu where you can sort your files by different criteria like filename, type, date and more. The bigger triangular arrow represents the sort order. You can choose between ascending and descending order.

Rotate

You can rotate your images directly inside of Bridge without using Photoshop or any other application. Just click on the direction you want your image to rotate and Bridge will cover the rest. You can choose between clockwise and counterclockwise rotation.

Open Recent Files

This is the other option, referring to recent files, I mentioned earlier. This icon will open up your recently viewed files and folders in the proper application, while the reveal option displayed the recently viewed files and folders inside of Bridge. You can clear this list too.

Create and Delete Files or Folders

These two icons should be familiar to you and their function is very simple. The left one creates a new folder where you can store your images or any other files, while the right one deletes all selected files and folders.

Panels

At this point we covered all the features at the top of the Bridge interface and now it’s time to take a look at the different panels and how they work. As you already know, you can arrange your panels the way you want by dragging the different panel edges. By double-clicking on the Panel name, the Panel will collapse to open up more room for other panels and previews.

Favorites

The Favorites Panel is visible by default, but you can close it or at least that’s what I did, because you can simply use the Go To Parent Or Favorites drop-down menu at the upper-left corner right next to the Go Back and Go Forward icons to select a Favorite. The cool thing in Bridge is, you can simply add a folder to your favorites by dragging and dropping to access it much faster at a later time without having to search for it in your file structure.

Folders

The Folders Panel is a nice extension to the breadcrumb list and helps you see where you are at and what other folders you can access from there. I’m using both, because sometimes it’s faster to work with the Folders panel.

Content and Preview

These two panels are the most important panels you’ll use inside of Bridge. The Content panel displays all the images, files and folders inside of the current directory. By selecting one of the images, Bridge will instantly display a more accurate preview on the right side of your screen where the preview panel is located by default.

There are multiple ways of working inside the Preview Panel like using the loupe or zooming in or out using the proper Keyboard shortcuts. Additionally you can review the rating, any assigned labels and the file name. When selecting multiple images, you’ll be able to view multiple images in the preview panel and using multiple loupes for each of them.

Filter

Bridge offers you a wide range of options to filter your images and files by enabling different options. For example, choosing only images based on their orientation, aspect ratio, specific rating, exposure time, ISO setting and much more. If your space is limited, take a look at the fly-out menu to see what else you can choose from.

Collections

The collection Panel is a very nice feature and similar to setting your favorites. By selecting multiple images you can create a collection which will later contain the images. There are two types of collections. On the one side there’s the User defined collection which is marked red and the smart collections on the other side marked blue. The difference between them is the way they work after you alter or delete your images.

Both collections are created on a virtual basis which means no files are getting copied, deleted or moved physically from your hard disk drive. While User defined collections are based on the selection of the user, smart collections are based on search criteria. You can always review the current number of files in the folder or collection at the bottom left corner.

For example, if you only want to create a collection containing the images with a rating of two stars or more, you’ll approach this similar to searching your files. By clicking on the Create Smart Collection icon and entering your criteria, Bridge will create the smart collection, ask you for the name and save it in the collection panel. That’s it!

Now the cool thing about this is what happens now. When we go back to our Los Angeles folder and change the rating of one of the images which is not rated yet, Bridge will automatically add it to the smart collection, in case the criteria is met. This is the reason why it is a called smart collection.

Additionally you can change the folder where Bridge is searching for the images or tell Bridge to consider subfolders too. Just click on the Edit Smart Collection icon on the top right corner of the Content Panel to change or add other criteria. Rerun the search to update your collection.

To create a User based collection, simply create a collection and drag and drop your images to it or select the images first and then click on the Create a User defined collection icon.

Stacking and Batch Processing

This is another very important feature in Bridge which saves a lot of time and hard work. It’s the possibility to stack images which are similar to each other. To do that, simply select a few images which you want to stack, go to the Stacks menu and click on Group as Stack. You can also use the keyboard shortcut.

But the nice thing is that Bridge can take over. It automatically detects and later stacks Panorama and HDR images. Go to Stacks and select Auto-Stack Panorama/HDR. Bridge will then search, stack and return perfect image stacks based on these image types.

After that, you can select an image stack, go to the Tools menu and open it in Photoshop to batch process it, merge it or let Photoshop create a nice Panorama by processing it. Photoshop will automatically start, do the work and return the final image or images. You can also send the files to other Creative Suite applications like Illustrator.

Metadata

So far, we’ve learned how to filter our images using the Filter Panel and filter options from the tools at the top, but there’s another way of filtering images and files: it’s using Metadata. There are two types of Metadata: descriptive Metadata and additive Metadata.

Descriptive Metadata is the one which you can see in the Metadata panel beneath the Preview panel on the right side. It contains information which describes the image, like the type of camera used, date created, size, color mode, ISO setting, exposure time and much more. Additionally you can insert extra information directly by clicking on the Info name, instead of using the File Info option which is the way to add additive Metadata.

The additive Metadata can be found, changed or added through the Refine icon by selecting the image, then clicking on the Refine icon and choosing File Info. The File Info Window will open up revealing a lot of input boxes where you can type in all kind of information you want the image to carry around with it.

You can use the arrows at the top and the drop-down menu to reveal further panels. From this window, you can additionally create different metadata templates; export them to other applications or just save them to use them again at a later time or while downloading your images using the Photo Downloader.

Another very nice feature which surprised me, is the Metadata workspace which you can choose from the workspace list at the top. Inside of the Metadata workspace, you can concentrate on working with Metadata and gather a lot of information about your images or files.

The cool thing is, you can slide to the left and right, but the image itself will stay at its position. Thanks to this, you don’t have to move back and forth to make sure you are reading the right information.

Keywords

Assigning Keywords to your images will help you find them faster. There are several default Keywords which you can choose from, but you can create your own Keywords by clicking on the fly-out menu and choosing New Keyword.

There are two types of Keywords in Bridge: Keywords and Sub-Keywords. I personally assign Keywords rarely, since I’m not using the search form that much, but it is easy to use. After creating your Keywords or Sub-Keywords, you must select them from the list.

Preview Options

Now with the Interface, Tools, Panels and Workspaces covered, let’s take a look at the task based options and the preview possibilities.

Basic Full Screen Preview

The easiest way of previewing your images at a larger size is by selecting one or multiple images and hitting the spacebar. Selecting one or multiple images and clicking the Spacebar opens up a Full Screen Preview of the images. By using the left and right arrow keys, you will be able to navigate to each image’s full screen preview. Additional features like zooming in or out or moving around the current image at any time help you pre-select your images before moving into Photoshop.

Review Mode – Carousel View

The nice Carousel-style preview is accessible by selecting multiple images and hitting Command + B or going to the Refine icon and choosing the Review Mode. Again, use the left and right arrow keys to move the focus to the next or previous image. The best part is the ability to remove an image with a simple tap on the down arrow key. Note, the image won’t be deleted, it’s just removed from the slideshow.

This type of preview allows you to use the loupe and the zoom options. By hitting Command + R you’ll be able to instantly access the Camera RAW, whether it’s a TIFF, JPEG or any other format. Camera RAW will then return the altered image back to the preview. Other than the basic full screen preview, this review mode requires a bit more power from your computer and GPU.

If you are more comfortable using the mouse or tablet just tab on the little icons at the bottom of the preview to achieve the same effects.

Staying inside of this Preview, I would like to introduce another tip which will save you a lot of time while pre-selecting. It’s the possibility to rate and label your images using your keyboard. Depending on your settings, you only need to hit the keys from 0 through 5 for rating your images and 6 through 9 for the labeling.

If that doesn’t work, add the Command key while rating or labeling. Go to Preferences, choose Labels and you’ll see which label color indicates which meaning and where to enable or disable the additional Command key.

By clicking on an image in the background, Bridge will automatically bring it to the front which is very nice and saves the carousel spinning and time. A second click on the image will bring up the Loupe Tool.

Slideshow

Last but not least, I would like to show you the Slideshow inside of Bridge. The Slideshow is similar to the full screen preview, except the images switch automatically. If the standard settings are to slow or not what you are looking for, just tab the H key or go to View and select the Slideshow Options for more control. Hit Escape to quit the Slideshow.

Thumbnails

Before coming to our last point, let’s look at the Bridge Output options. I would like to mention some of the best enhancements in Bridge CS4. Looking at the bottom right inside of Bridge, you’ll see additional options which are responsible for thumbnail preview and how the Content panel displays the files and folders.

First, there’s the good old Slider which allows a smooth and fast magnification of our thumbnails. You can either click on the small and big icons on each side or move the Slider dragging the triangle.

By increasing the thumbnails, you not only have a better preview of your images, but unfortunately some of the images get cut off at the bottom. There was no solution for that in previous versions, but now the only thing you need to do, is click on the Click to lock thumbnail grid icon next to the Thumbnail Slider. Isn’t that cool?

At last, take a look at the View Content area which is also located at the bottom-right corner. These three options let you choose how the Content panel should display your files and folders. You can choose from thumbnail view, detailed view and list view.

Each one displays your files in a different way. While the detailed and list view add additional information and metadata, the thumbnail preview is the simplest and fastest. At this point, I want to remind you of the nice feature which locks the file in place and allows better scrolling through the additional list information.

Output Module

This is one of the best features and makes the end of this tutorial perfect. In this section, you’ll learn how to create your own PDF files or Web Flash galleries for your clients or co-workers. Select your images and click on the Output icon.

PDF

To create a PDF file from your image selection, simply choose PDF from the Output panel and start applying your specific changes to the document format, layout or any other available option which you can see below. Preview your PDF in the Preview panel and Save it, that’s it!

But there’s something I don’t like about this Output panel, it is the fact that it doesn’t refresh automatically as you might have noticed. Remember to click on the Refresh Preview button each time you change your settings.

Flash Gallery

To create a Web gallery, the only thing you need to do is choose Web Gallery from the Output panel. After that, you only need to apply your specific settings and give it a design you like. Bridge will then create the Flash gallery and even code a nice HTML Browser ready file for you.

But one of the coolest features is the possibility to upload your final product directly to your server by giving Bridge your FTP connection information. Most of these Settings are self explanatory, so the best thing to do is going through them thoroughly by yourself.

Conclusion

Well that’s it for now and I hope this tutorial was useful for you and informative. Feel free to leave a comment. I’ll try to answer your questions, should there be any. Thanks.

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

Linkswitch #5

FreelanceSwitch.com — Tue, 11 Aug 2009 12:30:49 +0000

30 Fresh and Inspirational Portfolios With a Twist: Running out of inspiration for your own freelance business portfolio site? Here are some unusual—yet interesting and appealing—portfolio designs others have come up with.

The 10 Rock Solid Elements of Effective Online Marketing: This is an in-depth report by Brian Clark of Copyblogger. It’s free and discusses online marketing that works.

15 Useful Twitter Tools For Web Workers: This Freelance Folder articles provides a compilation of Twitter tools that have capabilities useful for web workers in particular. Since Twitter is the only source of social interaction for some freelancers (I kid, but only barely!) having a dedicated app installed could be useful.

7 Great VoIP Alternatives To Skype: Skype is the world’s most popular VoIP application, and it deserves that position with excellent free and paid services for both personal and business users. If, for some reason, you’re not a Skype fan, here are seven alternatives you might like to try.

Top 60 Blogs For Freelance Writers: ProFreelancing has compiled a list of links to what they believe are the top 60 blogs for freelance writers. FreelanceSwitch makes an appearance.

The Complete Guide To Going Paperless: Ever wanted to do away with the piles of paper around your office and even the rest of your home? Lifehacker provides a variety of tips for doing exactly that.

How a Blog Can Grow Your Business – Slides + PDF: Problogger book co-author Chris Garrett provides a free slide and PDF package for those after information on how running a blog can be helpful to your business.

The 10 Most Common Mistakes Web Designers Make: Venturing into the web design industry? Make sure you check out this article to help ensure your style earns a great reputation from the outset.

52 Creative Ideas For Finding New Clients: Need more clients because you’re starting out or your old regulars are running out of money? Here are 52 ideas for restocking on clientele.

Employee or Entrepreneur? The Pros and Cons Of Self-Employment: Get Rich Slowly blogger J.D. Roth examines the pros and cons of self-employment versus traditional cubicle farming.

Create an Automatic Flow of Work With ‘Hire Me’ Page: Every freelancer needs a Hire Me page—don’t place obstacles to getting more work by failing to include a call to action on your site.

How To Stop Worrying About Every Little Project: Former FreelanceSwitch editor Glen Stansberry discusses a topic that will be relevant to just about every freelancer: how to quit worrying about all the minutiae of your freelance projects and get on with the real work.

Psdtuts+ ‘Delta Dawn’ Video Game Cover Design Contest Winners!

Sean Hodge — Tue, 11 Aug 2009 12:24:18 +0000

We have the results in for the Psdtuts+ Delta Dawn Video Game Cover Design Contest. I hope everyone had a lot of fun! We had a tremendous competition with loads of high-quality entries. We had a whole lot of artists enter the contest, and well over 250 submissions.

Up for grabs is a Wacom Intuos4 Medium Tablet, iPhone 3G S, Nintendo DS Lite (thanks to CSSRockstars), loads of marketplaces credits, and 1-year memberships to Psd Plus. Learn all about the winning entries at the jump!

About the Contest Judging

We looked at overall artistic quality, technical execution, originality, thematic execution, and video game cover style in judging these entries! Thanks to everyone who entered. Now let’s give it up to the winners. A round of applause please!

First Place Winner

The first place winner is Quintin Schnehage. The author has gone above and beyond the contest brief by providing a realistic-looking back cover with a blurb and game style screenshots, and a CD cover design. It’s a package I can genuinely imagine picking up in a game store. Overall the author has created something that looks like a game cover (paying mind to texture, shadows, and layout! Fantastic job on this design!

Congratulations, and your prizes are:

Wacom Intuos4 Medium Tablet or USD $370 (cash only if outside shipping area)
1 year Plus membership (valued at USD $117)
$100 to spend on GraphicRiver, AudioJungle, Flashden, VideoHive or ThemeForest

Link to Image in PSDTUTS Flickr group

Second Place Winner

The third place winner is CorPaige. We’ve chosen this one for second place because it really looks like a video game cover. It’s a very powerful image and has a clear central point of focus. The originality and theme execution is strong.

Congratulations, and your prizes are:

iPhone 3G S 16GB or USD $200 (cash only if outside shipping area)
1 year Plus membership (valued at $117)
$75 to spend on GraphicRiver, AudioJungle, Flashden, VideoHive or ThemeForest

Link to Image in PSDTUTS Flickr group

Third Place Winner

The third place winner is stebrfc. This is an original design. The main character has a strong cybernetic energy that radiates a glow against the muted composition. Highly stylized and unique cover design.

Congratulations, and your prizes are:

Nintendo DS Lite or USD $130 (cash only if outside shipping area)
1 year Plus membership (valued at $117)
$50 to spend on GraphicRiver, AudioJungle, Flashden, VideoHive or ThemeForest

Link to Image in PSDTUTS Flickr group

Psdtuts+ ‘Delta Dawn’ Video Game Cover Design Contest Concluded

Congratulations to our winners! Great job to everyone that participated in the contest. I’ll be contacting the winners shortly to assist them with collecting their prizes. The winners should keep an eye on the Flickr email boxes for the next couple of days.

Some More Great Entries

There were quite a few entries that came very close to winning and we’d like to give them an honorable mention here. Also, there are certainly more good entries submitted into the contest that are in the PSDTUTS Flickr Group. Here are just a handful more that really captured our attention. Also, feel free to submit a tutorial concept for your contest entry designs. Many of the designs I saw would make great Photoshop tutorials.

Link to Image in PSDTUTS Flickr group

Feed Hungry

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.