In this fourth episode of the Vegas Pro 11 Getting Started series, We’ll take a look at the using the Trimmer. The Trimmer windows allows you to cut and select portions of a clip to be placed into events on tracks. More features will be shown in the next episode so be sure to stay tuned!

Get Vegas Pro 11: http://www.sonycreativesoftware.com/vegaspro

If you come across any questions, feel free to ask here!

Get a peek of what sharing presets will be like in the future. We’ve also addressed dozens of requests from our Photoshop community, called “just do its” or JDIs.

Adobe has posted another peek regarding the future of Photoshop! Check out how presets can be migrated, and a few other JDIs. (Just do it).

Using a few Shape Layers and a couple Layer Styles we will quickly construct a very slick looking “Click here to record” style button. Use this as a button in your website or app interface, use it as a button or list button point, change the color of the center area and use it as a color custom rollover. We’re going to use Photoshop CS5 here and you will only need a basic working knowledge of the application to get started with this tutorial!

This tutorial is one in the continued series the Howard from IceflowStudios.com and I are creating. Inspiration is draw from the amazing 365psd.com and any number of the quality, free PSD downloads they provide! Check them out now!

Step 1:

Create a new Photoshop document sized 1280px by 720px at 72 pixel per inch.

Step 2:

Fill the Background Layer with the color #404040. Go Filter>Noise>Add Noise. Use the setting that I have in my screenshot.

Step 3:

Grab the Ellipse Tool (U) and set the tool to draw paths, look to the Tool Options Bar and use the settings I have. Drag out a small ellipse in the center of the Photoshop Document. TIP: Hold the Shift key to draw a perfect circle.

Step 4:

Go Layer>New Fill Layer>Solid Color. I’m going to name this Layer “Metal” and fill this Layer with White.

Step 5:

Set the Fill Opacity of this “Metal” Layer to 0%. Go ahead and add an Inner Shadow and Inner Glow to this shape using the settings I have.

Step 6:

Go ahead and add a Gradient Overlay and open the Gradient Editor by selecting the Gradient bar. I have placed colors stops at 0-15-30-45-60-75-100%. Check out my screen shot and try to get about the same gray colors that I have.

Step 7:

Next it’s time to add a little more depth to this button’s base. Add a Drop Shadow and a Stroke using the settings I have. Check out my zoomed in screenshot to see what changes are being made. NOTE: We’re using the Stroke only to place that little gap between that Drop Shadow and the bottom edge of the button. Reducing it to 0% Opacity will make the line disappear, but the Layer Style will still behave as if the Stroke is visible and cut that nice channel for us.

Step 8:

We need to create a pattern to lay over this button to give the metal a touch more texture. Create a new Photoshop Document sized 5px by 5 px at 72 pixels per inch. Grab the Pencil Tool (B). Hit the (D) key to set Black as our Foreground color. Use the Pencil to draw a small plus (+) sign in the middle of that document. Go Edit>Define Pattern and save the Pattern.

Step 9:

Jump back over to our button and duplicate our button Layer by going Layer>Duplicate Layer. Then right click on the Layer name in the Layers Panel and hit “Clear Layer Style.” Again, reduce the Fill Opacity to 0%. Not much will change, but you will have a second Shape Layer now.

Step 10:

Go Layer>Layer Style>Pattern Overlay and select the Pattern Thumbnail and choose our (+) pattern. Use the settings I have used in the screenshot.

Step 11:

Duplicate this Layer just like we did a moment ago and clear the Layer Style as well. Free Transform this Layer (Cmd/ Ctrl + T) and hold down the Shift + Alt/Opt button and scale the shape toward the center until you have a smaller ellipse in the center of our button shape.

Step 12:

Reduce the Fill Opacity of this Layer to 0% and apply a Gradient Overlay Layer Style using the settings I have in the screenshot(s) below.

Step 13:

Go ahead and apply the Inner Shadow and Outer Glow that I have.

Step 14:

Drop in a Curves Adjustment Layer and set its Blending Mode to “Screen” and use a 500px, soft brush at 30% Opacity to “dust in” a nice spot light effect. Link those three Layers together to ensure that they’ll always drag together and I resized my button a little smaller for the final effect. Enjoy!

Similar to the “Awake” poster, this video will show you how to create a ‘face blurring’ effect in Photoshop!

Make sure to check out NBC’s Awake. It’s quite neat!

If you caught my last tutorial, you know that Nathaniel from Tutvid.com and I have teamed up to bring you a series of tutorials inspired by 365PSD.com. A site where you can download completely free PSD files for you to use in your projects.

Video

In today’s tutorial, we’re going to be creating a similar cloud icon to the one you see below, which again, can be downloaded, for free, at 365PSD.com!

Of course, the first thing that we need to do, is map out the cloud. To start, we’ll create the base of the cloud. This is done with a Rounded Rectangle, which you can find in your Tools Bar. We want to set the Radius at a nice large number to give us perfectly round corners. 200 pixels should work fine. When that’s set, drag out the rectangle as wide as you want the cloud to be.

Now that the base is complete, let’s add the smaller circles. Switching over to the Ellipse Tool, make sure that the Add to shape area option is active on your Options Bar. Draw out your first ellipse, which will be the smaller of the two, on the left side of the cloud. If you want to move the ellipse around as you’re creating it, hold down your Spacebar.

When the first ellipse is created, draw out the second one on the right side. This will be the bigger of the two. Make sure to hold your Shift key to ensure you create a perfect circle.

Now before we tackle Layer Styles, let’s add some depth to this shape. In your Layers Panel, duplicate the current cloud shape by either dragging it to the New Layer icon at the bottom, or by using your Command/Ctrl + J shortcut.

Once the layer has been duplicated, double-click on the color box beside the bottom cloud and darken it’s color slightly. This will help us tell the two apart. When the color has been changed, move the back shape down by about 10 pixels. This can be quickly done by holding down your Shift key, and pressing the down arrow on your keyboard.

Perfect, it’s time for Layer Styles! Let’s start with the top cloud. You can find them all below.

Gradient Colors: Left: #012543. Right: #1a64b1.

When these Layer Styles have been added, you should have something similar to this:

Let’s move on to the shape in the back, which is giving our cloud some depth. This shape will only have two Layer Styles. A Gradient Overlay, and a Stroke.

The gradient will use four stops. Clicking right below the gradient bar will add a new color stop. Place one at 55%, and one at 65%. If you’re having trouble placing them at the right location, you can manually enter it at the bottom.

The two colors on the left, and the color on the far right are going to be identical: #002850. As for the last stop, this is going to act as the highlight to help give a rounded look to the corner. Make sure to use a lighter value for this one: #003669. If you created a larger or smaller cloud, you may need to adjust the positioning of the stops, but that should give you a rounded look to the shape in the back.

Gradient Colors: Left: Red. Middle: Yellow. Right: Blue.

Once the Layer Styles have been added, you may want to slightly scale the back shape horizontally, to add to the curve effect. Enter Free Transform mode using your Command/Ctrl + T shortcut, then with your Alt/Option key held down, drag either of the side nodes inwards. Press Return/Enter once you’ve completed the transformation.

At this point, the main design is complete. If you want to add a shadow and a reflection, continue on!

Continue to add optional elements!

We’re going to go ahead and create a super cool little minimal loading bar in Photoshop. This bar will be created using a simple Shape Layer and Layer Styles so it will be very easy to edit and change so you’ll be able to use it on all kinds of different projects!

Create a Minimal Loading Bar – Photoshop Tutorial

This tutorial was inspired by: http://365psd.com/day/2-170/

Video

Step 1:

Create a new Photoshop document sized 1280px by 720px at a resolution of 72 pixels per inch. Fill the “Background” Layer with a light gray (I used #cfcfcf).

Step 2:

We need to create a sweet background first because everything looks better on a sweet background! Create a new Layer and go Edit>Fill and choose to fill with 50% gray. Let’s name this Layer “4% Noise”.

Step 3:

Go Filter>Noise>Add Noise and set the amount to 4%, Distribution: Gaussian, and Monochromatic ticked on. Hit “OK” and set the Layer Blend Mode to “Soft Light”.

Step 4:

Click on the “Background” Layer and go Layer>Duplicate Layer and name it “8% Noise”. Drag this Layer above the “4% Noise” Layer in the Layers panel.

Step 5:

Go Filter>Noise>Add Noise and set the amount to 8%, Distribution: Gaussian, and Monochromatic ticked off. Hit “OK” and set the Layer Blend Mode to “Soft Light”.

Step 6:

Create a new Layer and name it “Swath”. Grab the Brush Tool and set the Brush to 500px size and 0% hardness. Set your foreground color to white and paint a mark just like I did.

Step 7:

Set the “Swath” Layer Blend Mode to “Soft Light”.

Step 8:

We need to create a little pattern for use later in the tutorial. Create a new Photoshop document sized 8px by 8px. Go View>Fit On Screen to zoom this all the way up to a better viewing size. Double click the “Background” Layer to unlock it.

Step 9:

Create a new Layer and grab the Pencil Tool (located beneath the Brush Tool). Press the (D) key to set your foreground color to black. Use the Pencil Tool to draw three lines diagonally across the document just like I have.

Step 10:

Select the “Layer 0” and drag it to the garbage can at the base of the Layers Panel. Next go Edit>Define Pattern and give your pattern a name.

Step 11:

Close that pattern document (no need to save it!) and head back to our loading bar document. Grab the Rounded Rectangle Tool and set it to draw paths (second icon from the left in the Tool Options Bar) and set the Radius to 6px.

Step 12:

Draw a path out in the center of the document. The ideal height for your path is 6px, you can drag out guides and measure it, or just take a guess and draw a size you like –let’s be dangerous and freehand this!

Step 13:

Now that we have a path drawn out we can go Layer>New Fill Layer>Solid Color. Name this Layer “Track”. Let’s fill it with white.

Step 14:

Next go Layer>Layer Style>Blending Options. Set the Fill Opacity to 0%.

Step 15:

Set a Drop Shadow, Inner Shadow, Outer Glow, and Inner Glow using the settings I have. Set a Color Overlay of #dbdae1 (or any light gray). That will create our track!

Step 16:

Go Layer>Duplicate Layer and then go Layer>Layer Style>Clear Layer Style. Name this duplicated Layer “Fill Color”.

Step 17:

We need to size the fill down as if this loader was not quite finished loading. Grab the Direct Selection Tool (A) –you want to grab the white arrow. Click on the Vector Mask for the “Fill Color” Layer in the Layers Panel and drag a selection over the right side of the path and hold down your “Shift” key and tap the left arrow 9 or 10 times to back that fill up to about the half loaded point.

Step 18:

Double click on color thumbnail of this Layer and fill it with the color #4281c8.

Step 19:

Duplicate this Layer and we will begin applying our Layer Styles and finish this thing off! Add a Drop Shadow, Inner Shadow, Outer Glow, and Inner Glow using the settings provided below.

Step 20:

Next we want to reduce the Fill Opacity of this Layer to 0%. Go Layer>Layer Style>Gradient Overlay. Use the settings below.

Step 21:

Next apply a Pattern Overlay and grab the pattern we created from the drop down. Use the settings I have.

Step 22:

Next Apply a Satin and Stroke using the settings I have.

Step 23:

That’s it! If we duplicate our three Layers and change the original “Fill Color” Layer it changes the whole look of the loading bar! TIP: Using desaturated medium brightness colors usually works best! Have fun with it!

For Microsoft’s upcoming Windows 8 release, they decided to rebrand their Windows logo. Was it the best move?

The new logo, which you can see in the image above, was created by  top design firm, Pentagram. They said they wanted to ‘return to Windows’ roots’ while keeping things modern. They wanted to move away from the ‘flag’, and focus on the new ’tiled interface’ which is present in the OS. I completely understand the thinking behind this, but I don’t feel they executed the design well at all. Let’s take a look at a few images.

“Their Roots”

When referring to ‘their roots’, Windows 1.0 sported four rectangles which made up a window. It was simple and to the point.

The Flag

One of the things that they wanted to move away from, was the flag. This makes perfect sense, seeing that the OS will not be called “Flag 8″. Here are a few of their recent logos. While the designs are nice, they don’t really scream “Windows”.

The Tiles

If you’ve been following Windows’ development, you know they’re pushing a ’tiled’ interface. It stared with Windows Phone, and now they’re bringing it to the desktop OS.

Rebranding

Call me crazy, but the ‘rebranded’ logo that Pentagram came up with, doesn’t really bring Microsoft back to it’s roots, nor does it focus on the tiles. It may be too obviously, but here is what I would have come up with.

This logo does everything they wanted to do in the first place.

- Returns Windows to it’s roots by incorporating the ‘windows’ of the Windows 1.0 logo, moving away from the ‘flag’.
- Moves towards clean/modern lines.
- Focuses on the ’tiled’ interface.

Let me know what you think of Pentagram’s rebranded logo, and what you think of mine.

In this third episode of the Vegas Pro 11 Getting Started series, We’ll take a deeper look at the Project Media Window. This is where you’ll collect and arrange all the media to be used in your project. More features will be shown in the next episode so be sure to stay tuned!

Get Vegas Pro 11: http://www.sonycreativesoftware.com/vegaspro

If you come across any questions, feel free to ask here!

Over the next few weeks, Nathaniel from Tutvid.com and I will be releasing tutorials related to web design elements, like the ones you can download, for free, at 365PSD.com.

Every Monday, Wednesday, Friday and Saturday, we’ll be releasing a new tutorial on our own sites, and each other’s sites, so make sure you’re following both IceflowStudios and Tutvid to be kept up to date.

For today’s tutorial, we’re going to be creating the search bar you see above, which again can be downloaded for free at 365PSD.com

When designing elements like this, I always like to map out the design first, and worry about the Layer Styles after. There are three Rounded Rectangles that make up this design. The radius that you choose to use is up to you, but to match this design closely, a radius of 5px will work just fine.

In order to visually separate each element from one another, it’s a good idea to change the color of the new shape before you draw it out. Once one shape is created, make sure that the Create new shape layer button is selected on your Options Bar, then choose a new color. Repeat this process for each shape of the design. At any point you create a shape that’s either too big or too small, you can either undo and try again, or resize the shape later on. Once you have all three Rounded Rectangles in place, your design should be looking similar to this:

Now that the main elements are in place, let’s start with the Layer Styles, starting with the main rectangle in the back.

Gradient colors: The color on the left, which will be the bottom color, is going to be a very light blue. e9f3f5. The color on the right, the top color, will be almost a pure white, with a slight touch of blue. f8fcfd.

Once the Layer Styles have been applied, you should have something similar to this:

The next shape we’re going to work on will be the search field. For this shape, we’re not going to worry too much about a gradient. A solid color should work well. In your Layers Panel, double-click on the color box beside this layer, and set the color to a light blue. deebf1.

Now we can add a few Layer Styles.

These Layer Styles will give a nice, soft indented feel to your search field:

The last rectangle we’re going to edit, will be the search button, starting with the Gradient Overlay.

Gradient colors: The left color will be 88cae4. The left, bbe0f0.

The main elements are complete:

Now that the main elements are complete, let’s take a look at the text. The font and size you choose to use is completely up to you, but the main focus on the text, is the slight white Drop Shadow below the text. This will give the text an indented feel to it.

The last element we’re going to add, will be a magnify glass. If you want to make things quite simple, Photoshop includes one as a shape! Select your Custom Shape Tool,

click the arrow at the top right of the Shape Picker,

select Web,

then Append.

This will give you access to the Magnify Glass, allowing you to drag out your shape.

And that’s that! a simple, yet elegant search bar in Photoshop! If you’re looking to download free PSDs like this, check out 365PSD.com, and remember to keep an eye on IceflowStudios.com and Tutvid.com for upcoming tutorials, every Monday, Wednesday, Friday and Saturday.

See more advanced features of Photoshop Content-Aware technology. Straight from Photoshop Senior Product Manager Bryan O’Neil Hughes, this video shares how to seamlessly move or remove an object from an image.