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:

Hey, here’s something that might interest you:

How to create a sparkle effect in Photoshop?

How to create a rainbow effect in Photoshop?

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!

Hey, here’s something that might interest you:

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape

CSS EASTER EGG ANIMATION

CSS Christmas Tree Animation