Best Photoshop Tutorial to Create Interweaving Photo-Strips Effect

Photoshop is an amazing platform that is used in many aspects. You can design 3D Images, Wallpapers, 3D simulation models, HD Wallpapers for your desktop, even you can give thousands of different, beautiful and unique effects to Photos.

Interweaving Photo-Strips Effect

Our today's tutorial is based on creating amazing effects on your Photos. Following our today's Photoshop Tutorial you can make your beautiful photos more beautiful with Eye-Catching Interweaving Effect. In this tutorial we are explaining you How to create Interweaving Photo-Strips Effect on any image using different Photoshop Tools and effects. In this tutorial we'll be using very simple and easy steps to create a Stunning and Outrageous Result.  So stick to us and learn How you can Create Interweaving Photo-Strips Effect on your beautiful photos.

Lets Start our Creation !!!!

Requirements

In creating this effect you'll need the following Assets

• Adobe Photoshop 
• 45-60 Minutes (for first time only)
• Intermediate Skills but no Expertise are required
• An Image to Edit (Of-course)

Here is the image we will be using in this Tutorial. 

How to Create Interweaving Photo-Strips Effect

For the first time trying this tutorial we recommend you to use the  same Sample Image and replicate our each step.

Step:1

Download Sample Image Here
Ope the Image in Photoshop and crop the area for which you want to apply the Interweaving Effect
Rename the layer to Girl

Step:2

Open the Ruler view and Draw a vertical Guide Line to (1600px in our case) to take out a square in your image.

Step:3

Create a new Layer above the Girl Layer and Rename it to Strips
Select the Strips Layer and make a rectangular Selection by selecting the Rectangular Marquee Tool (M).
Fill it with black foreground color (Alt+Backspace)

Step:4

Now Change the angle of black strip to 45 and place it as its joining the two opposite corners of the box "that we defined by using vertical guideline in step 2".

Step:5

Now duplicate the Strips layer and place it at a certain distance. The distance between these black strips wil be the width of our Interweaving Photo Strips.

Step:6

Repeat the Step:5 several times so that the black Strips Cover the complete Girl Layer.
Select All black Strips Layer and Merge them into one.
Rename the Merged layer to Strips

Step:7

Hide the Strips Layer by clicking at Eye Icon at its side
Duplicate the Girl Layer and also Hide the Original Girl Layer

Step:8

Hide the Strips Layer by clicking on the icon in lower Layer Panel
Select the Girl Copy Layer, Add a layer Mask

Step:9

Now Select the Layer Mask Thumbnail on Girl Copy Layer
Ctrl+Click at Strips Layer
Press Alt+Backspace to fill the mask with black color
You image should be similar to this.

Step:10

Hide the Girl Copy Layer

Unhide the Strips Layer and Select it
Select the Rectangular Marquee Tool and make Selection around the complete canvas
Crop the Layer by moving to Image > Crop

Step:11

Now select the Move Tool (V)
Right Click in the center point of canvas and Click Flip Horizontal
Press Enter

Step:12

Hide the Strips Layer
Now Select and Unhide the layer Girl Copy 2, Select the Layer Mask Thumbnail
Ctrl+Click on Strips Layer  to make the selection
Press Alt+Backspace to fill the Layer Mask with black color
your image will be similar to this.

Step:13

Deselect all selectionNow add a
New Layer Alt+Shift+N below all layers and name this Base layer
 Fill it with Black Color Alt+Backspace
Unhide the layers Girl Copy.
Be sure layers Girl Copy, Girl Copy 2 and Base Layer should be visible.
Your Image will look similar to this one.

Step 14

Now Ctrl+Click on Layer Mask thumbnail of Girl Copy Layer
Ctrl+Alt+Shift+Click on Layer Mask Thumbnail of Girl Copy 2 Layer
Your selection will look like this one.

Step:15

Now select Girl Copy layer
Select the Lasso Tool (L) and deselect the alternate selection boxes

Step:16

Select the original layer Girl
Press Ctrl+J to duplicate this
Rename the new layer to Diagonal and place this layer above girl copy layer

Step:17

Now repeat Step:14 & Step:15.
In Step:15 this time deselect the other alternate selection boxes

Step:18

Repeat Step:16
Rename the new layer to Cross
Place it above Girl Copy 2 layer and below Girl Copy Layer

Step:19

Now select the layer Diagonal and right click on it and select Create Clipping Mask
Repeat the same step with Cross layer

Step:20

Now double click on Diagonal Layer to open the Layer Style Dialogue Box
Select Outer Glow, change blend mode Screen to Multiply
Change the color to Black
Set size to 65
Your Image will be similar to this.

Step:21

Right click on layer Diagonal and Copy Layer Style.
Now paste this layer style on layer Cross.
Your Interweaving Photo-Strips Effect is Ready.

If you find some mistake in our tutorial. Please let us know. Feel free to ask for help at any step of your creation. Do share your creations with us.  THANKS

Design Stylish Web Buttons: PSD Tutorial

Providing navigation links on your website is good enough but old fashioned and obsolete method. Now a days Web 2.0 sleek and stylish  buttons have taken over their place. Web 2.0 sleek buttons look so amazing and give a new life to your website / blog or your web page. There are tons of designs and styles of such buttons. Today at Software Wanted we are sharing a 20 minutes method to design a Web 2.0 Sleek and Stylish button. The tutorial will be explaining step by step process (with image descriptions) to Design and Embed Sleek and Glossy Button (Normal, Mouse Hover and Active phase button) in your websites.

Because of Length of this Tutorial We have divided this Tutorial into 3 Parts 

Design Glossy Web 2.0 Button in Photoshop

Requirements:
The Assets required in this tutorial are

Adobe Photoshop
Lets Start the Creation of  Sleek, Stylish and Glossy Web 2.0 Button

Designing Phase

The button designed in this tutorial will be 175*50px.
Open Adobe Photoshop and Create a New File (Ctrl+N)
Set dimensions width:175px &Height:150 (Height is set to 150px to adjust the all three "Normal, Hover and Active" states of button)

Make sure that Ruler View (Ctrl+R)is set On.
From the Top "Horizontal Ruler Bar" Click and Drag down the Guideline to 50px and another to 100px. Dividing the height of canvas into 3 equal 50px parts.

Now activate the Rounded Rectangle Tool and set the Radius to 10px
Draw the Rectangle (as shown)in the upper 50px area.

From Layer Palate Select Path and click the circle as shown to Load Path as selection
Now Move back to Layer Section ans Select the Layer 1
Press Alt+Backspace to Fill the Path Selection (Whatever the Color is will be changed later)

Rename the Layer 1 to Normal State
Double Click Normal State Layer to open Layer Style Dialogue Box
From left side, Select Outer Glow and set the color to #4e4e4e and Set the size to 10 as shown in the image
Hold On, Do not click OK

Now Select Stroke and change settings as shown in the image below
Hold On don't click OK

Next Part of Tutorial

Design Stylish Web Buttons PSD Tutorial

Previous Part of Tutorial

Design Stylish Button in Photoshop: Part 2

Now Select Gradient Overlay
Click the Gradient Color Box to Open Gradient Editor
Double Click Left Color Stop and Set the Color to #1b1a1a
Double Click Right Color Stop and Set the Color to #555252
Click OK on Gradient Editor and OK on Layer Style Dialogue Box

Your Image should be Similar to the Following

Create a New Layer (Ctrl+Shift+N)
Rename it to Glow
Select Rounded Rectangle Tool and Draw the Rectangle on layer Glow with Radius 5, as shown in following image
Fill this rectangle with White Color (#ffffff)
Double Click layer Glow
Select Gradient Overlay
Set Left Color Stop to #383636
Set Right Color Stop to #cbc9c9
Your image should be similar to the following, we are assuming you to follow us step by step

Select Custom Shape Tool
Select any Image you want. In our case we are using Double Down Arrow
Create New Layer Above Glow and Name it to Down Arrow
Draw the selected Auto Shape on this layer. The Image should be similar to the below.
Move to Path Palate and Click Load Path as Selection button. As we did in steps above
Fill the selected path with color #343131

 Now Lets Add Some Text
Now Select Horizontal Text Tool (T)
Add Text Layer Above layer "Down Arrow"
Set the Font Family to Arial / Regularz
Set Text Size to 20pt
 Type text of your Choice. In our case, its Download File
Set the Download Text Color to #ffffff and File Color to #eedb05
The Normal State of button is ready and it should look like the image below.

Right Click on Text Layer and select Rasetrize Type.
Now Select All layers and Right Click and Select Merge Layers.
Select Move Tool (V)
You Image is similar to the image below.

Next Part of Tutorial

Design Stylish Web Buttons PSD Tutorial

Previous Part of Tutorial

Design Stylish Button in Photoshop: Part 3

Hold from Corners as Drag inside as shown in the image below
So that the border lines fit into canvas as shown

In layer Patel there will be only one Layer
Duplicate this Layer Twice
Set all three layers as shown in the image below
Make Sure
Normal State Layer Image is Placed at Top (0-50px)
Hover State Layer Image is placed in Middle (50-100px)
Active State Layer Image is Placed at bottom (100-150px)

Select Hover State Layer and Adjust Brightness to 60

 Now Double Click on Active State Layer to Open Layer Style Dialogue Box
Select Bevel and Emboss
Change the settings as shown in the image below

 Your Image should be Similar to this one

The Designing phase is finished.
Now Just Save this button as Download Button.PNG 
Upload it to your website or blog and copy the image location

Embed Sleek Stylish Button in your Website/Blog

Copy the following code and paste it inside your website / blog HTML code just above the </head> code.

<!--Download Button Start --> <style type="text/css"> <!-- .buttonD { display:block; width:175px; height:50px; text-indent:-9999px; } .buttonD a { display:block; width:100%; height:100%; background: url(Your Image Link Location) } .buttonD a:hover { background-position:0 100px; } .buttonD a:active { background-position:0 50px; } --> </style> <!--Download Button End -->

Copy and Paste the following code wherever you want your button to appear.

<p class="buttonD"><a href="#null">Download File</a></p>

If you want your button to redirect your viewer to another URL, Replace #null with the Destination URL