Customizable Easter Egg

Adobe Photoshop Tutorials :

Category: Adobe Photoshop Tutorials
Added: 04/07/2007
Views: 159,414

Design a Custom Easter Egg

Web 2.0 Easter Egg

Tutorial Goal

Create a versatile 'web 2.0 style' Easter Egg in Adobe Photoshop. The technique allows for easy color, decoration and shape customization. The silver style is great for many applications beyond the Easter theme used in this tutorial.

Step 1 : Document Setup

Open Adobe Photoshop and Create a new Image:
Size: 310 x 370px
Background Color: 2F83C3

Step 2 : Creating the vector egg shape.

Using the Elipse Tool, Elipse Tool, draw an elliptical shape on stage. It will not be perfect at first.
The trick is to use the Direct Selection Tool, Direct Selection Tool, to adjust the curve points.

Click the top curve point and pull both handles in to make the egg more pointed.

Click the right and left curve points and drag them straight down until your satisfied with the shape.

Vector Egg

Step 3 : Making the soft silver style.

Right click your vector egg layer, select "Blending Options" and apply the following settings.

Outer Glow : Makes the silver appear to radiate.

Egg Outer Glow Settings

Inner Glow : Helps the 3D effect and simulates reflection.

Egg Inner Glow Settings

Inner Glow - Contour Editor : Drag the nodes to create the curve below this creates highlights and shadowing.

Egg Gradient Overlay Settings

Gradient Overlay : Solidifies the egg and provides the silver color.

Egg Gradient Overlay Settings

Gradient Settings : For silver use below settings or change to suit your tastes.

Egg Gradient Settings

Step 4 : Creating the egg shine.

Ctrl/Cmd click the vector egg layer to select its contour.

Select the Easter Egg

Select the Elliptical Marquee Tool, Elliptical Marquee, and Alt click and drag a Oval to subtract. See below:

Subtract from Egg

Create a new layer, Create New Layer, and Fill the selection in with White then reduce it's Opacity to 20%.

Reduce Opacity

The Shine should look similar to:

Easter Egg with Shine

Step 5 : Customizing your Easter egg.

Ctrl/Cmd click the vector egg layer to select its contour.

Create a new layer, Create New Layer, and add a Mask layer, Add Mask Layer, then disconnect the link between the Mask and the layer by click the link:

Unlink the Layer from Mask

Now on this layer you can customize the design of your Easter Egg and it will not extend beyond the egg. Below I changed the gradient settings and then painted flowers across.
Hint: Reduce the layer opacity to make it appear to be on the egg.

Customized Easter Egg

Concluding Statements

Hope you have fun modifying the egg design and colors. You might consider saving the silver style to apply to future interface elements, it is very versitile. Try altering the vector shape to see what I mean. Happy Easter!

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Customizable Easter Egg" tutorial. View more of my tutorials here.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Web Development : University Department UMaine ECE Departmental Website Design

University Department
Academic Website Redesign

Print & Graphic Design : CD Design Booty Blues CD Art

CD Design
Eddie Kirkland, 2005

Print & Graphic Design : Logo & Business Card Design Credit Union Insurance

Logo & Business Card Design
CUinsure Branding


"I have worked with Max Langdon for almost five years. Max is not only a talented web designer and programmer, but he has an added quality that I find quite rare. He is able to really listen to and understand the client's vision. He asks excellent questions that help you zero in on exactly what you are trying to accomplish. This helps you clarify your goal and allows Max to think through the scope and sequence of the process before beginning to program. This saves him time and saves you money.

Working with Maxwell Langdon and his company, Pixel Hive has been a pleasure. I have always found him to be responsive and helpful. There is no "attitude" when you ask for an explanation or guidance.

I would be happy to speak with anyone who is thinking of working with Max. "

- John Burstein, Slim Goodbody Corporation, Lincolnville Center, ME
View More Testimonials

More Tutorials!