Posts Tagged "interface"

This time we will be making this banner which will suit ideally for any special Xmas promotion, deal or shopping offer..

So, let’s get started. Create a canvas 468*60 pixels, assuming you want to make a standard size banner.
Choose the gradient tool, and fill the selection with mild gradient between #cdcdcd and #ffffff

Make sure the white will end up on top of the banner, so that you will get this gradient background to start with. Next, make a new layer, and select the entire canvas. Right mouse click to get a quick menu and choose “stroke”.

Draw a 1px line. We used #b1b1b1 but this may depend on your colours scheme.

Select an elliptical shape and draw a circle when the canvas is de-sized, so that you will only get a curved third of the banner segmented out.

While the ellipse you just drew is selected, go to Layer >> Layer Styles and set the following settings.

The shades of red are not particularly important, as it would depend on your personal preference. We used #ca0701 for the overlay in our example.
Next, get some Xmas clip art.

We pulled the candy PNG icon, which you can download free at IconDrawer. (DON’T use the image above, it’s just an example, download the PNG as it has no background). Drag the icon (biggest you can get) unto your canvas, and place it exactly over the line, so that the candy and the ribbon will cover the separation line.

While the icon is selected, make sure this layer is placed under light gray frame that surrounds the banner. Go to layer >> layer styles >> options, and apply a light grey shadow, to give the icon more depth.

We will be making a texture that imitates the expensive green granite stone. This will be your final result:

Create a new layer, we decided in 150*150 px, but it really is up to you. Fill it with the white colour.

Go to Filter >> Noise >> Add Noise, and add amount of noise as shown on the picture below, as “Gaussian”.

After this, go to Filter >> Sketch >> Chalk & Charcoal, and apply settings as shown on the picture. Be sure to adjust the stroke pressure, to give the image more “depth”.

Click OK. Now your image already looks a bit like an old stone, but we won’t stop here, we will go ahead and polish it.

Go to Image >> Adjustments >> Levels… and move the black and white arrows closer to the center, so that they will be “in range” of the main level curve. If you are not sure, just copy the numbers from the screen shot below. I wouldn’t recommend skipping the level correction as it gives the texture a lot more natural contrast and depth which simple contrast adding and brightening cannot achieve.

This tutorial will teach you how to create a stylish and eye-catchy Surfing Fashion Label Tag. As I live in a country where surfing is quite popular, I can confidently assure you that surfing fashion is different from other fashion brands, you will never mix a surfing fashion store with any other, both by color and style, so let’s get started..

Step 1.

Pick a photo with a surfer. We picked a surfer girl (original photo by Chris Aschenbrener), and since our photo did not have a very strong contrast, we modified the levels a little bit.

Step 2.

Now we want to add sun rays that “shine” from the main character or figure. So create a new layer, and using the  custom shape tool, select the shape called “Registration target 2″ (comes default in Photoshop), draw a circle as shown on the image below.

T styles I previously posted and added a bit of a gloss. That’s all. The feed shape itself was a bit tricky but like I said, it didn’t take long at all. In the zip folder you will find 3 icons without shade and 3 with shadow (as you see on the previous picture, all in PNG format against transparent background so they are more than read-to-use. Hope you like them!

FREE DOWNLOAD (124 kb)

There are so many tutorials and guides online that teach you how to make effective use of the web 2.0 design. While most these tutorials are useful, at the same time they kill the originality in web design. For example, most “guides” tell you that web 2.0 is about having a glossy badge, stripes background, and bold fonts. Result? There are countless hundreds of designs with badges, stripes and bold big letters… and they are no different from one another. It does not matter if you make a web 2.0, web 1.0, or web 75.0 design, it all comes down to being original and memorable.

However, if can’t really find anything particularly original to symbolize your design, it’s “safer” to go with the current trends of web design. So here is a very small fragment of web design layout, and how to turn a regular layout into a web 2.0 layout.

This is what we had…

And this is what we are going to do…

We are going to work in Photoshop, using nothing but layer styles; focusing on mild gradients and shadows.

Start off by using the Rectangular shape with rounded corners, and drawing a… rectangle.

What we need to do first is give our rectangle some depth and life. Following the principles of web 2.0 design, only shadows, outlining and light gradients will give us this effect. So go to layer styles, and drop a little mild shadow. We used #96aed6 for this purpose.

To give the shape a little depth (so it won’t look like a flat object), add mild inner shadow, with darker tone (we used #304f82 )

Lastly, its important to add a little outlining. We will use the #FFFFFF white color, since our shadows from both sides are darker, we want to have a light and semi visible line that will contour the shape.