Photoshop Illustration

click image to view larger

How It's Done!
Using Adobe Photoshop as an illustration tool has become a more frequently recognized art form. The following is a six part tutorial covering the wide range of techniques used in the process of creating the displayed piece, Neuromancer, through graphic design and illustration with Adobe Photoshop.

This series includes:

Original Photos:
The use of stock photography in the make up of the overall design and proper file size in scaling and manipulation.

Naming Layers and Folders:
The practice of organizing and naming complicated files and folders for ease of use and time efficiency.

Clipping Paths:
How to properly remove images from photos and seamless integration into background imagery.

Blending Modes:
Applying Blending Modes from the Layers Menu Palate to multiple layers to achieve artistic results.

Layer Masks:
How to hide specific elements within a photo or folder of images.


Note: In most cases key commands are applied while clicking with the mouse. It is assumed that viewers will have some basic computer knowledge. This is not an advanced tutorial nor a basic one, but somewhere in the middle ground of the learning curve...

A "New" New Design...

Redesigning the overall look and feel of the site

I got up the other day and spent eight solid hours straight redesigning and coding the site again. One of my main concerns was that the home page was ultimately useless. I would see a fair drop off in Google Analytics, so I eliminated the portfolio page and placed it on the home page. I figure instant access to content makes more sense.

As a result I went through and made some tweaks to the other pages and the blog. I think it flows better, looks better, and addresses the problem with the use of stock vs my own work (plus the image I used was from an old client job I did way back when mixed with a mind map I made a couple of years back).

Final Website Changes and Review

After posting the site live I went to Facebook to promote my page. I was declined posting due to using a non approved Facebook logo. After some research I found the required logo for the background I had already designed. Since I could only use a white facebook logo it changed the feel of the site and as a result I ended up eliminating all the blue text. It's not exactly what I was after but it's not bad and does create a more balanced feel overall. I was also able to display my logo on the browser window tabs by adding this bit of script before the end of the header info tag:

The site has been tested on 4G and 3G phones, 12MB and 40MB internet speeds. I also tested the site on Firefox, Safari, and Chrome. I tend to overlook Internet Explorer now as many sites have issues with IE and the browser soon be discontinued and will be replaced by Microsoft's Spartan. Testing for that browser will be interesting...

Seven Pages Down!

I went with a minor change in the color scheme. While I am not a fan of white type on a black background I do favor the use of gray colors on a black background. It seems less striking on the page and easier on the eye. Ultimately, overall I will need to adjust the layout so the site always appears centered in the browser window. I went with a fairly large layout that will need to be adjusted with media queries to fit on iPad screen size on down to smaller tablets and then a completely different layout for cell phones.

For this page the layout remains the same with slight text color changes. I did start this animation with a full set of images to start. The cycling text will need to be adjusted in timing to give the reader a better chance to finish before the next one starts.

For this page the layout changed in the first third replacing the animated bar of images to three images that appear, one after the other, and stop the animation. I was also able to create the animated "open gallery" button.

This page follows the new layout scheme for the upper third of the page. So far all images in the galleries have been tested and are in working order on all pages done to this point.

Again, this page follows the new layout for the Featured Clients pages.

This page was a new design incorporating one of my personal pieces. This one was the best for the eye contrast to the type. In researching for a better way to save space on the page I incorporated the use of Spry Collapsable Panels. I was able to adjust for a default open on the first item with the rest closed. I am still searching for the code that will close the previous panel when a new one is opened. I chose this new color for the body copy and plan to incorporate the color on text in all pages with a more subtle approach.

This page follows the layout of the previous page. The light blue color will be added to the existing copy (most likely just the address and phone numbers). Additionally, I will make the animated image bar at the top start with a full set and make this change to the previous page as well. Another slight adjustment will be the alignment of the text and images on the right site throughout all pages.

All pages can be viewed at www.designsource-bfg.com/redesign