Categories
Photoshop

How to create an Easter Egg in Photoshop?

Easter Egg in Photoshop

Follow the steps below and watch the video tutorial:

Step1.

CREATE AN EGG SHAPE

Fill the background of any colour you like (colour used in the tutorial: #fffffc). Use the Ellipse Tool and draw a circle. Fill the circle of any colour you like.

Easter Egg in Photoshop

Go to Edit–>Transform–>Wrap.

egg shape in Photoshop

Click on the top of the circle and holding the button move the mouse up:

egg shape in Photoshop

Step2.

ADD EGG PATTERN

Create the new layer. Use Pen Tool and draw kind of broken shell/ zigzag shape.

egg in Photoshop

Right click on the path and select Make Selection…

easter egg in Photoshop

Press Shift+Delete (in Mac OS) to fill the path (used colour in the tutorial: #fefae0). Use the Pen Tool again and draw a similar path on the top of the egg. Fill the path.

easter egg image

Create a new layer. Draw a triangle shape by using the Pen Tool in the middle of the egg. Fill the triangle (used colour in the tutorial: #ef6f51):

easter eggs in photoshop

Create a new layer. Draw a second triangle shape by using the Pen Tool on the top of the first triangle. Fill the triangle (used colour in the tutorial: #f4a261).

Create a new layer. Use the Ellipse Tool and draw two flat circles:

easter eggs

Create a new layer. Use the Ellipse Tool and draw two circles (used colour in the tutorial: #ffb4a2):

easter egg photoshop

Create a new layer. Use Rectangle Tool and draw a square. Fill the square (used colour in the tutorial: #f2cc8f). Drag this layer at the bottom of the Shell/ Zigzag path.

easter egg in photoshop

Hide the background and the egg layer by unticking the eyeballs in the layer panel. Right-click on the Rectangle layer and select Merge Visible.

egg in Photoshop

Make an egg layer visible (click on the eyeball).

Create Clipping Mask: Hold down Alt (Option in Mac OS), position the pointer over the line dividing two layers(rectangle layer and the egg layer) in the Layers panel (the pointer changes to two overlapping circles), and then click.

easter egg

Merge the visible layers:

easter egg in photoshop

Step3.

SHADOWS

Change the colour of the background (used colour in the tutorial: #8ecae6). Use the Ellipse Tool and draw the flat circle in black:

In the Layers panel, reduce the opacity of the circle to 20%:

easter egg in photoshop

Right-click on the rectangle layer and select Blending Options…:

Tick Inner Shadow and set the opacity to 40% and the Blend Mode to Multiply:

Easter Egg

Easter Egg is ready!

Easter Egg in Photoshop

Watch also the video tutorial:

Categories
Adobe Illustrator

How to draw Easter eggs in Adobe Illustrator?

To create simple Easter Eggs in Adobe Illustrator follow the steps below and watch the video tutorial.

Easter Eggs Adobe Illustrator

Step1.

DRAW AN EGG

Create the new file. Use the Ellipse Tool and draw the circle. Choose the colour you like (colour used in tutorial #90be6d).

drawing Easter Eggs tutorial

By using the Direct Selection Tool select the top of the circle:

draw the easter eggs in adobe illustrator

And stretch a bit the top part of the circle by pulling the top of the circle up. We’ve got an egg shape!

egg shape in adobe illustrator

Step2.

ADD SHADOWS TO THE EGG

In the layers panel, duplicate the egg path twice.

easter eggs vector image

Move duplicate paths aside and put one on another. Select the duplicate paths by using the Selection Tool:

easter eggs

Go to Properties panel on the right side of the screen and click on –>Pathfinder—>Click to Exclude option.

Easter eggs adobe illustrator

By using the Direct Selection Tool remove the top part of the new shape. Go to Properties panel. Change the colour to black and reduce the opacity to 20%.

Fit the new shape on the egg path:

egg shape adobe illustrator

By using the Ellipse tool draw the flat ellipse on the bottom of the egg shape path:

draw an egg shape in adobe illustrator

Go to Properties panel on the right side of the screen and reduce the opacity of the new shape to 20%.

Right-click on the new shape and go to Arrange and select Send to Back, to move the shape under the egg.

easter egg

Select the egg and shadow by Selection Tool. Go to Edit on the top of the page and select first copy and then paste. Copy the selected shapes twice and put them in line.

eggs in adobe illustrator
draw the eggs

Step3.

DECORATE EASTER EGGS

STRIPES

Duplicate the egg path and move aside:

draw an easter egg

By using Ellipse Tool draw three flat ellipses on the new egg path. Choose any colour you like (used colour in the tutorial: #f9c74f):

decorating easter eggs in adobe illustrator

Select all the new paths and click in the Properties panel on the right side of the screen—>Pathfinder—>Click to Exclude.

decorating an easter egg in adobe illustrator

By using the Direct Selection Tool remove unwanted parts of the new shape.

egg decoration

And fit the new shape to the first egg then right-click on the shadow path and go to Arrange–>Bring to Front. The first egg is done!

easter egg stripes

DOTS

Change the colour of the second egg (colour used in the tutorial: #f0716f):

dotted easter egg

Use the Ellipse Tool and draw small circles all over the second egg (colour used in the tutorial: #fdfcgc) then right-click on the shadow path and go to Arrange–>Bring to Front. The second egg is done!

STARS

Change a colour of the third egg (colour used in the tutorial #00afb9):

stars egg decoration

Duplicate the third egg path:

easter eggs

Move the duplicate path aside. Use the Star Tool and draw the stars all over the new egg path:

star tool adobe illustrator

Go to Properties panel–>Pathfinder—>and click on Click to Minus Front.

star tool

Change again the colour of the third egg (colour used in tutorial #fdfcdc) and fit the new shape to the egg then right-click on the shadow path and go to Arrange–>Bring to Front. Done!

easter eggs in adobe illustrator

Watch also the video tutorial:

Categories
CSS Web development

CSS Egg Shape and CSS Easter eggs

Easter is coming very soon and with the Easter coloured eggs. I love coming up with new Easter egg decorating ideas each year 🙂

CSS Easter Eggs
*to see the CSS Easter Eggs on the website click here.

Coloured eggs have become one of the most widely recognized Easter symbols, but did you know that coloured eggs are older than Easter?

Yes, in many cultures, the coloured egg is a symbol of new life fertility, and rebirth.

Today I’ll show you how to create the Egg shape in CSS using the border-radius property and some simple ideas how to style the CSS eggs.

Let’s start with the CSS Egg Shape:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>

.egg {
   position: absolute;
   width: 140px;
   height: 200px;
   background-color: lightblue;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>

<body>
   <div class="egg"></div>
</body>
</html>

Output:

CSS Egg Shape

To style/ decorate the CSS eggs I used the CSS Gradients (check also CSS background stripes) and the CSS box-shadow property.

Demo:

Step1.

Add HTML

Create the container and add three eggs:

<div class="container">
  <div class="eggOne"></div>
  <div class="eggTwo"></div>
  <div class="eggThree"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  background-color: #bee3db;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.container {
  position: relative;
}

Add the eggs:

.eggOne, .eggTwo, .eggThree {
   position: absolute;
   overflow:hidden;
   display: inline-block;
   width: 126px;
   height: 180px;
   box-shadow: inset -10px -10px rgba(0,0,0,0.1);
   top:-100px;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Style the first egg by using the linear gradient background:

.eggOne {
  left:-300px;
  background: repeating-linear-gradient(#f9c74f, #f9c74f 10px,
  #90be6d 10px, #90be6d 20px);
}

Style the second egg by using box-shadow property:

.eggTwo {
  left:-100px;
  background-color: #f94144;
}

.eggTwo:before {
  content:"";
  position:absolute;
  border-radius:50%;
  background-color: #fff;
  height:25px;
  width:25px;
  left:10px;
  box-shadow: 40px 20px #fff, 70px 60px #fff, 100px 30px #fff, 30px 175px #fff, 20px 60px #fff,-10px 95px #fff, -20px 135px #fff, 30px 135px #fff, 30px 95px #fff, 70px 105px #fff, -10px 40px #fff, 80px 155px #fff;
}

.eggTwo:after {
  content:"";
  position: absolute;
  box-shadow: inset -10px -10px rgba(0,0,0,0.02);
  width: 126px;
  height: 180px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Style the third egg by using the linear gradient background:

.eggThree {
  left:100px;
  background: repeating-linear-gradient(-45deg, #70c1b3, #70c1b3 20px,
  #247ba0 20px, #247ba0 40px);
}

Add shadow to the eggs:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  border-radius:50%;
  z-index:-1;
  width:130px;
  height:20px;
  top:65px;
  left:-300px;
  box-shadow: 200px 0 rgba(0,0,0,0.1), 400px 0 rgba(0,0,0,0.1);
}

To see the CSS Easter Eggs on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!