Forum Index


Board index » All Posts

BottomBottom



Lesson 4 – Controls
#1
Webmaster
Webmaster



So far we have learned to open and cut out images, the importance of having each button image exactly the same size and lined up precisely; which option to choose for each type of image we have used and how to edit our image by changing the parameters or using the Edit function to change the image in our graphics editing program.
Something you have probably noticed is that you can use the same image for different parts of the skin. Just as we used the image we made for our start panel for the window frames, we also can use the same 5 frame button image for the toolbar buttons, the system buttons, our list view header and tabs. As you become more confident, you will probably make separate images for these, or at the very least, edit them in your graphics program to adjust for the different states of each frame.
You have also probably noticed the using SKS isn’t so bad, but just requires a lot of practice in cutting images and checking to be sure you have set the parameters properly for the type of image you are using. Bitmaps require the boxes for Translucency and Transparency are unchecked, and .PNG’s need both checked.
If you have looked into the skin folder itself (and I strongly recommend that you do), you will have noticed that SKS has a lot of .tga’s – and we didn’t use any .tga’s. That’s because SKS automatically changes our .png’s into .tga’s for us. Don’t be afraid to open up a skin that you admire and check out how they sized their images.
This next section requires applying these skills, but we are going to be doing a bit more with the Parameters of some of them as well.
Go to the Explorer Tree and expand the Controls section. Expand each item on the tree and check its parameters. We already know how to find the default sizes we need to make most of the images required and how to get them into our skin.
A few of these next images, however, can be a lot harder to make if you are just starting out. These are the Groupbox Frame, Radio Buttons and the Trackbars. Open them up, and try your hand at recoloring them if you are uneasy about being able to make them at this point in time.
Before we start going through the section, try to make and put in as many of the images as you can. Check the Parameters that we have already discussed in the last two lessons. Even though Night Train has set all of them already, it’s good to get into the habit.
There are some important things to know about the Progress Bar.
You will note that Night Train has made his progress bar in .png format! That’s because he made this blind specifically for WB5. We are making a blind that will work for both WB5 and WB4 – sooooooo……yup……here’s where you get to try your hand at magic pink! That’s the color 255, 0,255 (RGB).
Make your Progress Bar using two identically sized images. This is critical, or it won’t display properly. And we don’t want the image to be too large either for the same reason.
For this lesson, we are going to concentrate on just two sections of the Progress Bar that we must skin: the XP- Bar (that’s the background or shaft of the bar) and the XP – Chunk (the bit that appears to move along the shaft). The flash is a WB 5 alone bit, so we are going to ignore it.
You can use your 20 x 20 template if you like.
The XP-Chunk part is the frame that uses magic pink. In your graphics editor, open your 20 x 20 template… the simple colored box with the inside stroke. Color it so that it contrasts with the box you are using as the XP-Bar. Make a new layer and place it underneath the layer with your colored box. Flood this new layer with magic pink. Now go back and select the layer with your box on it. Bring the top and bottom edges of the box down by 4 pixels each. You should have some magic pink showing at the top and the bottom of your image. Save your image as a .bmp.
Here you have a choice. You can make your progress bar as two separate images or a single image with both of the frames in it, that you then cut up in the same manner you did the start panel and window frames.
Controls
This section will take the most of your time. Not just because of the number of images, but because there are some Parameters that we have to check and set that will determine how parts of the blind are skinned. Night Train has set all of these already for this blind, but when you make a blind from scratch you will need to know how to set some of these or parts of your blind won’t skin even though you have put the images into it. For the parts that just use the things we already know how to do (cutting the image, adjusting the margins, and checking that the transparency/translucency settings are correct) we will do a very quick explanation with no reference pictures.
Open the Control item in the Explorer Tree and let’s get started.
• Scrollbars. This has three parts, the arrows, and the Vertical and Horizontal -which each have three sections: the tray (the background), the Thumbs, and the glyphs.
You probably figured out that the image for the arrows comes up when you click on Scrollbars, the others when you expand the section in the tree. Nothing new to do. You just need to put in your images for each of these items. Did you check that your parameters for your image type are correct?
• Checkbox - again nothing really new, you can start by recoloring this image until you feel confident in making one of your own.
• ComboBox Border. Another simple 4 frame image. Expand this item and you will see Edit Border. Change the color to fit into your color scheme for your blind.
• GroupBox Frame: This item MUST be a ..bmp. Simply recolor it until you are confident in making your own. Expand it and you will see GroupBox Header. This item is optional to skin, and again, uses a very simple image and the settings are all ones we are already familiar with.
• List View Header: Another simple image. This one with 5 frames.
• Menus: This is the section that we must ensure that we have some specific Parameters set whenever we make a skin, otherwise parts will remain unskinned even though we have put our images in! Expand this item and all the sub items.
• Menubar Background: that’s easy, we can even use the same image here that we used for our taskbar. Expand it: Bar Items: Look at the Parameters section. For your buttons to be skinned you MUST ensure that the top most item Enable MenuBar Buttons is set to enabled. The default is disabled and leaves them unskinned.




If you want these buttons to use the same text colors as the drop down menu, you don’t need to change anything here. If you want it to have a different set of colors, click on the Enable own set of colors item and then define your colors.
• The next item is Bar Items – ToolBar Like. This item is optional and if left unskinned windowblinds will use the image we provided for the Bar Items.
• MIDI Buttons – be sure that your image is 180 x 15, or the glyphs won’t show up properly. This item also has a habit of not showing up in WB5 if you use any transparency, so make this a .bmp with no transparency.
• Pull Down Background: Here we must ensure that the third item from the top of the parameters section, Flat Menu’s disables skinning is set to Disabled. If we don’t have this set properly, our menu’s won’t be skinned when we apply the blind.



• Pull Down Item: The image you use here can be used a two other places in the blind as well (The Start panel Programs item and the More Programs menu item) and consists of five frames of equal size. I am going to tell you just how I make this image in case you are having trouble. It can be a bit pesky.
• In your graphics program, open your 25 x 25 template image. Make a new image that is 125 x 25 making sure it has a transparent background. Drag your template image into the new one, making sure you are lining it up carefully, until you have all five frames (layers) in the new one. Now, simply delete or hide frame 1, 2,3, and five. Save your image and open it in Skinstudio. Adjust the margins…and voila! Only the text will be highlighted.



Here, again, we must ensure that Flat Menu’s disables skinning is set to Disabled for our image, and not the windows default one, to show.



• Progress Bar: We discussed how to make this image in the introduction to our lesson, but it bears repeating: Make your Progress Bar using two identically sized images. THIS IS CRITICAL, or it won’t display properly. And we don’t want the image to be too large either for the same reason.

For this lesson, we are going to concentrate on just two sections of the Progress Bar that we must skin: the XP- Bar (that’s the background or shaft of the bar) and the XP – Chunk (the bit that appears to move along the shaft). The flash is a WB 5 alone bit, so we are going to ignore it.
You can use your 20 x 20 template if you like.
The XP-Chunk part is the frame that uses magic pink. In your graphics editor, open your 20 x 20 template… the simple colored box with the inside stroke. Color it so that it contrasts with the box you are using as the XP-Bar. Make a new layer and place it underneath the layer with your colored box. Flood this new layer with magic pink. Now go back and select the layer with your box on it. Bring the top and bottom edges of the box down by 4 pixels each. You should have some magic pink showing at the top and the bottom of your image. Save your image.
Here you have a choice. You can make your progress bar as two separate images or a single image with both of the frames in it, that you then cut up in the same manner you did the start panel and window frames.
If you click on the Progress Bar item in the tree, and look to the Editing Panel, you will notice that Night Train doesn’t have an image here. This image is optional.
Now that you have your image in the blind, do you have any pink showing around the image? If not, great! If you do, it’s because the edges of you image were semi transparent and you will need to go back into your graphics program and clean up the edges so that no pink shows.
If you look at the pictures below, you will see that I use a single, two frame image and cut it up.



Look at the Parameters. The Draw Method for the XP- Bar is set to “Tile”, try changing this to “Stretch” and then press F9, to bring up the test skin box (remember that you can do this by going to Toolbar, Tools, Windowblinds, Test Skin as well).
Does your background look ok?
At the moment the Draw Method of the XP-Chunk, in the Parameters section is set to “Tile”. This gives the illusion of a broken line moving along the background. If you want it to appear to be a solid line, set it to “Stretch”, but be sure that you also change the setting under Progress Bar item so that Tile Mode is set to “Stretch Background/ Stretch Bar” (this would be “Tile Background/Stretch Bar” if you haven’t changed any of Night Train’s settings.).





• Radio and Spin Buttons should be old hat for you now. Simply open your images, cut, and choose the first option. You can use the same image for the vertical and horizontal spins. Remember, that if you are still not feeling confident about making the Radio buttons, it’s ok to just recolor them.
• Statusbar Pane. There are three images here: The pane, the gripper and the background. You can ignore the gripper or recolor it until you get comfortable making the image. . For the background and pane, simply open your images, cut, and choose the second option because you are using the same image for all three states of this image.
• System Buttons, Tab Set, Toolbar Trackbars and Tree View Expander: Simply open your images, cut, and choose the first option. You can use the same image for the vertical and horizontal spins. Play around with the Draw method for the Trackbars and see what happens. It’s ok if you just recolor the trackbar images and Tree View Expander until you are confident enough to make them yourself.
We are almost there! Just a little bit more to go and you will have completed your first blind! Save your blind, apply it and admire you hard work!


Posted on: 8/30 8:09
Visit my webshop http://www.pinchetti.com
Top


Re: REPEATING OBJECTS IN A CIRCLE QUICKLY
#2
Just can't stay away
Just can't stay away


EXCLNT

Posted on: 8/24 16:01
Top


REPEATING OBJECTS IN A CIRCLE QUICKLY
#3
Webmaster
Webmaster


Ever need to make a gauge? A clock? You'll need multiple repeating tick marks arranged in a circle. Here's the fastest way I've discovered to do this. And it all comes down to a little known Photoshop keyboard shortcut...


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, then choose the Elliptical Marquee tool, and create a circle coming out from the center of the crosshairs.



Use OPTION-SHIFT (PC: ALT-SHIFT) to make a perfect circle that comes out from center.
Once you have a circular selection, choose the Edit menu/Stroke, and give it a stroke of a few pixels.




Now create a new layer, then choose the Rectangular Marquee tool, and make a small thin rectangle at the top of the circle like this.



Fill this with black. This is the first tick mark.


Now we're going to rotate this tick mark, but first we have to move its center point.
Choose Edit menu/Transform/Rotate, and zoom in on your tick mark but you should also still see the guides that form your crosshair.

Here's the center point.




Drag this center point down to where the crosshairs meet.

Note my tick mark doesn't really go all the way from the circle to the crosshairs, I just sliced the image so you could clearly see both.





Holding the Shift key down so it snaps into place, rotate the tick mark.

Since you moved the tick mark's center point to the crosshairs, the tick mark accurately rotates around that new center point.





Here's the little known Photoshop shortcut combination which will give you all your tickmarks equally spaced and perfectly rotated.

Once you've rotated an object, you can rotate it again with COMMAND¥SHIFT-T (PC: CONTROL¥SHIFT-T). But that won't give you a copy of the mark.

To copy AND rotate at the same time, do a COMMAND¥OPTION-SHIFT-T (PC: CONTROL-ALT-SHIFT-T) over and over until you fill the circle with tickmarks.

You'll end up with a LOT of layers this way, so merge them all when you're done.





Example of an element created using this technique.




The flower in the image above was made by creating one petal, then applying this technique to repeat and duplicate that petal.

To break things up a bit, I went into several of the layers and lengthened and shortened some of them. Then I merged all the petals into 1 layer.

I then duplicated the layer, and offset the layer from the duplicate a bit to further break up the perfect symmetry.

One last point. It's important that you create this larger or at a higher resolution than you really want to end up with, because anytime you rotate something, that something deteriorates a little bit. Doing it at a larger size or resolution and later scaling it down will help keep your rotated objects clean.



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: 8/23 9:17
Visit my webshop http://www.pinchetti.com
Top


Creating a pitted metal effect for the interface background By John Selvia
#4
Webmaster
Webmaster


This series of tutorials shows how to create interfaces for games, multimedia, motion graphics and web. There will be two approaches taken-the dirty, slimy, gritty, rusty interface, and the organic, clean, modern interface often seen in television and motion graphics.


For the Þrst installment in this series, we'll explore the creation of a rusted, pitted metal background for our Þnal interface. This will be accomplished in two quick stages.

Stage 1: creating the base for the effect
First, choose black and one other base metal color (grey blue works great). You will use these for the Clouds Þlter.
Apply Clouds using the 2 colors you chose (Filter > Render > Clouds)








Next, choose the Channels palette (under Windows > Channel if it is not already open) and create a New Channel (the little dog-earred paper icon, bottom of palette OR New Channel from the little triangle menu upper right of Channels palette).
Then choose Filter Menu > Noise > Add Noise until you get this more or less.





Now, (still in the Channels palette), open the Image Menu > Adjustments > Levels and set the levels so the triangles meet in the middle like this. It sometimes works better if your triangles meet on the right side instead of the middle.





Your graph may look totally different, by the way, owing to the nature of random noise. This helps reduce a lot of the gray and helps isolate important dots.

Next, scale the noise up a bit so that the dots are larger (Edit Menu > Transform). This has the added effect of ever so slightly blurring the dots so they look more natural.







Stage 2: adding in surface detail

Turn the dots into a selection by choosing the little icon at the bottom of the Channel palette that looks like a dotted circle, or by Command-clicking (Mac) or Control-clicking (Windows) on the Channel Layer.

Back in the Layers palette, choose your layer, and with the selection you have of the dots, copy from the base metal, then paste it. (It will create a new layer.) Bevel this new layer of dots (Layer > Layer Style > Bevel and Emboss). I think it works best if you choose Down for the direction, because it looks like pits instead of bumps.

Note: Your bevels will look much better if you don't use white for the highlight. Choose a lighter version of the main color in your image (here I chose a light gray-blue since most off the image is a medium gray-blue). If you want a warmer feel, choose a light tan instead.





Next, choose a color that would work for a basic rust.




Choose the paint brush, pick a large size brush--I used 200 pixels--and set the Mode for the brush to Color. Decrease the brush's opacity--I used 20 percent--and dab on some rust color.




You could stop here, and you'd be done, but let's go one more step....

Using the lasso tool, create irregular shapes, use the shapes to copy from the base metal, and paste (will create a new layer). Now, bevel these with the smallest of bevels (again, making sure you don't use white for highlights--I chose a light tan here). Then create diagonal scratches and copy, paste, bevel those also. Overlapping helps with the illusion.




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, as well as a college level instructor in graphic design. 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: 8/16 9:08
Visit my webshop http://www.pinchetti.com
Top


MAKING A CORRUGATED PIPE
#5
Webmaster
Webmaster



Here's a technique to make a corrugated pipe for interface design. It involves using 2 gradients. The first gradient goes on a single segment of the pipe from left to right giving each segment a 3D feel, and the s2nd gradient goes over the whole pipe from top to bottom, providing the whole tube with shading.
Choose the Rounded Rectangle tool...



Select that tool's Fill Pixel option in the Option Bar at the top of the screen.




This option goes ahead and fills the shape you create with whatever color you have chosen.
Choose white for your Foreground color.

On a New layer, create a small pill-shaped object.




Then hide that layer and create a New Layer.




Then COMMAND-CLICK (PC: CONTROL-CLICK) the layer to et a selection from it.
Choose the Gradient Tool, then choose the Copper gradient. Make sure your options look like these. I always make sure my Mode is set for Normal and Opacity is 100% anytime I'm about to fill a shape with color, or in this case, a gradient.




Fill the selection you made with the gradient, sweeping from left to right.

It sometimes helps if you hold the Shift key down while dragging the mouse left to right-it's a great way to make sure your gradient is parallel to the shape.




Duplicate the gradient pill shape fro left to right (Mac: OPTION-SHIFT-DRAG, PC: ALT-SHIFT¥
DRAG).

They should just touch each other but not overlap. Merge any duplicate layers you have into a single layer. Rename the layer Segments and hide it.




On a New Layer, COMMAND-CLICK (PC:CONTROL-CLICK) the layer you just hid to get a selection.
Name the New Layer, Whole tube.




Again, make sure this next step is on a New layer. Don't destroy what you've done already!
Fill the selection you just made with the same gradient you used earlier, but sweep from top to bottom

(remember to hold the SHIFT key down to make it go in a straight up and down).




Time to do the magic!

If you've not played with Photoshop's Blending Modes much, you're missing out on some incredible
power in Photoshop.

For the next step, make sure the Whole Tube layer is on top, and the Segments layer is underneath it.
Make sure that the Whole Tube layer is chosen before proceeding.

We're going to try several different modes because each one gives us a radically different effect.





Here's Darken Mode





Here's Multiply Mode





Here's Color Burn mode




Here's Linear Burn mode.




Here's Pin Light Mode.




Here's my final pipe after dirtying it up a bit using the techniques learned in Photoshop Tutorial #2 ¥Dirty Pitted Metal.




Posted on: 8/9 8:05
Visit my webshop http://www.pinchetti.com
Top


Interface design part II by John Selvia
#6
Webmaster
Webmaster


Lesson 2: rounded corner interface plates
By John Selvia


I used to spend hours with the Pen tool in Photoshop to create rounded interface elements. But this technique speeds things up 10 fold. One hundred fold? This blew me away the first time I did it. This is one of the easiest techniques you can do in Adobe Photoshop, yet very powerful.

Before you get started, note that this is the second article in a series detailing the creation of interface elements in Photoshop. The first is rusted pitted metal.


First, create a New Channel in the Channel Palette and choose the Channel Layer.
Next, choose the Rectangular Marquee tool from the tool palette and create a bunch of white boxes in the new Channel layer you just made. Something like what's shown below.






Try to avoid very thin boxes as these will round out probably more than you want on their ends.
Now, you'll want to go to the Filter menu, and choose Blur > Gaussian Blur. Blur the boxes channel until the corners look rounded and blurry, like the one below. Don't worry about what your Blur settings should be; eyeball it so it looks like the image below.





Next, choose Image > Adjustments > Levels. Again, numbers aren't important here; just make sure all three triangles meet toward the middle, but don't overlap them.
Before you close the Levels window, look at your image. If your edges look too crisp and jagged, you moved the triangles too close. If they still look blurry, you need to bring them closer together.




Here's our previously blurry boxes with nice sharp rounded corners, ready to turn into a selection to create our interface plate. So the next step is to create the dirty, pitted metal look by using this channel to create a selection and filling it with clouds.






Full details on how to do that are in my previous tutorial on creating a dirty, pitted metal effect, which you can find in the tutorials section. Here's how mine came out.





Wasn't that easy?


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: 8/2 8:56
Visit my webshop http://www.pinchetti.com
Top


Interface Design in Adobe Photoshop, Part 3 . By John Selvia
#7
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
#8
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
#9
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
#10
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



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



Top Posters