Create a Cosmic Love Goddess With Photoshop CS5

Tutorials\

Photo Effects

Create a Cosmic Love Goddess With Photoshop CS5

Tutorial Details

Program: Adobe Photoshop CS5

Difficulty: Intermediate

Estimated Completion Time: 3 Hours

Autorials\
Illustration
Create Abstract Landscape Art From a Photograph

Tutorial Details
Program: Adobe Photoshop CS4+
Difficulty: Beginner
Estimated Completion Time: 2 Hours

Final Product What You'll Be Creating

Photographs are excellent tools to show you how something looks. Tracing photos to create artistic pieces however doesn’t teach you much about shape, volume, lighting, and color. Today, I would like to demonstrate an alternative way to create abstract artistic pieces using a photo merely as inspiration. We will start by choosing and simplifying its components and then proceed to apply a retro-futuristic look. Let’s get started!

Resources Used

Reference Photograph – (EUR Neighborhood in Rome)

Grungy Paper Texture

Step 1

For this tutorial we need a photo of a landcsape that contains both natural and architectural elements. Any photo will do, really, provided the composition is potentially interesting. I say potentially because we are going to do a lot of interpretation and guesswork therefore we can improve on the initial composition if need be.

I chose a shot of a lake from the EUR neighborhood in Rome (1a). While the photo itself is nothing special, the composition has potential: the shoreline is interesting, there’s a curved bridge coming in from the left, a bunch of buildings in the middle, a couple of low rises on the left and trees on the right. When you analyze the photo, take notice of any element, not just the physical ones: there are triangular reflections on the water, we’ll definitely use those! (1b).

Step 2

Grab the Brush Tool (B) and start blocking out the shapes you see using random but contrasting colors (2a). This is the first phase of the simplification process: choosing what to preserve from the plate. Block out the low-rise buildings on the left (2b), the bridge and the tall buildings (2c), the shore and the hill leading up (2d). Eventually you’ll have the entire photo blocked out into shapes. Introduce some variation by crosshatching over the vegetation. Keep it simple and clean and you’ll be all right (2e).

Step 3

Now we can get rid of the photograph and put a black background behind the sketch (3a). Before analyzing the composition, though, we need to eliminate the colors because they might distract us. To do that, create a black layer above the sketch and set it to either Hue or Saturation mode (3b). Now the colors are gone and we can evaluate the composition better (3c).

Step 4

I’ve drawn arrows to show the ideal paths formed by our shapes. It’s a good idea to have the composition lead the eye towards the focus point, in this case the center buildings (4a). As you can see we have three groups of shapes that pull towards the tall buildings and these in turn point upwards. We need to add a contrasting direction: that’s what the background and the empty spot at the far right are for. We’ll probably create a background pattern made of slanted stripes and we’ll put irregular shapes next to the rigid buildings (4b).

Step 5

Start building shapes using paths, going directly over the sketch. For now keep the original colors (5a). When you’ve traced everything (5b) do all the tweaking you want, moving points, changing colors to group shapes chromatically and, most importantly, eliminating the smallest shapes that only add confusion to the composition (5c).

Step 6

Let’s examine the final composition: a couple of low buildings seen in perspective on the left; a curved bridge coming in from the bottom left corner; a couple of roofs and a ramp leading up to four tall buildings placed roughly in the middle, strongly pulling upwards; a hole at the far right of the image, to be filled with organic shapes. This abstract landscape is the result of interpreting a plain photograph (6a).

We will start shading the tall buildings. Apply a bunch of layer styles to the shape layers: everything is editable and scalable at any time. A gradient overlay to make the top of the buildings lighter (6b), an Inner Glow with noise to create texture (6c), Outer Glow (6d). Since these buildings are the focus of the image, it makes sense to give them a bright appearance (6e). Apply the same layer style to the other buildings, changing the colors appropriately (6f).

Step 7

For the roofs and the ramp we are going for a “neon and space dust” look. It’s just a matter of using layer styles in a slightly unorthodox manner to achieve interesting results. Take the first roof (7a) and turn down the Fill to 0%, effectively making it disappear: only the layer styles will be visible. Apply a Stroke and make it bright by choosing the Linear Dodge blending mode (7b). This is neon enough. The space dust effect is accomplished by turning on noise for both Outer Glow (7c) and Inner Shadow (7d). See? (7e).

Step 8

Apply this layer style to the other roofs and ramps, each time adjusting the colors to match those of the parent shape. Tweak values like the amount of noise and the size of the glows to add variation and to suggest perspective: farther objects have less noise.

Step 9

The green buildings on the left receive a strong blue glow from the adjacent building so add it with a noisy Inner Shadow (9a). Use the Size and Distance values to tweak the effect to your liking (9b). Since these are secondary elements I’ve decided to desaturate them from green to a pale water green (9c). Remember that everything you see on the screen is vector shapes and layer styles so you can change shapes, colors, effects and image size at any time without losing sharpness. There are pixel limits to layer styles, though, keep that in mind.

Step 10

To make the green buildings more recessed in space let’s erase them partially. To do that group the layers and add a blank mask to the group. Click on the mask and paint with black on the areas you want to hide, using a soft brush (10a). Make the buildings fade behind the high-rises (10b) and out of the left side of the image (10c). Layer masks are raster elements so they’re not scalable but it’s easy to paint them again if you have to scale the image up for printing.

Step 11

Hide the black background, leaving everything else visible. Hit Cmd/Ctrl + A (Select All), Cmd/Ctrl + Shift + C (Copy Merged) and Cmd/Ctrl + V (Paste) to flatten all the elements on a single layer. Turn the background back on. The image is pretty dense as it is so we won’t add any stripes to the background. Instead we will place the grungy paper texture in the document, resizing it appropriately (11a). Desaturate it (Cmd/Ctrl + Shift + U) and invert it (Cmd/Ctrl + I) (11b). Change the blending mode to Lighter Color and lower the Opacity to 25%. Now the texture is barely visible, giving a subtle variation to the boring flat blackness of space (11c).

Step 12

You can color the texture by adding an Adjustment Layer to it. Check the Colorize option and move the sliders around until you find a suitable hue (12a). I chose a faint red tint, taking a hint from the triangular shapes at the bottom of the image (12b). This might be a secondary space dust made of finer particles that reflect the glow form the light objects. Always have a story to go with your illustrations!

Step 13

We have to take care of the glaring hole on the right. Let’s put some slanted billows of smoke there. Select the Brush Tool (B) and enter the Brushes window (F5). Pick a textured preset (13a). Turn on both Size Jitter (13b) and Opacity Jitter (13c). You can control the values with a tablet (Pen Pressure setting) which I recommend. Tablets are not cheap but they are indispensable. Paint vertical lines in white on a new layer, varying their length, thickness and opacity (13d).

Step 14

Rotate the smoke layer 45 degrees, scale it down and place it next to the high-rises (14a). Erase the parts that overlap the other elements (14b) and smudge the ends with the Smudge Tool (14c).

Step 15

The final step is to color the smoke. Add a Color Overlay style to the layer (15a). Choose the color you want. I picked purple because it contrasts nicely with the bright yellow of the objects surrounding the smoke and it recalls the thin purple building in the main cluster (15b). You’re done!

Conclusion

In this tutorial I’ve shown you how you can use a photograph as inspiration and a base for an abstract landscape. By interpreting the elements we see in the picture we created a highly stylized version of it which we then transformed into a totally unrelated image. In particular we have created an abstract space scene entirely out of vector shapes and layer styles, thus making the landscape scalable and tweakable. Unorthodox settings for mundane layer styles gave us an interesting "space dust" look that blends well with popular light effects. I hope you had fun and learned a useful workflow. Now go flip through your vacation photos and turn them into unique landscapes!

Articles\
Inspiration
Showcase of Macintosh Dashboard Widget UI Designs

There are various ways an application (or more specifically, a widget) can be presented to its users; some bad, some good and some tremendously well. Other than a widgets purpose, its user interface is the most important aspect; it makes the widget look good and (hopefully) makes it easy to use, making it compelling and user friendly, which is what all application developers should be aiming to achieve. Dashboard widgetsare actually relatively easy to make, and most web designers/developers can produce them without much difficulty. They are developed using HTML, CSS and JavaScript, meaning everything that is possible on the web, is possible in a dashboard widget, making it relatively easy to achieve a great looking and easy to use widget.

This inspirational compilation post showcases a collection of 32 creative, unique and easy to use Apple Macintosh Dashboard Widgets, including a selection of default widgets that ship with your Apple Mac, and a good handful or two of third party widgets.

This Post is Day 4 of our Interface Design Session.Creative Sessions

« Session Day 3 Session Day 5 »

Participate in this Session’s Group Project

Jump over to this Session’s creative project on Create an Application Icon or Dashboard Widget. Choose the project to participate in that best fits your skill level and interest. This session’s Beginner/Intermediate project the brief is to make an icon for applications, which is great practice for building your GUI skills.

We also have an Advanced project where you design a widget, which is a great way to get some hands on experience with designing interfaces, as they are typically smaller apps with a tight focus. You can post your projects in the comments here and get some feedback from the community.

Default Dashboard Widgets

A selection of default dashboard widgets that ship with Macintosh computers as standard. These are no doubt some of most elegant dashboard widget UI designs to date.

Weather

The weather widget allows users to quickly check the current and upcoming weather forecasts for towns and cities all over the world.

Unit Converter

Unit Converter is an incredibly easy to use widget, allowing you to convert all kinds of figures, from currency to weight and distance to energy.

iTunes

The iTunes widget allows you to view the current song playing, pause, play, skip and change your settings (i.e. repeat and shuffle) at the speed of light.

Calendar

Calendar is a very basic widget that simply allows you to scroll through months and view dates. It’s handy to check which dates fall on which days.

Dictionary

The Dictionary widget actually triples up as a dictionary, a thesaurus and an “Apple dictionary” that allows you to check different Macintosh words to find out their true definition (i.e. “spotlight”).

Calculator

A very straight-forward calculator widget that does what it says on the tin, it’s not used very much due to the ability of being able to calculate sums directly into the Spotlight search bar.