I often batch import layered files (PSD, PNG) into Flash or even copy graphics into it. But what I DO find really handy is copying text between the apps. This worked in CS3 but it’s gotten better (more accurate) in CS4. You can copy a whole group in and the font, size, and color are all maintained (or close enough, you usually have to nudge line height). This saves tons of time when you’re populating a whole FLA from a text heavy design while keeping the text editable for the inevitable copy change. Notice in this video how I can bring in multiple text boxes at a time.

This Articles by bkwld

Related posts:

1. Flash Components – Jumpeye (Full Package)

Would you like to create a Simple Navigation with a Horizontal Subnav? It looks very similar to the Menu of Behance Network, which looks nice and professional.

We can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds. Nice and simple! I am sure this will come in handy in your future projects.

Demo: http://www.sohtanaka.com/web-design/examples/horizontal-subnav/

Related posts:

1. Create Powerful Mobile Apps with HTML, CSS and jQuery
2. How to Create Brilliant Light Streaks in Photoshop
3. Create a Vector-Based Zune with Photoshop

Lighting effects have become quite popular, and are an effective way to add bright eye catching details to a photo or illustration. In this tutorial, you will learn a simple technique for creating brilliant light streaks which can be used in different ways to add motion and brightness to your designs.

Step 1

First, lets create a nice background for our effect. Open up a new Photoshop file, and fill the background with black. Now, create a new layer and fill it with white. We will use the Lighting Effects filter (Filters > Render > Lighting Effects) on this layer to create a nice soft gradient. Next to the Intensity slider, choose any color that you like as long as it is somewhat dark. For this example, I have chosen a dark pink/purple.

Step 2

Now lets create a light from which all of our streaks will be created. Start by creating a new layer and setting it’s blend mode to screen. Then use the Elliptical Marquee Tool to make a circular selection and Feather(Select > Modify > Feather) it with a value of 20 pixels. This will give our light a nice glow around the edges. Using the Radial Gradient Fill tool, we are going to give it some color and intensity. I like to use 3 colors for the gradient. The first and inner most color should be white or something close to it. Make sure to start the fill in the middle of your selection and end it a the edge.

Step 3

Make a copy of the light layer that we just created, and hide the original. You will need it later to make additional streaks. Now, lets scale(Edit > Transform > Scale) the light so that it is much flatter. Doing this allows you to control the thickness of your streak.

Step 4

Now we get to start having fun. To give our light that streak look there are two filters we can use: Wave(Filter > Distort > Wave) and Twirl(Filter > Distort > Twirl). By using Wave, you can achieve some very nice looking irregular paths for your light. Like any other filter with sliders, it takes some tweaking to achieve the result you are after, but you will probably need to up the wave length and amplitude considerably. Also, try applying the Wave filter multiple times to the same layer.

The Twirl filter will give you a streak that is moving in a more radial type of path.

Also, don’t be afraid to combine the two. By doing so you will be adding more detail to each streak, and making the overall effect more interesting.

Special thank to http://designreviver.com

Related posts:

1. Create a Vector-Based Zune with Photoshop
2. Create a Simple Navigation with a Horizontal Subnav
3. DIY – Create your own Bokeh

What We’re Making

Step 1: Creating the Background

Since our Zune is going to be a nice sleek back, let’s setup a light blue background that will compliment the black.
Create a new document that is 400×600px. Set your foreground color to a nice light blue (#b5efff) and your background color to a darker blue (#00bef3). Grab your Gradient Tool and drag a radial gradient starting at the top right corner and ending at the bottom left corner of the document.

Make a selection about 125px high starting at the bottom of your document using the Rectangle Marquee Tool. Set your foreground color to white and create a Foreground to Transparent gradient starting at the top of the selection running to the bottom. Then set the layer blending mode to Soft Light.

Step 2: Creating the Body of the Zune

Set your foreground color to black. Grab your Rounded Rectangle Tool which is located underneath the rectangle tool. When a shape is made with the rounded rectangle tool, it is made with a path. The path around the object is what makes the shape a vector. Set the Radius of your tool to 7px and then draw a rectangle that nearly covers your canvas. Then apply the following Gradient Overlay.

Duplicate your rounded rectangle by right clicking on it and selecting Duplicate Layer. Change the color of the rectangle to #1e1e1e by double clicking the color thumbnail in the layer. Enter free transform by going to Edit > Free Transform. Then drag the top, left, and right sides about 10px into the body (each done separately). Now drag the bottom side a good 120px up from the bottom and complete your transform.

Then apply the following layer styles:

Outer Glow

Inner Glow

Stroke

Duplicate your newest rectangle. Go to free transform, and while holding alt+shift, drag the one of the corners inward. Drag it so it is about 10-15px smaller than the previous rectangle. Holding alt makes the transform go to the center of the object and holding shift makes the object maintain its proportions. Change the color to #0f0f0f. Then apply the following Inner Shadow.

Step 3: Adding Highlights to the Body

Since we want our Zune to have a shiny more reflective appearance, like a real one, we are going to add a nice highlight layer. Duplicate your bottom most rectangle, this should be your largest one. Drag it above all of your layers and set the Fill of the layer to 0%.

Step 4: Creating the Pad

Alright, we now have the main body of our Zune complete! The only problem now is that it doesn’t have any buttons on it. We need to add the touch sensitive pad and the buttons that fall on each side.

Set your foreground to black and grab the Rounded Rectangle Tool with a radius of 30-40px. While holding shift, drag a rounded rectangle onto the Zune until it appears to be the correct size. Place it in the horizontal center at the bottom of the pad, but make sure it is closer to the screen than it is to the bottom of the Zune, since it is like that on the real thing. Then apply the following Outer Glow.

Duplicate your previous rectangle. Right click the layer and select Clear Layer Style, which will remove the out glow. Change the color to #070707. Then start a transform on it and hold alt+shift and make it about 2px smaller.

Now apply the following layer styles:

Inner Glow

Stroke

Duplicate your latest rectangle and clear the layer styles like we did before. Change the color to black and make it about 2px smaller.

Once again, duplicate your latest rectangle and clear the layer styles. Make it 2px smaller just like we did before. Then apply the following layer styles:

Gradient Overlay

Stroke

Step 5: Creating the Circular Buttons

Only two buttons to go before we have our Zune!

Create a new layer group by clicking the folder icon at the bottom of the layers panel. Grab the Ellipse Tool underneath the rectangle tool. While holding shift, drag a new circle onto the Zune for the arrow button. Place it to the left of the pad and apply the following layer styles:

Outer Glow

Stroke

Duplicate your previous layer and clear the layer styles. Make it 2-3px smaller and apply the following layer styles:

Gradient Overlay

Stroke

Now that we have the actual button made, lets duplicate it for the other side. Right click your group and select Duplicate Group. Then, while holding shift, drag it to the right side of the pad. Holding shift makes it move in a straight line.

Step 6: Creating the Icons for the Buttons

Now that we have out buttons, we need to create some icons for them. Turn your grid on by going to View > Show > Grid You can change the options for your grid by going to Edit > Preferences > Guids, Grids, & Slices.

Grab your Pen Tool and create an arrow like the one shown below.

Set the fill of the layer to 0% and then add a Stroke. The fill of the layer will change the opacity of the actual pixels in the layer while leaving any layer effects applied to it alone.

Repeat the process for the right button using a triangle and two rectangles.

We Now Have a Vector Zune Graphic!

Place all of your Zune layers into a layer group. Re-size the group to be small and big so that you can see you won’t lose any quality due to the fact that everything is vectorized. Feel free to add a shadow under your final result by creating a new layer underneath your Zune and making a black oval with the Elliptical Marquee Tool and applying a Gaussian Blur.

Download the PSD

Specially thank to tutorial9

Related posts:

1. How to Create Brilliant Light Streaks in Photoshop
2. Create a Simple Navigation with a Horizontal Subnav

You create the perfect site in Photoshop using the latest trends. Half of your backgrounds contain a nice 50% opacity to simulate depth. The only problem comes from that darn old IE6, and how it decides to display a nasty gray background. You try to search the web for a solution, but there are dozens of choices. How do you know which methods are the best?

In today’s screencast, I’ll show you five easy ways to deal with this issue.

No related posts.