Have you ever had a hard time designing your own personal website? Thinking of what elements, shapes, font styles will suit your design? Now if you are in the mood to do something new today, I’ll guide you in creating a stylish personal website. We will be using mostly shapes, layer styles, and fonts to create a new personal website. Hope you can follow along with this tutorial. Now let’s get started.

Here is what we will be making, click on the image for full preview:

Step 1: Download Resources

• 960 Grid System
• Twitter Icon
• Social Icons

Step 2: Setting The Document Size

In the Downloads folder or on your Desktop open up “960_grid_24_col.psd”. First we need to change the canvas size, hit CTRL + ALT + C to access the canvas size option and change the width to 1200 px and height to 1500 px. Make sure to be using pixels as your measurement.

We also need to make sure that Rulers and Guide Lines are visible. Go to View and check Rulers, Guide, and Snap.

Now follow these instructions and place New Ruler Guides at:

• Position: 40px Orientation: Horizontal
• Position: 170px Orientation: Horizontal
• Position: 210px Orientation: Horizontal
• Position: 550px Orientation: Horizontal
• Position: 610px Orientation: Horizontal
• Position: 660px Orientation: Horizontal
• Position: 900px Orientation: Horizontal
• Position: 1180px Orientation: Horizontal
• Position: 1455px Orientation: Horizontal

Step 3: Creating The Background

Fill the background layer with #f3f2ee. Now lets add some texture to it, go to Filter > Noise > Add Noise

Step 4: Organizing The Folders/Groups

It is important to make the Folders/Groups organized in order for the developer to easily locate the elements of the site, or for the future redesigning of the site you, as a designer, can easily locate the elements you may want to change.

Create new Folder(s)/Group(s) and name them as shown below.

Step 5: Creating the Header Area

Top Header

Inside the Header folder create another folder and name it Top Header. Now create a new layer and name it thead, make a selection from the first guide starting from the left across to the right fill it with any color for now. Select Type Tool(T) and type text as shown in the screen shot below according to its character settings.

Add this Blending Option to thead layer.

• Inner Glow

• Gradient Overlay

• Stroke

Header

Create another folder inside header folder and name it header. This folder contains these folders: Logo, Latest Tweet, Navigation, and Search.

Create a new layer and name it header_bg. Select Pen Tool(P), make a shape as shown in the screen shot below and fill it with any color.

Add this Blending Option

• Inner Glow

• Gradient Overlay

• Stroke

Logo

It’s time to add our Logo, so grab the Type Tool(T) and type the logo according to its character settings. Color used for the logo #ffffff and #e66324.

Grab the Pen Tool(P) to create that little shape, fill it with #fb824a and label it design using Type Tool(T).

Navigation

Now lets create our navigation, select Type Tool(T), add the following links according to the settings below.

Using the Pen Tool(P) create a shape as shown in the screen shot below that will serve as a hover or active state, and fill it with any color.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

Search

To create the search form first thing we need to do is to select Rounded Rectangle Tool(U), create a shape as shown in the screen shot below and fill it with any color.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

Create another shape now using the Rectangle Tool(U)

• Inner Shadow

• Gradient Overlay

• Stroke

Create another shape for the button.

Add this Blending Option

• Drop Shadow

• Bevel and Emboss

• Gradient Overlay

Using the Type Tool(T) type the following:

Tweet Feed

Time to put up our Tweet Feed. Select the Type Tool(T) type “Tweet Feed:” and a sample latest feed. Also open up the twitter icon and place it beside the text.

I added this Blending Option to the Twitter Icon

Step 5: Creating The Slideshow

The first step is to create a big box using the Rectangular Marquee Tool(M). Change the Foreground color to #282828 and Background to #191919. Now select Radial Gradient and fill the selection starting from the center.

Using the Rectangular Marquee Tool(M) create another shape and fill it with any color.

Add this Blending Option

• Gradient Overlay

Using the Pen Tool(P) create a shape and fill it with any color.

Add this Blending Option

• Gradient Overlay

Now above the two shape layers create 2 layers and name them Light and Dark. Now select the Rectangular Marquee Tool(M) and make a selection and fill it with #ffffff.

Add a Gaussian Blur to the layer, to do this go to Filter > Blur > Gaussian Blur.

Set the layer mode to Soft Light and Opacity to 50%. Now select the Dark layer and create a shape using the Rectangular Marquee Tool(M) and fill it with #000000.

Add the same amount of Gaussian Blur but this time set the Opacity to 80%.

Below the Orange and the Black colors we will add a background shadow. So create a new layer below it, select the Elliptical Marquee Tool(M).

Add a Gaussian Blur Radius: 6px.

Using the Type Tool(T) and the Elliptical Marquee Toll(M) create what is shown in the screen shot below and make sure that it is on a separate layer. On the left side I used 12 pt Arial. On the right side I used 16pt Arial.

The first circle will serve as the hover/active state.

Add this Blending Option

• Inner Shadow

• Inner Glow

• Gradient Overlay

The second Circle will be the next button.

Add this Blending Option

• Drop Shadow

• Bevel and Emboss

• Gradient Overlay

I added a small arrow to the second circle using the Pen Tool(P) with fill color #606163. Duplicate it and move the original layer once using the down arrow key. Also, for the text, I duplicated it and changed the color to #5d5d5. I colored number 1 with #ffffff. With this step it will give the arrow and the numbers an embedded or letterpressed effect.

For this tutorial I will not add any slide images. So it’s up to you to add your own.

Step 6: Creating 3 Columns (About, What I Do and Testimonials)

Inside 3 Columns folder create 3 folders and name them About, What I Do and Testimonials. Now we’re going to add our About information, so select the Type Tool(T) and type your information.

Notice that line. I used Line Tool(U) 3px color #000000.

Read More Button

Create a new folder and name it Read More. Using the Round Rectangle Tool(U) with a radius 5px create a shape and fill it with any color.

Add this Blending Option

• Drop Shadow

• Inner Glow

• Gradient Overlay

Using the Type Tool(T) and the Pen Tool(P) I added ‘Read More’ and an arrow shape. You can just duplicate the arrow shape as we did in our slide show. Again you can use the same technique to achieve an embedded effect, just duplicate each layer. The original layer must move once using arrow key and change the color to #ffffff.

Time to add a separator to separate the text and arrow. Using Line Tool(U), add 2 lines the first line must have a fill #ffffff and the second #aeaeaf.

Nice and sexy eh? Now lets proceed to What I Do.

What I Do

For this step simply duplicate all the elements inside the About Folder and move it to What I do Folder, then change the Heading and Information.

Testimonials

Just duplicate again. I added a 60×60 image and added italic text and aligned it to the right.

Step 7: Creating My Portfolio

In this step we are going to display our best designs. To start select the Type Tool(T) and type “My Portfolio” then add a 3px line color #000000 as shown in the screen shot below.

Now were going to add thumbnails for our design images. Create a new folder and name it Thumbnails. Now what you’re going to do is create a new file (CTRL + N) 210 x 150 in this file you’re going to create 4 thumbnails with your chosen images. When you’re done drag it to our canvas and place to the Thumbnails folder.

I added a Stroke to each thumbnail.

Now were going to add a Client Name and Website URL below each thumbnail. So, select the Type Tool(T) and type some dummy text.

Last thing we’ll do for the Portfolio section is add a previous and next button at the right top corner. Select the Shape Tool(U) select an arrow from the list of shape and fill it with #362f2d.

Step 8: Creating The Footer

Inside the Footer folder create a new layer and name it footer_cont. Now select the Rectangular Marquee Tool(M) and create a big rectangle selection from the guide. Set the Foreground color to #151515 and Background to #212121. Select Linear Gradient(G) and drag starting from the bottom up to the top of the selection.

Add this Blending Option

• Inner Glow

• Stroke

We will divide our footer area into four columns, so inside the Footer folder create 4 folders and name it Explore, My Services, Latest Frog The Blog and Stay Connected. Lets work first on heading titles. Using the Type Tool(T) type your heading.

I added a drop shadow in each header

Add this Blending Option

• Inner Glow

Explore

Lets work on Explore folder. Using the Type Tool(T) type create another section heading for Explore.

My Services

Here I used the same character settings but with a different color. Use this color for the text #c3b7a4. I colored it differently so that services is more noticeable than the others.

Latest From The Blog

Here we showcase the 3 most recent article from the blog. I styled it using numbers to make it unique and avoid redundancy of styles.

Stay Connected

Time to open up the social media icons and place them on the canvas. Place it correctly with proper spacing. On this part don’t add a divider :)

Step 9: Creating The Footer Copyright

Make a selection in the remaining white space area in the bottom and fill it with any color.

Add this Blending Option

• Inner Glow

• Gradient Overlay

• Stroke

Time to add your copyright text, so select Type Tool(T) and type in with correct character settings.

Finally we’re done! I really hope that you have learned something from this tutorial that can be used for your future projects. If you have questions just drop it below. Thank you and please don’t forget to subscribe.

Final Preview

Learn how to create a slick looking web 2.0 website banner / header!

First step off course is to create a new file for you to make your design. Go to File > new or

simply press Ctrl+N. Choose your size, depending on your own preferences and hit ok.

Size used here is 600×147 pixels.

Now think on what colors you wish to use as background and pick out two shades of it to make into your background.

Two shades of blue were used here. Our foreground color was set to #10365a and the background color to #2070bf.

Then take out the gradient tool ( ) and pick the foreground to background, linear gradient.

Now simply drag your gradient on the layer, going from top to bottom.

Add a new layer and think where you’re going to place the navigation links. Make a rectangle there with the

rectangular marquee tool ( ) and fill the selection with white.

Change this layer’s blending mode to soft light and lower the fill to 25%.

Now to add a seperator inbetween your links. Create a new layer and using the rectangular marquee tool again,

make a one pixel selection on this layer.

Remember the colors we used on the background? We’re going to use the same, just in opposite order.

So set your foreground to #2070bf and your background color to #10365a this time. Then use the

Foreground to background, linear gradient again to drag a gradient in the selection, from top to bottom. This will be your seperator.

Change the blending mode of this layer to soft light, to make it blend in better.

Press Ctrl+J to duplicate this layer. Do this according to the amount of navigation links you want to place.

Then simply move them into position.

On to adding some detail to the navigation. Make a new layer and use the rectangular marquee tool to make a

selection inbetween two seperators. Then we will fill this selection with a color. First color used here is #60c100.

Now we must repeat this step for every seperator space. To make sure you have the exact same size each time,

simply duplicate this layer and move to the next space. Then Ctrl+click the little image in front of the layer in your

layers window palette. This will make a selection of the rectangle. Then just use the paint bucket tool ( ) to fill it with another color.

Color used this time is #f80000.

Repeat this step, color used this time is #feb70a.

And do it again. Last time here and the color used was #d200ff. Offc ourse, if you have more links and thus more seperators, you

simply add in some more colors.

Next step is to add a border, to spice up our header/navigator some more. Therefore, add a new layer and do the following.

Use the rectangular marquee tool to make a selection in the bottom of your header. Fill that with a color matching

your background. So a dark blue was used here (#03346c).

Add a new layer and take out the pencil tool ( ). Set your foreground color to something that matches your other colors.

Ours was set to a light blue
(#7dbfff). Then draw a one pixel line just above the rectangle we created in the previous step.

Duplicate this layer by pressing Ctrl+J and drag it to the top of the navigation then, just above your colored boxes.

On to the text. Make a new layer and take out the text tool ( ). Pick a nice font and type in the title of your site in the open space

on the left. A font called ‘Century Gothic’ was used here and should be a default font on windows Xp. Use whatever

color you’d like, plain white was used here.

Then add a subtext if you wish. Do this on a new layer and off course, make the size smaller. A font called ‘Silkscreen’ (download)

was used here. Again, in plain white.

Then add your navigational links on a new layer. Again, the font ‘Silkscreen’ was used, in plain white.

Final steps will be to add the images that represent the links. You can either create them yourself but there are many

sites where you can download some nice looking images.

All the images used here came from famfam.com.

So, first image is the home image here. Open it and paste it onto a new layer. Then move it into position.

Do the same for the search icon,

the forum icon

and for the contact icon. If you have any additional or other links, I’m sure you’ll find some nice icons on that site.

And now you should have a nice and slick, blue navigation.

This tutorial was written by Sanity penguin, I hope you’ve enjoyed it.

In this tutorial you will be shown how to design a website banner

Step 1.

Okay, so let’s get this started. First of all make new document, by going to File -> New or simply click ctrl+N. Choose your size depending on your templates size where you are making this for. Size used for this banner is 600×120 pixels. Set the Background Contents to Transparent.

Step 2.

Select rectangular marquee tool () from the tools menu. Now put the style of the tool to fixed size and select area of 729×63.

Select the area from the top of the first layer of the new document.

Now use gradient tool () and add gradient from olive green (b4c845) to little lighter green (cade33). Make the darker part coming from top.

Simply drag the darker color coming from the up and make this gradient just for the selected area.

Step 3.

Select again retangular marguee tool () and select area of 42×42.

Use the size of 42×42 and select area from the next layer. Use color between red and brown (c65b3f) and make square of selected size. Then press Ctrl + T and rotate it. Then add Stroke layer to it, with 6pxl stroke and select white color. Then add little drop shadow to it with default settings.

Step 4.

Make new layer and repeat that last step, but now make square of gray color (7b7b69). Move it to right side of the previous square.

Step 5.

Now repeat that step again to a new layer. Use retangular marquee tool, make the square, rotate it, add stroke and drop shadow. Just like in the 3rd step. Now use color of olive (8b9c2e). Move this square right side of the last made one.

Step 6.

Again repeat that step once more. This time use color of yellowish (d8da2b). Again move this right side of the last made square.

Step 7.

Duplicate the first layer, where you made the gradient map to half of the banner. From the layers panel move the duplicated layer to top and move it to fill the bottom of the tag, so half of the squares will be hidden.

Step 8.

Use horizontal type tool () and make texts under the half squares. So the squares will be the buttons. Use font called Silkscreen expanded. Modify the blending modes of the text layer.

Now it should look something similar to this

Step 9.

Next create a bar of 2pxl wide. Set the left side color to black and right side color of white, so there will be 1pxl of both colors. Make each of them between the squares.

Use lasso tool () and select area around the bar, add some feather from the options.
Add vector mask () from the layer window (If your layer window isn’t open, open it from Windows – Layers), then lower the fill of this layer to 41%.

Step 10.

Select rounded retangle tool () and make white rounded shape to the empty spot of the banner. Use white color.

Edit the blending options now and add first drop shadow using this settings:

After that add gradient overlay using these settings:

Now it should look something similar to this:

Step 11.

Use next the horizontal type tool again, and lets add some text to the shape we just made. In this banner the text what was used is Century Gothic. Color of the font is gray (6a6a6a).

Step 12.

This is the final step. Now duplicate the text layer and flip the duplicated layer by Edit – Transform – Flip Vertical. Then move it down to under the original “SigTutorial” text. After that edit the fill of this layer and lower it to 0%. Then add gradient overlay to blending options like this:

Then your final outcome should look similar to this:

The tutorial was written by Haapa. Hope you enjoyed it and learned something new!

I needed to make a big button which gave the illusion of being pressed in when a user hovered the mouse over it for a client. As always, I reached for my copy of Photoshop and started to play. 3 hours, 2 cigarettes and 1 mixed fruit smoothie later I came up with an image that worked, and the code to go with it.

The Image

Ok, to start with we need to make an image in two different states. State number one will be the natural state and state number two will be the hover state.

1) Begin by creating a new document in Photoshop using the following settings.

For this example I am going to fill the background layer with a dark blue (#0B415F), but feel free to experiment.

2) Create a new layer called ‘Button’ and with the ‘Rounded Rectangle Tool’ draw a rectangle path that fills the canvas. Then click on the ‘Paths’ tab in the layers pallete, right click on the rectangle path you just created and select ‘Make Selection’ from the dropdown. You can now delete the path you created.

3) With the selection you just created still highlighted, select your ‘Gradient Tool’ and input the following settings (left-colour: #003D5B, right-colour: #00547E).

4) Make sure your button layer is selected and using a linear gradient, drag from the bottom of the selection to the top and deselect. You should now have something that looks a little like this.

5) Now we need to make it look pretty! Right click on your ‘Button’ layer and select ‘Blending Options.’ In the window that opens, select ‘Bevel and Emboss’ and input the following settings.

6) With a little luck, you should now have something that resembles this

7) Save this document as button.psd. Now, go back to your bevel settings and invert the bevel direction as shown below.

Save this document as hover.psd. You should now have two buttons like this

9) Now it’s time to pimp them to your liking. I used some text and an icon to create these.

The Code

Now that you have your images ready to go, we need to integrate them into your website. I used the following code, but there are various ways to achieve this same effect.

CSS

XHTML

The Result

Voila! A Press in button. See it in action on this test site

In today’s tutorial we’re going to teach you how to make a modern, sleek and creative navigation menu.
There’s a lot of things going on in here. You will learn how to add depth into text and other small shapes, create a 3D shape the easy way and apply gradients to get a realistic lightning.
The techniques learned throughout this tutorial can be applied in many more ways and are definitely worth learning.

So let’s get started right away.

Result Preview:

Step1

Create a new file of 1000px wide and 400px wide

Step2

Select the ellipse tool

And draw a flat ellipse like so:

If you’re unsure about what size you’re going with, try making it about 22.5 wide and 3.7 high. You can see this by opening the Info menu located under Window>Info or by pressing F8

Step3

Double click this layer with the shape in order to get the Layer Style window.

Add a Drop Shadow:
Blend mode: Normal
Color: White
Opacity 75%
Angle 90° – Deselect “Use Global Light”
Distance: 0px
Spread: 0px
Size: 5px

Add an Inner Shadow:
Blend mode: multiply
Color: black
Opacity: 100%
Angle: 90° – Deselect “Use Global Light”
Distance: 0px
Spread: 0px
Size 61px

And finally add an Inner glow:
Blend mode: normal
Opacity: 75%
Noise: 0%
Color: White
Choke: 9%
Size: 90px

Step4

To prevent ourselves from any clutter, we’re going to rename the layer we just edited. Double click on the name and rename it to “Top”.

Step5

Make sure the layer is selected and press ctrl+J (Windows) or cmd+J if you’re on a Mac.

This will duplicate the layer, now make sure the new layer is selected and press V to access the resize tool.
Hold Alt+Shift and drag one of the corners until you get something like this:

You might want to make the height a little bit smaller by holding Alt and dragging the upper or lower nod up or down, just a few pixels.

Step6

Rename this new layer to “Dark Center”

Step7

Double click the Dark Center layer and add the following styles:

Drop Shadow:
Blend mode: Normal
Color: white
Opacity: 75%
Angle: 90° – Deselect “Use Global Light”
Distance: 1px
Spread: 0%
Size: 2px

Inner Shadow:
Blend Mode: Multiply
Color: Black
Opacity: 75%
Angle: 90% – deselect “Use Global Light”
Distance: 1px
Choke: 0%
Size: 2px

Gradient Overlay:
Select “Reverse”
Style: Reflected
Angle 96°
Color: from #3d3d3d to #5b5b5a

Step8

Now we’re going to create the bottom part of the navigation, you could do it with the pen tool, that’s the hard way. But let’s just duplicate the Top layer so often that it becomes the same shape.

So select the Top layer, hold Alt and press the down arrow about 25 to 30 times. (I prefer 26)

Select all these layers that you just produced by clicking the one at the top, scrolling down in the layer menu and hold down shift and then click the first copied one (NOT the original). Then press ctrl+E to merge all those newly created layers.

Now you should have 2 layers, drag the “Top” layer above the copied one.

Step9

Now for our own ease, we need to remove the part we don’t see.

To make things less confusing, name the new layer to “Nav Bar”.

Then click Ctrl+click (cmd+click on Mac) the grey image of the “Top” shape layer.

It looks like this:

The ellipse will be selected, now go to the “Nav Bar” layer and hit Delete or Backspace to erase that area on just this layer. You can double check if it worked by hidding the “Top” layer (just click the little eye icon next to it).

Step10

On the “Nav Bar” layer we’re going to add a layer style.

Gradient Overlay:
Color: From #414141 (at Location 0%) to
#737474 (at Location 15%) to
#adadad (at Location 50%) to
#737474 (at Location 85%) to
#414141 (at Location 0%) to

Step11

Now duplicate the “Top” layer once again, but just 1 time by pressing Ctrl(or cmd for Mac)+J.
Move this layer all the way down, just above your background layer.
Move it down by pressing V for the right tool and then holding Shift and pressing the down arrow 8 to 9 times (I prefer 8).

Step12

Remove all the Layer Styles of the copied layer and only add a Color Overlay that’s totally black.

Rename the layer to “Shadow”.

Step13

Make sure your Shadow layer is still selected and go to the Filter menu>Blur>Motion Blur.

A window will pop up asking you if you want to rasterize the layer, press OK.

A new window with the settings will come up, change the Distance to 123 pixels.

You should have something close to this now:

As you might have noticed, the shadow is till a bit hard, especially at the bottom.
We start making it better by turning the Opacity of the Shadow layer to 75%

Step14

Pick the Blur Tool

and use the following Brush Settings (right click):

Make sure the “Shadow” layer is still selected and wipe over the bottom area about 5 times up to 10. The edge should look slightly softer now.

Step15

Create a new layer above all the other ones and select the Text Tool (T)
Type in the name you want and place it in the center of the black ellipse.
Avoid lowercase typing, because letters like g p and so on will break the effect.

Step16

We’re going to add a few layer styles to the text.

Gradient Overlay:
Angle: 90°
Color: From #afb0ad to #e2e4dd

Stroke:
Size: 1px
Opacity: 82%
Color: White

It should look something like this:

Step17

Select the text layer, duplicate it by pressing Ctrl+J (or cmd+J) and drag the new layer below the original one.
Remove all the effects and make sure the text is black.

Step18

Move the text down 1 time with Shift+Down Arrow.
Add Filters>Blur>Gaussian Blur with 4pixels radius.

Make the layer’s opacity 75% for a smoother look.

Step19

Select the “Top” layer and press V so you see the nobs.
Also make sure your Rulers are visible (View>Rulers or Ctrl+R/cmd+R)
Now drag a Guide from the left ruler right on the middle of the ellipse, you can base yourself on the nobs. In CS4 it might even snap to the right place even if the nobs aren’t 100% below it.

Step20

Duplicate the “Navigation Bar” layer.
Pick the Rectangular Selection tool and drag a random sized rectangle that hits the Guide. Make sure the bottom and top part are selected. Something like this:

Now go to the Select menu>Modify Selection.

Nobs will show up and you can now position the rectangle to the center. Now hold Alt and drag at the left or right nob to get a selection about twice as big as we just started with.

Hit Enter and make sure the “Selection” layer is selected. Now press Ctrl+Shift+I to invert the selection and press Delete or Backspace to remove it.

It will look weird and confusing for a second, but just go on and let’s restyle the layer:

Gradient Overlay:
From #87c540 to #c9da2b

Apply Stroke
Stroke: 1px
Opacity: 16%
Color: Black

Step21

Create a new layer above the “Selection” layer.
Pick the Rectangle Tool (U)

And draw a tiny rectangle like this:

Press V and turn the square 90° by holding Shift and draging from right next to a corner nob.
Also place it right in the middle of the guide and move it to the top of the “Selection” layer so you only see the bottom triangle of the square, like this:

Step22

Now let’s add some Layers Styles again:
Drop Shadow:
Blend mode: Multiply
Color: Black
Opacity: 55%
Angle: 90° – deselect “Use Global Light”
Distance: 0px
Spread: 0%
Size: 5px

Gradient Overlay:
From #2f2f2f to #868686

Step23

Create a new layer on top of the rectangle one and pick the Text tool.
Search a bit what font size you need, many fonts require a different size to fit the “Selection” box.

To this text we’ll add some effects once again.

Drop Shadow:
Blend mode: Normal
Color: White
Opacity: 75%
Angle: 90° – deselect “Use Global Light”
Distance: 1px
Spread 0%
Size: 1px

Color Overlay:
Color: Black

Now the finishing touches. We’re going to add some arrows at each side.
The good thing is that Photoshop has this shape in it’s database!

Step24

Create a new layer at the top and preferably call it “Arrow”.
Pick the Custom Shape Tool (U)

At the top navigation menu of Photoshop you can choose the shape, we use “Arrow 2”.

It might happen you don’t have all these shapes, just click the small play button at the right and pick “All”

Step25

Now draw such arrow at the right side of the “Selection” box.

We’re going to add some effects for the last time now:

Drop Shadow:
Blend Mode: Normal
Color: White
Angle: 90° – deselect “Use Global Light”
Distance: 1px
Spread: 0px
Size: 1px

Gradient Overlay:
Select Reverse
Color: From #3c3c3c to #2a2a2a

With the layer selected press ctrl(or cmd)+J to duplicate.
Press V and then Shift+Right Arrow 3 times.
With the arrow selected go to Edit>Transform>Scale

Then at the top navigation of Photoshop you can redefine the width and height. Change both from 100% to 80% and hit Enter.

Select both the arrow in the layer menu by holding Ctrl or cmd.

Now we need to duplicate them, because it are 2 layers we can’t press ctrl+J.
So just drag the 2 down to the New Layer button.

With these 2 duplicated layers still selected go to Edit>Transform>Flip Horizontal.
Press V and move them to the left with the Shift key and the arrow keys. It wont fit perfectly, so release the Shift key some times.

That’s it!

Result: