Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

October 11 2013

06:30

Google Web Designer: No Less than No More Flash in Banner Ads


  

Google’s newest free project carries a promising title. With a name like that, what would you expect? Will it be a competitor to Dreamweaver or any other classical HTML editor? Well, theoretically you could create HTML content of any purpose. Practically you’ll rather sooner than later return to your former solution. Yet, if you’re into creating banner ad campaigns, Google Web Designer is the place to go.

July 16 2012

13:00

Create an All-Purpose Advertisement Banner in Photoshop

In this tutorial you will learn how to create an advertisement banner in a few easy steps. We’ll take you through the process of creating a banner from scratch in a few minutes. We’ll do our best to make it for general purpose so you could use it to advertise almost any project of yours.

Step 1

One of the most basic and common size for ad banners is: 300x250px. Open Adobe Photoshop and create a new document that’s larger than that. I’ve used a simple grunge texture on gray for the background.

Step 2

By using the Rectangle Tool (U), create a dark gray rectangle. As we said, the rectangle must be 300×250 pixels. Apply an Outer Glow effect to it (#343434).

Step 3

Apply an Inner Glow effect as well. Even if it looks blurry at the moment, the inner glow will be a nice touch to our rectangle when we finish it.

Step 4

We will apply a seamless (transparent) pattern to our shape. We want it to be barely visible, that’s why I’ve set the blend mode to: Soft Light and the opacity to 5 percent. The pattern I used is a part of this set.

Step 5

We’ll finish the rectangle with a stroke effect. It must be 1px in size and darker than the base color of our rectangle.

Step 6

Grab any ornamental vector set you can find on the web. There are plenty of them available for free on the internet, with lots of elements. I used 2 identical ornamental shapes I have found on the web, and placed them accordingly. For our headline, we will use the “Bebas Neue” font, 48px. Apply a drop shadow effect to the headline and to the ornamental shapes as well.

Step 7

Grab the Rounded Rectangle Tool (U), set the radius to 2 pixels and create a shape of 260×125 pixels. Apply a drop shadow effect to it. You’ll have to duplicate the shape two times, and reduce the size of the first by 1 percent and the second one by 2 percent.

Step 8

Input some text by using the “Museo Slab” font (#887e7e). Grab any 16×16 px icons from the IconSweets 2 set and place them accordingly. By using the Line Tool (U), create two subtle lines (#e6e6e6) which will work as dividers for the text strokes.

Step 9

By using the Rounded Rectangle Tool (U), create a red shape (#dc4027). This will be the base for our call-to-action button. Apply a drop shadow effect.

Step 10

Apply a subtle inner shadow effect. Set the opacity to 15 percent.

Step 11

Apply a gradient overlay effect with a soft light blend mode applied. Set the opacity to 35%.

Step 12

Finish the button by adding the stroke effect. Set the Fill Type as Gradient so you can apply a darker red color for the bottom part and a brighter one for the “first half” of the button.

Step 13

Use the “Bebas Neue” font again to input some text on the button. It can be whatever you’d like, i chose “Sign Up”. Apply some drop shadow to the text as well.

Step 14


If you wanted to get PSD file, you can get it right here!:



Finish the button by adding some “hand-written” text under the CTA button. Use “Journal” to achieve that handwritten-like effect. It’s really easy to create the arrow as well. You will have to create any shape, like a slash and then use the “Warp Text” feature to achieve the desired result.

December 21 2011

21:00

4 Simple Steps To Make Silhouettes Using Photoshop

Silhouettes as an art form originates back to as early as 18th century drawing its name from a French minister Étienne de Silhouette who imposed heavy economic cuts on French people. Quite symbolically austere outline portraits which became popular in the same time period started to be referred as Silhouettes.

Silhouettes art had tremendous popularity which has grown over years and is now associated more with images depicting fashion and fitness. Traditional ways of making Silhouettes are somewhat complex which involve cardboard and paints, but thanks to two wonderful inventions of mankind – Photoshop and Wacom things are much simpler now.

In this tutorial I will take you through some beautiful examples for inspiration and then we will proceed to make a silhouette from scratch.

Step 1: Inspiration


Silhouettes in movies
silhouettes in movies

The famous silhouetted image of Elliot and E.T. encircled by the moon depicted in Steven Spielberg’s E.T. It is now a part of the logo of his film and television company Amblin Entertainment.

The second one is of Alfred Hitchcock in American television series Alfred Hitchcock Presents in which he himself appears in a silhouette form in the opening screen and in a number of scenes as well.

Silhouettes as traffic symbols
silhouettes as traffic symbols

The first one is a Japanese railroad crossing signal which uses a silhouette of a steam engine. The second one is from Canada which warns drivers for speeding cameras. The third one is a Swedish moose warning signal, portraying silhouette of a moose, a typical encounter you might experience while driving in Sweden!

Silhouettes of public figures

Silhouettes of public figures
The first one is of English novelist Jane Austen, author of famous titles like Pride and Prejudice (1813) and Sense and Sensibility (1811) . Her silhouette is attributed to 19th century artist Mrs. Collins and is displayed at the National Portrait Gallery, London. The second one is of silhouette depiction of Queen Victoria used as decoration in the London Underground. The third one is artwork of designer Jonathan Mak depicting Steve Jobs on the apple logo, which went viral on the internet few days ago.

Step 2: Sketch


Grab a pencil and a sheet of paper and start sketching your ideas. No need to sketch in detail as we are going to use only the outline for making the silhouette, but make sure that the dimensions and/or anatomy is correct. In my case my client wanted something like a person using a phone. I made a few sketches, and drew a dark outline around them.
Silhouette sketch outline

The first idea depicts a lady walking a dog, looking at her phone. I imagined a background with neighborhood depiction like houses etc. which I can add to the silhouette later on. The second idea is of a guy standing and looking at his phone. In this case I imagined a park or similar setting with street lights etc. as background.

Step 3: Scan


Draw a thicker outline on your sketch and scan it. After scanning I found that the silhouette of the lady with dog appeared better on-screen, so I went ahead with it.

Scan

Step 4: Digitally Enhance


Open up the scanned image in Photoshop (or similar editor) and plug-in your Wacom (or similar device).

a. Outline

Create a new layer, select brush tool 2-3px, and set a contrasting foreground color (like red, so that it visible) and using the Wacom pen outline the image.

Scan

b. Fill the outline with the same color.

Fill silhouette

c. Duplicate the silhouette in a new layer, use the select tool to select the entire silhouette and fill it with #00000. In this step you can zoom into the image and edit minor flaws and smooth the outline with careful movements of the brush.

Select silhouette

Fill and save

If your silhouette consists of two or more elements, it’s easier if you handle them one by one. In my case I divided the task into three – the lady, the leash and the dog. So I repeated step a to c two more times and here is what the silhouette looks now.

So now the silhouette is done, you can save it as a vector and then proceed to using it in a banner or an image as required.

d. As I said before, I imagined the entire picture to be some sort of neighborhood, so created an apartment block and duplicated to make a couple of them for the background.

e. Now add the silhouette to the background

silhouette and background

f. Once the silhouettes and the background is ready, its time to work on the layout of the banner or the final image as required. Since this project was a banner for website I kept width as 900px and height as 357px. The elements that I added in this stage are speech bubbles which contains a specially designed Facebook button for the app and text.

silhouette on banner

The final banner looks like this. The banner depicts a Facebook enabled e-commerce app (www.dragdropshop.com), and will be a part of a sliding js carousel on client’s new homepage.

final banner with silhouette

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...