My Blog for your Knowledge

We'll make sure your website works for you...

The Road to Web designing

Art Illustrations

Do you want to look great?

5 March 2009

Creating Architectural Animations with Photoshop CS4 Extended

Photoshop can be used for much more than pixel pushing these days. Photoshop CS4 Extended not only handles 3D models, but it has a sophisticated timeline animation mode that lets you keyframe changes over time. In this tutorial, we will open a 3D residential model in Photoshop and create a 30 second flyaround animation that displays a moving cross-sectional plane see final animation here

Working with 3D Objects in Photoshop

The first thing to understand is that Photoshop is not a 3D modeling program—models have to be built and texture mapped elsewhere. For this tutorial, we're using "The Rose Hill," an Arts and Crafts-style residence (modeled by J-Wall), found in Google's 3D Warehouse. Photoshop can open five 3D formats: 3DS, DAE, KMZ, U3D, and OBJ. It's very likely that your 3D modeling, CAD, or BIM program can export to at least one of these formats so you can work with 3D models in Photoshop.

To follow along with this tutorial, download the sample file here. Choose File > Open and select TheRoseHill.kmz. 3D models are vector based so changing image size doesn't affect quality (like it would in a raster image). Choose Image > Image Size, uncheck Constrain Proportions, and check Resample Image. Set Width to 1024 and Height to 800 and click OK. Unfortunately, the coordinate system of this KMZ file and Photoshop are different so you'll have to rotate the model by 90 degrees.

Press K to select the 3D object tools and verify that the first tool (Rotate the 3D Object) is selected on the options bar. Pressing Shift+K repeatedly cycles through the 3D object tools. Type -90 in the X orientation box and press Return (PC: Enter). The model is now rotated properly.

To animate 3D models, I recommend changing the interface so that the 3D, Layers, and Animation panels are the only panels visible. Open the 3D and Animation panels from the Window menu (Layers is probably already open) and close all other panels. Arrange the panels so that 3D is docked on the upper right and Layers on the lower right. Dock the Animation panel along the lower edge and make sure you're in Timeline mode (you should see a long timeline rather than one frame). Clicking the lower right button in the Animation panel toggles between frame-based and timeline modes.

Tip: Save your panel arrangement as a workspace (I called mine Animation) by opening the upper rightmost button in the Photoshop UI and choosing Save Workspace.

In the Layers panel, rename Layer1 to The Rose Hill and close the disclosure triangle on the right edge of this layer to collapse the material and texture list. By default, the 3D model displays against a transparent background. Create a Gradient Fill layer by clicking the middle button on the lower edge of the Layer panel (circled in red below).

Choose the black to white gradient in the gradient picker that appears. While the gradient picker is still open, drag the cursor downwards in the document window to slide the gradient so that it blends from more white to a medium gray rather than all the way to black. Click OK to close the gradient picker. Finally, drag the Gradient Fill 1 layer to the bottom of the layer stack so that it acts like a background.

Animating a Moving Cross-section

With Scene selected at the top of the the 3D panel (it should be by default), check Cross Section. Click the Y-Axis radio button to create a plan section. Uncheck Plane and check Intersection. Click the swatch next to Intersection and choose bright red from the color picker to highlight this sectional plane. The button to the right of this swatch allows you to flip the cross section if necessary. Make sure you are looking at the bottom of the building as shown below.

Click the Offset drop-down and drag the slider to offset the cross section up and down. The Tilt A and B controls rotate the cross sectional plane, but we won't need them here.

Keyframing Object Changes on the Timeline

Animation keys store data at specific moments in time and Photoshop automatically interpolates all the frames in between keys. So all we have to do is create initial and final keyframes and let Photoshop do the rest.

We'll make the building grow out of its plan into a full 3D model by keyframing the start and end positions of the cross section plane. Let's begin animating by setting up the initial conditions of the cross section. Drag Offset to -35 so that the cross sectional plane is just under the building (so you can't see the residence at all).

Expand The Rose Hill layer in the Animation panel. Scroll down (or enlarge the Animation panel) until you locate the 3D Cross Section track. Click this track's time-vary stopwatch button to create an initial keyframe at frame 0 (which is the frame selected by default). A small yellow diamond appears on the timeline, representing this keyframe.

Drag the current time indicator (vertical bar in Animation panel) all the way to the right edge of the timeline, which is located at 9 sec and 29 frames in the default 10 sec video. Change the sign for the cross sectional Offset to +35 and press Return (PC: Enter). Now you can see the entire residence as the cross section is positioned just above the building. A keyframe is automatically generated on the timeline.

Click the Play button (or press the Spacebar) to see how Photoshop interpolates the cross-sectional plane motion across every frame. The building appears to grow upward in time.

To make this a more interesting video, let's rotate the building while the cross-section animation is happening. This will make it seem like the viewer is flying around the building. Drag the current time indicator (CTI) to the left edge of the timeline at frame 0. Click the time-vary stopwatch in the 3D Object Position track to keyframe the building's initial position.

Drag the CTI to 3:00 (3 seconds and 0 frames) and press K to select the Rotate the 3D Object tool. Type 90 in the Z orientation box and press Return (PC: Enter). A new keyframe appears on the timeline in the 3D Object Position track.

Drag the CTI to 6:00, type 180 in the Z orientation box, and press Return (PC: Enter). Keyframing is easy once you understand how it works.

Drag the CTI to 9:00 and type 270 in the Z orientation box and press Return (PC: Enter). You now have four keyframes in the 3D Object Position track.

Play the video (press Spacebar) to see how it looks. The building spins around as the cross section plane moves upwards. Playback will be smoother after you render all the frames out to a file. You can get a better idea by scrubbing the CTI back and forth along the timeline to preview motion more quickly.

Adjusting Existing Keyframes and Positioning the 3D Camera

You might be tempted to make adjustments to how the building is rotating on the fly, but doing this at a random time will just generate a new keyframe. It's better to go directly to an existing keyframe and then make adjustments. Let's say that we want to look down more on the building by the end of the video.

Click the left and right facing arrows to the left of the 3D Object Position track's time-vary stopwatch. These controls step you through existing keyframes, moving the CTI automatically. It's far safer to jump to an existing keyframe this way rather than by dragging the CTI, because if you're off by even one frame, a new keyframe would be generated when you'd make changes to the 3D object's position.

Step to 9:00 by using the left or right facing arrows in the 3D Object Position track. Drag the green Rotate control on the 3D Axis (bordered in red below) downward to see more of the roof. Play the animation and you'll see the entire interpolated motion has changed to end up at this position and time.

At this point the animation looks good but the building is a bit small in the document window. Press N to select the 3D Camera tools. Select Walk with the 3D Camera tool on the options bar (hold the mouse still to read tooltips). Drag upwards in the document window to walk the camera forward and consequently make the building bigger. Use Pan the 3D Camera tool to center the building in the document window. Be careful though, because the building moves in time and its center is a moving target. Scrub the CTI to see how the building's silhouette changes shape over the course of the animation. Make small adjustments to camera position until you're satisfied.

Changing Animation Length and Sliding Keys to New Frames

The default 10 second animation is too short for the amount of motion we've animated. Click the Animation panel menu (circled below) and choose Document Settings from the menu that appears. Set Duration to 0:00:30:00 (30 sec), change the Frame Rate to 15 fps (frames per second), and click OK. Reducing the frame rate compensates somewhat for the increased duration so that we can try and keep the rendered video file size down.

Although the timeline is now longer, the frames are still at their same times as before. You must drag each keyframe to a new time to slow down the motion. Drag four keyframes to the approximate positions below (don't worry about being exact).

Play the animation again and it will have a more dignified pace suitable to visualizing architecture.

Rendering to Video

The last step is to render the frames stored in memory to a video format on your hard drive. Not only will playback be smoother, but you'll be able to post it to a web server or burn it on a DVD and share it with others who might not have Photoshop CS4 Extended. Choose File > Export > Render Video.

There is a bewildering array of formats/codecs available for export, but for this tutorial I used Flash Video because I wanted to embed it on this page as you see below. I suggest using Quicktime MOV if you want to burn the video to DVD.

Tip: Reduce the pixel size to 512 x 400 to make the video suitable for the web.

Flash Video Animation

Here is the final result, weighing in at only 780 KB. Photoshop CS4 Extended makes it easy to create quick 3D animations that aid in visualizing architecture.

Click here button above to watch this flash video.

4 March 2009

20 Photoshop Secrets Revealed…

Every graphic designer works with secrets shortcuts or tricks that should never be told, like a magician

But…as always, i have no secrets with you so here you have 20 tricks save-time.
Have fun and if you want…share in the comments other tips!

1) If you hold down ALT+CTRL+SHIFT (Mac: CMD+OPT+SHIFT) while starting Photoshop you can reset all the Photoshop settings back to factory default. Very usefull if you have problems with some tools or the interface.

2) One of my favorites. ALT+Click on the “eye” icon in the layer’s palette to hide all other layers.

3) Do you have trouble to find the cursor when you work with large canvases?
Simply press the spacebar and you’ll see the hand icon where the cursor is located.

4) When you are applying a “drop shadow” layer effect, try to leave open the dialog box.
You’ll be able to move the shadow with a simple drag and drop.

5) With a CTRL+Click on the triangle icon you can collapse or expand all layer groups

6) Another cool shortcut. Press CTRL+ALT+SHIFT+E
(Mac: CMD+OPT+SHIFT+E) to paste all the visible layers in a new one.

7) When you are in a dialog box, try to hold ALT(Mac: OPT) to transform the “cancel” button into a “reset” button. It doesnt work everywhere.

8) If you want to transform a path into a selection you have to press CTRL+ENTER (Mac: CMD-ENTER).

9) CTRL+ALT+Z (Mac: CTRL+OPT+ Z) to undo more than once.

10) Double Click on the stage (the gray area) to open a file or CTRL+Double Click to create a new file.

11) If you hold SHIFT while you click “File -> close”, Photoshop will close all the open windows at the same time.

12) ALT+CLICK (Mac: OPT+Click) a tool to switch through the related tools. For example, try ALT+Click (Mac: OPT+Click) on the Paint bucket tool, you will obtain the gradient tool.

13) CTRL+Click on the new layer incon to create a new layer immediately below the current layer.

14) Whit SHIFT+CTRL+ALT+T (Mac: SHIFT+CMD+OPT+T) you can repeat and clone the last transformation (made with CTRL+T).

15) To find the center of a document select the background layer and click CTRL+T (Mac: CMD+T) to see a crosshair in the middle. Now you can simply drag out a guide in this point to find the center.

16) When you have a selection hold CTRL and use the arrows to move it, one pixel at a time.
Use CTRL+SHIFT to move the selection by 10×10 pixels. With CTRL+SHIFT+D (Mac: CMD+SHIFT+T) you can load the last selection used.

17) Choose CTRL+0 to “zoom to fit”, CTRL+ALT+0 to “zoom to 100%”.
If you prefer you can zoom back to 100% pressing the space bar and then right click -> actual pixels.

18) With the type tool active press CTRL+T (mAC: CMD+T) to show and hide the respective palette.
Press CTRL+H (Mac: CMD+H) while a text is selected to show and hide the selection.

19) If you are working with the paint bucket tool, hold down ALT(OPT) to switch temporarily to the eyedropper tool.

20) To draw a straight line with the brush tool click where you want, hold down shift and then click again where you want.
Instead, to draw a dotted line you have to open the brush palette (hit F5) and from the “Brush Tip Shape” tab you have to set the “spacing” to 150%.
After that you can repeat the previous step like a normal straight line.

3 March 2009

Best of the - February 2009

February is known for its lack of days when we have a leap year but there is no lack in great Photoshop material! This month we have tutorials on creating a breathtaking fantasy scene, an amazing set of icons and wallpapers, and the usual inspirational articles. So lets get into it!

Colorful Lighting Effect In Illustrator

There are a number of amazing tutorials out there that teach you how to create some really awesome futuristic light wispy effects. I’ve always found this type of design very interesting, but everything you see is almost completely created in Photoshop. I recently had a project where I wanted this effect, but had to use only vector graphics.

The following is the technique I used to get that nifty effect using Illustrator.
continue to read more

Grunge-Style Abstract Typography with Rusted Metal Texture in Photo shop

In this tutorial, I will show you the steps I took to make a Grungy-Style Abstract Typography using rusted metal texture in Photoshop. The inspiration of this tutorial came from a grungy metal image I came across on and thought I could have a play with it

Together we will explore some layer blending techniques, variuos filter effects, and an interesting method of making the text look 3D. Have a go!

Rotate the canvas by 90 degree CW by going into Image > Rotate Canvas > 90 degrees CW

We can add a bit of noise on the background image and make it look more grungy. To do this, duplicate the background layer and go to Filter > Noise > Dust & Scratches


Stunning 3D effects with Text

create this cool effect in just 30 minutes.

1 normal, everyday Photoshop
1 set of real 3D text.
1 large black canvas (1600×1200px)

continue to read more

Bubble Text

Before getting started, you may want to find a suitable font for this effect, as not all fonts will necessarily look right when this style is applied. You want a font with rounded edges — no sharp corners.

This effect really works great on top of dark backgrounds, but will also work fine on lighter backgrounds (so long as it’s not too light, as the effect itself makes things brighter). Go ahead and create a new document, and fill in the background with a color of your choice (or #2d3134 if you’d like to borrow our background color).

continue to read more

How To Use Type on Paths and Shapes in Photoshop

You’re probably familiar with the Shape, Type and Pen tools by now. If not, that’s OK. We’ll have quick refreshers for you along the way in this tutorial.

This Tutorial will Teach You how to create type that follows a custom path, or fills a custom shape in Photoshop. We’ll start with paths, and move our way up to filling and typing along shapes.

Type on a path works very similar to your typical type tool in Photoshop. Once you get a handle on how to work with it, it’s very easy.

continue to read more

Abstract coloring

First, create a new document (800×600 px).

Take an image, import it to Adobe Photoshop, scale it down and cut the kid using the Lasso Tool or Quick Selection Tool.

Duplicate the layer and change the blending mode of the top layer to Overlay.

Take a textured image, import in to Adobe Photoshop and flip it vertical. Put this layer behind the other two layers.

continue to read more

Coloring Hair in Photoshop

To create a character, hair is always a difficult part to make. This tutorial is going to describe how to make a few different hair styles. And you will learn how to adjust the hair color, skill for adding shine to hair. Just practice more!

Be forewarned, as always, that my style is not meant to be completely realistic and that I *do* use the Dodge/Burn tools quite liberally with hair. If that’s not a style you like, then this tutorial may not be all that helpful for you.

continue to read more

Create Energy Lines around a Person

Step 1 - Setting Up Background:

Create a document of size 900×660 pixels..

Set the foreground color to #09294B and background to #000000.

Using the Radial Gradient tool, create a gradient like the one shown in the diagram.

Step 2 - Creating Blue Mist:

Create a new layer above Background and name it as Blue Mist. Set the foreground color to #FFFFFF and background to #000000.

continue to read more

2 March 2009

Illustrator diamond flower

Not sure if my title describes exactly what I’ll try to explain in this tutorial, but it in the center of the shape I see a flower and the outside reminds me of a diamond. I’m sure there are a few different ways to create such a shape. It’s all pretty simple really. The hard part is choosing the right colors, right transparency value and transparency mode because you need to experiment a lot to achieve the result you want.

Final result of the Illustrator diamond flower

Draw a circle

Start by drawing a circle. Select the Ellipse Tool (L) and hold down the Shift key while dragging.

Draw a circle

Fill the circle with a color to your liking. My suggestion here is either to use a dark color and tone it back by adjusting the transparency, or you can choose a light color. Change the Transparency mode to Color Burn in the transparency palette (Window > Transparency).

Make sure rulers are visible. If they're not visible, hit cmd/ctrl + R. Drag a horizontal and vertical guide as shown in the image above. To make the guide snap to the points of the circle, turn on Snap to Point: View > Snap to Point. It's also suggested to turn on Smart Guides: View > Smart Guides. To switch them on and off use cmd/ctrl + U.

Draw a circle

Select the Selection Tool (V) and select the circle in the middle of the bottom right path segment. Now drag the circle 45° downwards until your pointer curser reaches the intersection point of the guides as shown in the image above. Use the Shift key while dragging the circle.

Rotate and duplicate circle

Select the Rotate Tool (R), hold down the Option/Alt key and click exactly on the guides' intersection point. Enter a value of 90 as degrees and click the copy button.

Rotate and duplicate circle

With the 2nd circle selected, hit cmd/ctrl + D twice to repeat the exact transformation. You should end up with a shape of 4 circles as shown in the image below.

Rotate and duplicate circle

Go to the Layers palette, select the layer with the circles and drag it onto the Create New Layer icon to duplicate this layer.

Duplicate and rotate circles

Lock your original layer, by clicking the empty square next to the eye icon in the Layers palette (see image below).

Duplicate and rotate circles

Select all circles of the duplicated layer and select the Rotate Tool (R), hold down the Option/Alt key and click exactly on the guides' intersection point again. Now enter a value of 45 as degrees and click the OK button.

Duplicate and rotate circles

Adjust colors and transparency mode

With the circles still selected, choose another color fill for the circles and choose Overlay as Transparency mode.

Adjust colors and transparency mode

Duplicate layers

Unlock the original layer. Select both layers and drag them onto the Create New Layer icon to duplicate them. Lock the 2 original layers.

Duplicate layers

Rotate duplicated layers

Makes sure all circles of both new created layers are selected. Select the Rotate Tool (R) hold down the Option/Alt key and click exactly on the guides' intersection point again. Enter a value of 22.5 (or for some of you 22,5) as degrees and click the OK button.

Rotate duplicated layers

I always check the Preview option to view the result upfront.

Final result

The final result should look similar to the image on the left. Though it all depends on the colors, transparency modes and transparency values you've chosen along the way. Chances are the result of the color combination is not to your satisfaction.

Final result of the Illustrator diamond flower

You can adjust the colors, transparency value and mode where needed adjusting circle by circle.

Follow on Buzz