Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Mark Billen
11th January 2010

Photoshop Week Day 1: Add illustrations to your web templates

09 Reuse the triangles

09 Reuse the triangles

Photoshop Week Day 1: Add illustrations to your web templates

Next, locate the original triangle you created earlier on and hit Cmd/Ctrl+T to size it down a bit. Create a curve of triangles by duplicating them and then simply resizing and rotating. Start to fill the background with abstract blue shapes and setting the blending mode to Overlay or Screen. Adjust the Opacity to around 25%. Make sure these details are noticeable, but still very subtle.

10 Add some wildlife

Photoshop Week Day 1: Add illustrations to your web templates

Open up the bird images (image numbers 257465 and 847050 from www.sxc.hu) and cut using the Magic Wand tool. Navigate to Layer>Matting>Defringe and use the default settings. Press Cmd/Ctrl+T and hold Shift to scale the birds down. We can add subtle shadows with a black brush and a Motion Blur at about 15-20% Opacity. Add a small hat on top of the bird using the Pen tool.

11 Something sweet

Photoshop Week Day 1: Add illustrations to your web templates

Open the lollipop stock (number 1024965 from www.sxc.hu) and crop the white using the Magic Wand tool. Place it on top of one of the shapes and make an oval at the base to give the illusion that it’s in a hole. Add a shadow for the stick and then place them in a line. Hit Cmd/Ctrl+U and select -3 for the Brightness, as each stick becomes more distant.

12 Final details

Photoshop Week Day 1: Add illustrations to your web templates

Continue to add some lighting effects. Put in some circles and shapes in the background on Overlay. Open the piano keys image (928484 from www.sxc.hu) and cut with the Magic Wand tool. Play with the Distort and Warp tools to give it perspective. Add lighting on top using the technique you learned before. Insert any other small details to your liking and keep the techniques you’ve learnt in mind!

13 Finishing touches

step13

Navigate to Image>Adjustments>Brightness/Contrast and set the Contrast to 5 and set Brightness to -2. Under the Adjustments menu again, navigate to Color Balance and set the Blues and Cyans on Midtones and Highlights to 3. Once the final image is merged, select Filter>Sharpen>Smart Sharpen and set Amount to about 13%. Just drop it into your template!


(Article originally authored by Anthony Giacomino, featured in issue 161)


Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

    8 Comments »

    • Lyandu said:

      Amazing!!

    • zygy3 said:

      Cool…..

    • Amita Gandhi said:

      Something new….thanks for sharing….!!!

    • Biju Ambady said:

      Cool effect, pls post more,

      Thanks

    • lyandu said:

      i need to doo this but how!

    • LucasWRR said:

      OMG, what’s it? Amazing mate!

    • Wajid Ali said:

      Amazing……..

    Trackbacks

    What's your opinion?

    Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.

    * Required fields