Forum Index


Board index » All Posts

BottomBottom



Interface Design in Adobe Photoshop, Part 3 . By John Selvia
#1
Webmaster
Webmaster


Bringing dirty metal and rounded corners together

So you've got your dirty metal plate, and you've got the rounded corners technique down. What do you do next? Here's how to start building your interface.

Begin with a background that will contrast with the brownish color of the dirty plates you're going to make. Here, I've chosen a bluish/black background, darker than my plates to provide contrast, and added lines to make it more interesting. Remember, this is just a background. Don't go overboard with details.



Then, using the Dirty Grimy Metal technique, you'll need a master texture-one from which you can pull all your plate shapes.





Now, it's time to plan your primary plate, which will house most of your elements.

For most interfaces, you'll need areas for buttons or sets of buttons. You'll need a large area for a computer screen. You'll need cutout areas (negative space) for wires to show through. You'll need an area for a speaker grill.

Here's my channel, already rounded with our rounded corner technique, with lots of room for the computer screen, buttons, etc. Good use of negative space (black area) as well. (See Part 2 in this tutorial)




Next, I need a plate that fits under the above primary plate.

This is just a partial plate and will give the interface depth by showing through and around key areas (single layer interfaces can be boring, so 2 or 3 plates is a good number to go with).




And finally, here's a small subplate that fits on top of the 2nd plate above.

Remember, the purpose of having these rounded corner channels is merely to create selections so that we can copy from our master dirty grimy texture at the beginning of this tutorial.




So, in the Channels Palette, Command-click (Mac) or Control-click (Windows) the primary plate channel.

This will give you a selection.



Switch back to the Layers Palette, and with the selection on, copy from the master texture, then paste. This will create a new layer with the primary plate shape.


Hide the master texture so that you see something like what's at below.





Then bevel the primary plate, and give it a drop shadow. This adds some nice depth to the plate. Don't go overboard with the bevel. Thick bevels appear amateurish.

Also, avoid using white as a highlight color for the bevel. Either choose overlay mode on the highlight, or change the white to some lighter version of the overall color of your plate.

Here's our secondary plate, beveled and shadowed, and made a bit darker.




Here's our third plate, beveled and shadowed.



Here's all three of our plates.



Note how the middle plate and bottom plate are darker than the primary plate to provide contrast and make the primary plate stand out. The other two are just there as atmosphere.

All that is left to do is to populate the plates with elements, which we'll learn in future tutorials. In the meantime, here's one possibility of how it might look when it's finished.



And here's an alternate set of plates with some interesting negative space going on. The possibilities are endless as far as the shape of the three plates goes.



Here is the channel used to make the primary plate of the alternate....




Here is the channel used to make the secondary plate....



And channel number 3 for the 3rd plate.





This tutorial is by the late John Selvia, artist, musician, Photoshop guru who also just happened to be a three time Emmy winning graphic artist for television. John was also an adjunct instructor at a design/photography school where he taught Interface Design, Advanced Photoshop, Motion Graphics, 3D, Animation and basic design and illustration classes

John passed away in 2008 and his widow, Lisa Selvia - an artist and college instructor herself - has graciously given her permission to reprint John's fabulous tutorials here.


Posted on: 7/26 10:54
Visit my webshop http://www.pinchetti.com
Top


How to make stone by John Selvia
#2
Webmaster
Webmaster


Here's a technique I discovered by accident when PhotoShop 5 came out. It's a quick (dare I say-quickest?) way to make stone backgrounds. You can take it a step further by chiseling or carving titles for your homemade DVDs, etc. using Bevel and Emboss. Don't blink, this goes fast.

First, choose your foreground and background colors.





For a nice sandstone, choose a tan for the foreground and black for the background.

Then go to Filter Menu/Render/Clouds and find a nice balance of tan and dark.

I had to do clouds about 5 times before I got one I liked.

By the way, a shortcut to RE-DO a filter is COMMAND-F (PC: CONTROL-F). You can keep hitting this shortcut til you get some clouds that look good.




Next, go to Filter Menu/Render/Lighting Effects and fill yours in to match mine in the image below, as close as possible (on the other hand, if you don't like mine, change the numbers to suit your tastes).

One important thing to note-I spun my light around and spread it out (by grabbing the light's 4 little nodes and pulling outward) until I got the desired lighting condition and shape.






And here's what I ended up with. Cool, huh? And fast. Just 4 steps and you have stone.




Now the only thing left to do is to chisel something into it.

How? You might ask.

Read on...

Create a New Layer above your stone and create some kind of white shape on it, or type a word or a letter.





If you've done my other tutorials, you already know the next step.

We only need this white shape to make a selection, then we can throw it away. Soooo...

COMMAND-CLICK (PC: CONTROL-CLICK) on the white shape layer to create a selection.

Then choose the stone layer.

With the selection on, copy (COMMAND or CONTROL-C) then paste (COMMAND or CONTROL-V) which will copy from the stone, an exact shape of your selection and paste it on a new layer.




You should see something like this in your Layer Palette.

And yes, I really should name my layers.




Now we need to bevel.

Choose the Layer Menu/Layer Style/Bevel and Emboss, and change the bevel from Up to Down to make it look like it's going down into the stone.

Here's the default white bevel. Not bad, but to be honest, if the rock is sandy colored, you wouldn't see white highlights like this.





One thing I always point out to people learning PhotoShop is don't use white highlights for your bevels (unless your object is grey, then by all means, go ahead).

Think about it, if you chiselled down into a rock, the highlights on that chisel would be a lighter version of whatever the color of the rock is, not white!
So stay away from white highlights on bevels!


Here's a more accurately made bevel, where the highlights are a lighter version of the rock itself. Not as contrasty perhaps as white highlights, but more realistic.




And here's the Bevel and Emboss palette I used to get the effect.





Now go carve those stones!




This tutorial is by the late John Selvia, artist, musician, Photoshop guru who also just happened to be a three time Emmy winning graphic artist for television. John was also an adjunct instructor at a design/photography school where he taught Interface Design, Advanced Photoshop, Motion Graphics, 3D, Animation and basic design and illustration classes

John passed away in 2008 and his widow, Lisa Selvia - an artist and college instructor herself - has graciously given her permission to reprint John's fabulous tutorials here.


Posted on: 7/19 8:12
Visit my webshop http://www.pinchetti.com
Top


Gears
#3
Webmaster
Webmaster


This tutorial relies on information learned in the tutorial on Repeating elements in a circle. So make sure you do that tutorial first.


Start with 2 guides (a horizontal guide and a vertical guide) that form a crosshair in the center of your canvas.







Next, make a new layer, and create a box towards the top of the frame.





Using Edit/Transform/Perspective, change the box to be smaller at the top. This forms the first gear tooth.




Next, using the technique learned in the Repeating Objects in a Circle tutorial, move the center point to the center of blue crosshairs, so that when you rotate it, it rotates around the crosshairs instead of itself.





Choose Edit/Transform/Rotate, hold the shift key down so it snaps, and rotate it the desired distance around the center.
To keep rotating and duplicating, hit COMMAND-OPTION-SHIFT-T (PC: CONTROL-ALT-SHIFT-T). You should have something similar to this.




Using the Elliptical Marquee tool, create the body of the gear, and punch a hole in it by creating a smaller marquee circle and hitting delete.






This tutorial is by the late John Selvia, artist, musician, Photoshop guru who also just happened to be a three time Emmy winning graphic artist for television. John was also an adjunct instructor at a design/photography school where he taught Interface Design, Advanced Photoshop, Motion Graphics, 3D, Animation and basic design and illustration classes

John passed away in 2008 and his widow, Lisa Selvia - an artist and college instructor herself - has graciously given her permission to reprint John's fabulous tutorials here.





Posted on: 7/12 8:41
Visit my webshop http://www.pinchetti.com
Top


Re: Making A Flower by John Selvia
#4
Just can't stay away
Just can't stay away


I like to Brush up on things I forget THANKS

Posted on: 7/8 15:16
Top


Making A Flower by John Selvia
#5
Webmaster
Webmaster


Here's a technique for making a flower. It uses the rotate/duplicate technique from my tutorial Repeating Objects In A Circle Quickly, but I'll try to explain the technique in brief here as well.


Start with a blank canvas.

If Rulers aren't showing already, go to the View Menu and turn on the Rulers.

From the top Ruler, drag down a horizontal guideline and from the left Ruler, a vertical guideline so they form a nice crosshair in the middle of the canvas.





Next, create a new layer, call it PETAL, and select it.





Choose the Pen Tool from the tool palette, and make sure your Options (at the top of the screen after you choose the Pen Tool) look like the image below:






Draw the shape of one petal however you'd like. It doesn't have to represent a real-world flower petal, it could be weird, fantasy, alien, whatever.




Now, we're going to convert the path to a selection. We could have drawn a shape instead of a path that then had to be converted to a selection, but what's the harm in learning another tool, eh?


Go to the Paths palette, choose your Work Path (name it if you'd like), then at the bottom of the palette, choose Load Path as a Selection...
So we end up with this.









Now, pick 2 colors that we'll make a gradient out of. I'll use standard whitish flower colors as shown at left..




Then choose the Foreground to Background gradient in the Options bar. Choose Linear as the style, and make sure Transparency is OFF.
Now fill the selection with the gradient so that the darker part of the flower is at the bottom, like so.






Now we'll add a subtle edge to the petal using Inner Glow. Choose it from Layer Style under the Layer Menu (or from the Layers Style icon at the bottom of the Layers Palette).




Here's my settings from the Inner Glow options.




Note I changed the yellow color to a brownish color and changed Blend Mode to Normal. Play with Size and Opacity until you get something like...
This.




One technique I like to do is using half a selection at a time, make a very subtle streak up the middle to give the flower a crease.





Like this.



What you want to avoid is giving the petal a definite light/shadow direction at this time, because when we rotate it, it'll look wrong if you have locked in a light and shadow source-those won't rotate with the petal.
Notice my petal is lit right down the middle for the most part.
At this point, use the Brush tool to add streaks, spots, or whatever you want to make it look more like a flower.

Here's my finished petal. Yeah, it's not too fancy.




Now, duplicate the layer that the petal is on so you end up with 2 copies of the petal.




For this next part, we're going to rotate the duplicate flower petal.
This is based on the technique in my other tutorial, Repeating Objects In A Circle Quickly.





Basically, the idea is to choose Transform/Rotate, move the objects center to the bottom, then OPTION-SHIFT ROTATE (PC: ALT¥SHIFT ROTATE) the duplicate.

Here's the petal after choosing Transform/Rotate.





We have to move it's center point to the bottom of the flower...






Like this. Now when we rotate the object, it'll pivot around the bottom of the petal.


OPTION-SHIFT ROTATE (PC: ALT-SHIFT ROTATE) the duplicate.
Here's our original petal and the rotated one. Now for the rest of the petals.





To rotate and duplicate a layer at the same time, do a COMMAND¥OPTION-SHIFT-T (PC: CONTROL-ALT-SHIFT¥T) over and over until you get...
This.





You'll have a lot of petal layers at this point, so link and merge them all to 1 layer.

Now, duplicate this merged single layer to get a 2nd layer of petals.

Scale and rotate slightly this 2nd layer so it looks like...





This. Not much contrast, so feel free to use Curves or some other technique to boost contrast if you wish. You'll definitely want to apply an Outer Glow to the top layer so it stands out from the bottom layer a bit.

Here's the top layer with Outer Glow applied. Stands out a lot better now.





Now create a circle selection in the middle of the flower and fill it with a gradient that fits with your flower color and design.





Fill the circle with some noise, maybe a few beveled tiny dots, maybe even diffuse the circle to give it that rough "flowery-center" look.





This is what you get when you layer LOTS of petals.





That's it. You're done! Hopefully you'll use this with other elements to make something interesting.
Have fun!









This tutorial is by the late John Selvia, artist, musician, Photoshop guru who also just happened to be a three time Emmy winning graphic artist for television. John was also an adjunct instructor at a design/photography school where he taught Interface Design, Advanced Photoshop, Motion Graphics, 3D, Animation and basic design and illustration classes

John passed away in 2008 and his widow, Lisa Selvia - an artist and college instructor herself - has graciously given her permission to reprint John's fabulous tutorials here.




Posted on: 6/28 8:16
Visit my webshop http://www.pinchetti.com
Top


Re: Fantasy Columns
#6
Not too shy to talk
Not too shy to talk


You make it looks so simple Cliff!! I will have to try this!! Thank you!!

Posted on: 6/24 11:34
Top


Re: Fasteners part 1: bolts
#7
Webmaster
Webmaster


You're welcome sed, although I'm just the poster. I got all tuts from boopish and a lot of them areby John Selvia as written at the bottom of the tut

Posted on: 6/22 8:59
Visit my webshop http://www.pinchetti.com
Top


Re: Fasteners part 1: bolts
#8
Just can't stay away
Just can't stay away


Hey,............. Well presented -- Always trying to learn something new to me! THANKZ Cliff

Posted on: 6/21 17:02
Top


FASTENERS PART 2: SCREWS AND RIVETS
#9
Webmaster
Webmaster


This time, we're paying tribute to the lowly screw. We'll cover hex screws, phillips screws, single slot screws, and the easiest of the bunch-the rivet.


Start with a silvery gradient for a background, then drag out a horizontal and vertical guide for our crosshairs that we always start with for circular objects.




Then, on a new layer, create a circular selection.




Fill the selection with a Radial Gradient using the Gradient Tool. To simulatte shading, start your gradient in the upper left of the selection (but not right at the edge), and drag to the lower right.
There's a basic rivet, but it needs more...





Choose Layer Menu/Layer Style/Bevel and Emboss, and give the rivet a Pillow Emboss to make it look sunk into the background.

The rivet is done. Now, let's turn it into a single slot screw...




On a New Layer, create a rectangle using the Rectangular Marquee tool. Don't worry if you make it longer than it needs to be.



COMMAND-CLICK (PC: CONTROL-CLICK) the Rivet layer to get a selection, then choose Select Menu/Invert to invert the selection.

Next, hit delete on the slot layer to chop off any excess black bar and to make it conform to the shape of the rivet as shown here.




Hide the slot layer.

Then create a New Layer, choose the Gradient Tool with your basic White to Black gradient (Linear, not Radial), COMMAND-CLICK (PC: CONTROL-CLICK) the slot layer to get a selection, and create the gradient you see below.



Then rotate (Edit Menu/Transform/Rotate) the slot to match the direction the light is coming from as shown.



To make it look like it's sticking up from theh background, give it a slight shadow (Layer Menu/Layer Style/Drop Shadow).


If on the other hand you want it to look countersunk into the background, use Pillow Emboss instead of a shadow.



The Phillips Head version shown here is made by creating 2 black bars perpendicular to each other instead of 1 black bar, merging the 2 black bars, creating a selection from them, hiding them, then on a New Layer, do the same thing you did to the single slot version with a gradient, then in the end, Bevel the slot.




The Hex Screw version is easy enough. Choose the Polygon Tool, make sure it has 6 sides, then basically do the same thing you did to get a Phillips version, ending with a Bevel as shown.
Note the direction of the gradient inside the slot and the direction of the highlight and shadow of the Bevel.




And of course, our weathered, dirty, pitted screw from the tutorial - Dirty Pitted Metal.
How'd I get the more metallic look in this image?
Curves.



This tutorial is by the late John Selvia, artist, musician, Photoshop guru who also just happened to be a three time Emmy winning graphic artist for television. John was also an adjunct instructor at a design/photography school where he taught Interface Design, Advanced Photoshop, Motion Graphics, 3D, Animation and basic design and illustration classes

John passed away in 2008 and his widow, Lisa Selvia - an artist and college instructor herself - has graciously given her permission to reprint John's fabulous tutorials here.



Posted on: 6/21 9:15
Visit my webshop http://www.pinchetti.com
Top


Fasteners part 1: bolts
#10
Webmaster
Webmaster



FASTENERS PART 1: BOLTS


This begins our multi-part tutorial on fasteners. We'll be covering screws, hex screws, zippers, and today's lesson-bolts.


Like so many of our circular-based tutorials, start with a crosshair by dragging out guides from the horizontal and vertical rulers.

Then, using the Elliptical Marquee tool, drag out a circular selection from the center where the crosshairs meet.






On a New Layer, fill this selection with the copper gradient, using Linear Gradient instead of Radial, then desaturate it to get a greyish metallic look.



Then using techniques you learned in Tutorial Dirty, Pitted Metal, dirty up the disc. It might be helpful to create the dirtied up version on a separate layer, then use one of the Layer Modes to blend the two together.




This will be the flange or washer coming off the bolthead.

On a New Layer, choose the Polygon Tool, and give it 6 sides in the Option bar at the top of the screen.
Drag it out from the center where the crosshairs meet.




Hide the white shape you just made, choose the dirty pitted flange layer, COMMAND-CLICK (PC: CONTROL-CLICK) the white shape layer to get a selection, then copy and paste from the flange layer, which gives you a bolt-shaped dirty pitted metal shape.




Here's the 2 layers we have right now. I renamed them "bolthead" and "flange".



About the only thing left to do is apply bevels (Layer Menu/Layer Style/Bevel and Emboss), cast a shadow (Layer Menu/Layer Style/Shadow) from the bolthead, and if you want, add some texture to both layers using Bevel and Emboss' Texture Attribute.



Next in the fastener series: Screws and Rivets.



This tutorial is by the late John Selvia, artist, musician, Photoshop guru who also just happened to be a three time Emmy winning graphic artist for television. John was also an adjunct instructor at a design/photography school where he taught Interface Design, Advanced Photoshop, Motion Graphics, 3D, Animation and basic design and illustration classes

John passed away in 2008 and his widow, Lisa Selvia - an artist and college instructor herself - has graciously given her permission to reprint John's fabulous tutorials here.





Posted on: 6/14 8:36
Visit my webshop http://www.pinchetti.com
Top



TopTop
(1) 2 3 4 ... 19 »



Top Posters