PSD to HTML Tutorial - Code a Photoshop File to a Working Website

PSD to HTML Tutorial – Code a Photoshop File to a Working Website

Howdy, folks! In this PSD to HTML tutorial you will learn how to code the Quick and Easy Stylish Design Agency Landing Page In Adobe Photoshop. I’m not really into coding, more of a design person and this is my first coding tutorial. I will try my best to guide you through the whole thing. We will be coding this from scratch and by the end you will have an awesome and fully functional agency layout.

Are you ready? Let’s get started!

 

%tutke

 

 

%tutke

 

Resources for this tutorial

Step 1: Preparation for the PSD to HTML Tutorial

We all know that in converting PSD to HTML/CSS we will need to go back and forth in Photoshop (or other image editing tool) to measure the sizes, distance, and colours. So make sure you open up the PSD file in Adobe Photoshop.

Of course you’ll need your favorite code editor and debugging tools. I used Intype as my text editor and for debugging tools I recommend Web Developer Toolbar and Firebug.

It is important to test our code using different browsers every step of the way so that we can keep on track of our code. I used CSS3 styles in this tutorial, which should work in Chrome and Firefox. For IE6 trust me, it still looks fine.

Step 2: Getting Files Ready

 

 

You will need to create a directory folder and inside of it you should have /images directory for images and /jsdirectory for JavaScript. I placed the CSS file in the root folder including the HTML file.

Also we need to export the images to be used in the PSD file. For example the The Logo, you will need to select the layer from the layers panel, copy and paste it in a different document and CTRL + ALT + SHIFT + S in order to save for web and devices, the appropriate file type for the logo should be .png. But if you’re tired of doing this you can just download the files and use the images I already exported.

Step 3: Simple Starter Layout

To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique.

  • Background: you notice that the background is white.
  • Header: Notice that in this section the header has a green line on the top which covers the whole screen, so in order to do this we need to wrap the header with another container. The header contains logo, call to action, navigation and search.

 

 

Pay attention to the naming of id or class in every screenshot I made, these will be the names we will use when we markup the HTML.

  • Slides: for the slider we will be using SlideJS.

 

 

  • Service: this section contains 2 columns for web design and vector design.

 

 

  • Media: this section is divided into 3 columns for video, Twitter, and Facebook.

 

 

  • Notice the above section slides, services, and media are positioned in the center, so we will wrap them with a div and name it container.

 

 

  • Widget: this section is divided into 3 columns for links, blog, and location. Also you will notice it is covered with a gray dotted pattern that covers the whole screen.

 

 

  • Client: In this section you will notice there is a solid gray border on the bottom that covers the entire screen and a list of clients logo.

 

 

  • Footer: Finally, the footer which contain 2 columns for copyright, footer links, and back to top arrow.

 

 

Here is the image of the overall markup that we have done.

 

 

Now, Based on these notes we create the following HTML layout.

1 <!doctype HTML>
2     <html lang="en">
3     <head>
4       <meta charset="utf-8">
5       <title>Burnstudio</title>
6       <link rel="stylesheet" href="style.css">
7     </head>
8 <body>
9     <div id="header-wrap">
10         <header>
11             header content goes here
12         </header>
13     </div><!-- end header wrap -->
14
15     <div id="container">
16         <div id="slides">
17             slides content goes here
18         </div><!-- end slides -->
19
20         <div id="service">
21             service content goes here
22         </div><!-- end service-->
23
24         <div id="media">
25             media content goes here
26         </div><!-- end media -->
27     </div<!--! end container -->
28
29     <div id="widget-wrap">
30         <div id="widget">
31             widget content goes here
32         </div><!-- end widget -->
33     </div<!--! end widget-wrap -->
34
35     <div id="client-wrap">
36         <div id="client">
37             widget content goes here
38         </div><!-- end client -->
39     </div<!--! end client-wrap -->
40
41     <footer>
42         footer content goes here
43     </footer>
44 </body>
45 </html>

Notice that the naming of the divs in every section is based on the naming we did earlier when we analyzed the PSD layout. Note that this layout is a fixed width of 960px. I know it would be better if we used a CSS framework for this project. But like I have said, we will do it from scratch.

Step 4: Working on Header Section

Now lets focus more on the header section we will mark up the HTML elements that can be found in this section.

1 <h1><a href="index.html" title="burnstudio">Burnstudio</a></h1>
2 <div id="call">
3     <h3>(012) 345 6789</h3>
4     <h4 class="green">Call us <strong>now</strong></h4>
5 </div><!-- end call -->
6 <nav class="group">
7     <ul>
8         <li class="home"><a href="#" title="">Home</a></li>
9         <li><a href="#" title="">Services</a></li>
10         <li><a href="#" title="">About Us</a></li>
11         <li><a href="#" title="">Testimonials</a></li>
12         <li class="last">
13             <div>
14                 <input type="text" name="search" placeholder="search" />
15                 <input type="submit" name="search" value="go" class="search"/>
16             </div>
17         </li>
18     </ul>
19 </nav>

In the above HTML I just followed what I saw in Photoshop. First is the Logo, since the logo is clickable I added <a> tag inside the h2. Followed by the the call number which is wrapped in a div with an id of call. Lastly I created a <ul> list which contain links and the search.

Now let’s add the CSS as follows:

All CSS should be added in the style.css file. Also, make sure you just copy the CSS reset which I provided in the resources and place it in style.css file.

1 body{
2     background#fff;
3     font-familyHelveticaArialsans-serif;
4     font-size13px;
5 }
6
7 /* FONT STYLES*/
8 h3{
9     font-size24px;
10     font-familyHelveticaArialsans-serif;
11     color#333333;
12     margin-bottom25px;
13 }
14 h4{
15     margin-bottom25px;
16     font-size18px;
17     font-familyHelveticaArialsans-serif;
18 }
19 h5{
20     font-size14px;
21     font-familyHelveticaArialsans-serif;
22 }
23 p{
24     font-size13px;
25     color#555555;
26     line-height18px;
27 }
28 a, a:link, a:visited{
29     text-decorationnone;
30     outlinenone;
31 }
32 .green{
33     color#509743;
34 }
35 .white{
36     color#fff;
37 }
38 strong{
39     font-weightbold;
40 }
41 /* END FONTS STYLES */

In the above CSS, since we have reset styles we need to style our text formats. I know that we used a different font for our headings and I don’t think Google fonts support Kozuka Gothic. But for now we will replace it withHelvetica. Notice also I added the classes green and white, this will be used when we style green or white text that can be seen in the design.

When you test it you will have something that looks like the screenshot below.

 

 

1 /* HEADER */
2 #header-wrap{
3     border-top10px solid #4d9543;
4     padding-top40px;
5 }
6 header{
7     width960px;
8     margin0 auto;
9     padding0;
10 }
11 header h2 a{
12     displayblock;
13     text-indent-999999px;
14     backgroundurl(images/logo.png) no-repeat;
15     width214px;
16     height77px;
17     floatleft;
18     margin-bottom40px;
19 }
20
21 #call{
22     floatright;
23     border-right1px solid #c8c8c8;
24     padding-right25px;
25     margin-top20px;
26 }
27 #call h3{
28     margin0;
29 }
30 #call h4{
31     text-alignright;
32     margin0;
33 }
34
35 nav{
36     clearboth;
37     width960px;
38     height50px;
39     -moz-border-radius: 30px;
40     -webkit-border-radius: 30px;
41     background-color#3b7c33/* Fallback */
42     border-radius: 30px;
43     /* Safari 4+, Chrome 1-9 */
44     background-image: -webkit-gradient(linear, 0% 0%0% 100%, from(#5fae53), to(#3b7c33));
45     /* Safari 5.1+, Mobile Safari, Chrome 10+ */
46     background-image: -webkit-linear-gradient(top#5fae53#3b7c33);
47     /* Firefox 3.6+ */
48     background-image: -moz-linear-gradient(top#5fae53#3b7c33);
49     /* IE 10+ */
50     background-image: -ms-linear-gradient(top#5fae53#3b7c33);
51     /* Opera 11.10+ */
52     background-image: -o-linear-gradient(top#5fae53#3b7c33);
53     border1px solid #336c2b;
54 }
55
56 nav ul li{
57     floatleft;
58     border-right1px solid #336c2b;
59     border-left1px solid #78c368;
60 }
61 nav ul li.home{
62     border-leftnone;
63     text-indent-9999px;
64     backgroundurl(images/home.png) no-repeat 50% 50%;
65 }
66
67 nav ul li.last{
68     border-leftnone;
69     border-rightnone;
70     floatright;
71     margin-right20px;
72 }
73 nav ul li a{
74     displayblock;
75     padding0 30px;
76     height50px;
77     line-height50px;
78     font-size15px;
79     color#fff;
80     text-shadow0 1px 0 #387031;
81 }
82 nav ul li a:hover{
83     background#5fae53;
84 }
85
86 nav ul li.home a:hover{
87     -webkit-border-top-left-radius: 30px;
88     -webkit-border-bottom-left-radius: 30px;
89     border-top-left-radius: 30px;
90     border-bottom-left-radius: 30px;
91     background#5fae53 url(images/home.png) no-repeat 50% 50%;
92 }
93 nav ul li div input[type=text]{
94     -webkit-border-radius: 20px;
95     -moz-border-radius: 20px;
96     background#4b9241;
97     border-leftnone;
98     border-rightnone;
99     border-bottom1px solid #5ead52;
100     border-top1px solid #346d2c;
101     color#fff;
102     text-shadow0 1px 0 #387031;
103     padding5px 0 5px 20px;
104     width200px;
105 }
106 nav ul li div input[type=text]:focus{
107     outlinenone;
108 }
109
110 /* TO STYLE PLACE HOLDER */
111 ::-webkit-input-placeholder {
112    color#fff;
113 }
114 :-moz-placeholder {
115    color#fff;
116 }
117
118 nav ul li div input[type=submit]{
119     backgroundurl(images/search.png) no-repeat 50% 50%;
120     bordernone;
121     text-indent-999999px;
122     margin-left15px;
123     height50px;
124     width16px;
125 }
126
127 /* END HEADER */

In the above CSS I styled header-wrap with a 10px green border, since a div by default is styled in a blockdisplay this will fill the whole width of the screen. Then I centered the header with margin: 0 auto. Next, I styled the Logo with a fixed width and height. I also floated it the left. For the Call I floated it right and apply a 1px gray border also a 25px padding from right. Note that to get this value you need to go back to Photoshop and use theRuler Tool(I) to measure the distance. Since I styled the h3 and h4 with a 25px bottom margin in our base text format we need to reset it and change it to 0. This will make the h4 and h3 in the call section back to normal.

Next, I styled the navigation with a fixed width, height and a gradient, I applied a clear both to clear the above floating elements logo & call. All li are floated left except for the last li element, also it has a left and right border except for the the home there is no left border and for the last there is no right border. All a is styled 30px padding from left and right 0 for top and bottom, a height of 50, a text shadow, a line-height of 50 to make it center vertically. For the class home I pushed out the text and replace it with the home icon. Since the corner is rounded we need to specify another style hover for the home button that’s what I did below the a:hover.

Lastly, I styled the search input with a rounded radius, a green background, dark border on top and light border on bottom. Also to target placeholder attribute refer to the CSS which I comment to style place holder this is a part of css3 property.

Before previewing this to IE lower versions make sure to copy and paste the code below in the header section of our HTML file. This will enable HTML5 elements to work in older IE browsers.

1 <!--[if IE]>
2     <script type="text/javascript">
3     (function(){
4     var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
5     for(var i = 0; i < html5elmeents.length; i++){
6     document.createElement(html5elmeents[i]);
7     }
8     }
9     )();
10     </script>
11     <![endif]-->

Now our layout should look like this.

 

 

Step 5: Working on Slider Section

Now let’s add the content inside the slides element, here’s the HTML.

1 <div class="slides_container">
2     <div>
3         <img src="http://www.1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png" alt="slide1" />
4         <div class="slide-right">
5             <h1 class="slide-heading">Artthatworks 1 dolor sit amet, consectetur adipiscing elit.</h1>
6             <p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p>
7             <p><a href="#" class="readmore">read more</a></p>
8         </div>
9     </div>
10
11     <div>
12         <img src="http://www.1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png" alt="slide1" />
13         <div class="slide-right">
14             <h1 class="slide-heading">Artthatworks 2 dolor sit amet, consectetur adipiscing elit.</h1>
15             <p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p>
16             <p><a href="#" class="readmore">read more</a></p>
17         </div>
18     </div>
19
20     <div>
21         <img src="http://www.1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png" alt="slide1" />
22         <div class="slide-right">
23             <h1 class="slide-heading">Artthatworks 3 dolor sit amet, consectetur adipiscing elit.</h1>
24             <p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p>
25             <p><a href="#" class="readmore">read more</a></p>
26         </div>
27     </div>
28 </div><!-- end slies container -->

In the above HTML markup I added a class slides_container this will hold our slides elements which is wrapped by a div that contains an image, a div class of slides-right that holds the slide title, info, and read more link. Also I added a class for the heading slide-heading, paragraph info and for the read more readmore. This will be helpful since we will repeat the HTML code 3 times and they will have the same styles if we add the CSS later.

Now let’s style all the element, here’s the CSS.

1 #container{
2     width960px;
3     margin0 auto;
4 }
5 /* SLIDES */
6 #slides{
7     positionrelative;
8     margin-top40px;
9 }
10 .slides_container{
11     height315px;
12 }
13 .slide-right{
14     positionabsolute;
15     top0;
16     left385px;
17 }
18
19 .slide-heading{
20     backgroundurl(images/slide-heading.png) no-repeat;
21     width494px;
22     height68px;
23     color#fff;
24     font-size24px;
25     padding-top20px;
26     padding-left80px;
27     margin-top35px;
28     margin-bottom30px;
29 }
30 .slide-right .info{
31     width395px;
32     margin-bottom20px;
33     margin-left155px;
34 }
35 .slide-right .readmore{
36     margin-left155px;
37 }
38 .readmore{
39     font-styleitalic;
40     text-decorationnone;
41     color#509743;
42     padding-left15px;
43     backgroundurl(images/more.png) no-repeat 0 50%;
44 }
45 .readmore:hover{
46     color#c8c8c8;
47
48 }
49 .pagination{
50     positionabsolute;
51     bottom25px;
52     left25px;
53     z-index99;
54 }
55
56 ul.pagination li{
57     floatleft;
58     margin-right10px;
59     backgroundurl(images/pagination.png) no-repeat;
60     background-positiontop;
61     width14px;
62     height15px;
63 }
64 ul.pagination li.current{
65     background-positionbottom;
66 }
67 ul.pagination li a{
68     displayblock;
69     text-indent-999999px;
70 }
71
72 a.next{
73     positionabsolute;
74     right25px;
75     bottom30px;
76     displayblock;
77     width7px;
78     height13px;
79     backgroundtransparent url(images/prev-next.png) no-repeat;
80     background-positiontop right;
81     text-indent-9999px;
82 }
83 a.prev{
84     positionabsolute;
85     right50px;
86     bottom30px;
87     displayblock;
88     width7px;
89     height13px;
90     backgroundtransparent url(images/prev-next.png) no-repeat;
91     background-positiontop left;
92     text-indent-9999px;
93 }
94 a.next:hover{
95     background-positionbottom right;
96 }
97 a.prev:hover{
98     background-positionbottom left;
99 }
100 /* END SLIDES*/

In the above CSS since slides, service and media are wrapped with the container div, we will style this first to make them centered. Next, slide’s position is set to relative to make it the parent element. This is helpful so that we can position the inside elements prev, next, and pagination absolutely which are auto-generated by the JavaScript. For the slides_container I gave it a fixed height of 315px which is equal to the height of the slider image. For the slide-right which contains the heading, info and read more, all positioned absolutely, 0 out top, and pushed it 385px from left.

For the slide-heading I gave it a fixed width and height equal to the background image, and gave it a padding to make the text align properly, also a margin to give a space and align it correctly. For .info I gave it a fixed width with margin to align it. For .readmore first I gave it a separate margin style since only the slider readmore has this and all of the readmore links in the layout has no margins from left. Then followed by the readmore styling which has a green color with background arrow and a gray hover.

For the pagination, prev, and next buttons this is auto-generated by the JavaScript in order to style this first we need to identify what is the tag or the applied html class attribute. To do this you need to used the Firebug tool if you’re using Firefox, if you’re using Chrome just right click to the element and click Inspect Element a dialog will appear and you can see there what element is being used.

Now that you know the element, we will target it in the CSS. For the Pagination I positioned it absolutely, placed it 25px from the bottom and left, also I applied z-index 99px – this will make the pagination right on the very top over the other elements. If werre not going to apply this notice that it is not clickable because the image is on top of the pagination itself. Then I floated the pagination li elements to left, gave it a right margin of 10px, added a background image with a fixed width and height. I positioned the background by default to top since the normal state image is on top, for the current or the active state we will going to reverse the positioning from top to bottom and lastly display it as a block level element and hide the text. For the .next and .prev pretty much the same we did in pagination but this time it is positioned to the right. Noticed the prev-next.png on the left side this contains the image of prev button and on the right side this contains the image of the next button. I positioned the .nextimage to top right, .prev positioned to top-left, and for the hover just change the top to bottom.

Now let’s add the required jQuery script in the header. Copy the slides.min.jquery.js file from the /sourcedirectory and paste it in our /js directory.

2 <script src="js/slides.min.jquery.js"></script>

Finally, we need to add the JavaScript code that will allow the slider to work on our layout. You should add this script just before the </body>. Here’s the JavaScript.

1 <script>
2         $(function(){
3             $('#slides').slides({
4                 preload: true,
5                 generateNextPrev: true,
6             });
7         });
8 </script>

Now our layout should look like this.

 

 

Step 6: Working on Service Section

Now let’s add the content inside the service element, here’s the HTML.

1 <div id="web">
2     <img src="images/web.png" />
3     <h3>Web <strong><span class="green">Design</span></strong></h3>
4     <p>Nunc viverttra erat et turpis viverra pellentesque. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor.</p>
5     <p><a href="#" class="readmore">read more</a></p>
6 </div><!-- end web -->
7
8 <div id="vector">
9     <img src="images/vector.png" />
10     <h3>Vector <strong><span class="green">Design</span></strong></h3>
11     <p>Nunc viverttra erat et turpis viverra pellentesque. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor.</p>
12     <p><a href="#" class="readmore">read more</a></p>
13 </div><!-- end vector -->

I created a unique div id web and vector which contains the same elements such as an image, headings, paragraphs and readmore link. In the heading you can see I added a span and applied a class of green since the heading is combined with different colour. For the read more link we apply the same class we did in the slider area.

Now let’s style all the element, here’s the CSS.

1 /* SERVICE */
2 #service{
3     margin40px auto;
4     height253px;
5     padding-top30px;
6     backgroundurl(images/service-bg.jpg) no-repeat;
7 }
8
9 #web{
10     floatleft;
11     width450px;
12     padding-left30px;
13 }
14 #web p{
15     width260px;
16     margin-bottom20px;
17 }
18 #web img{
19     floatright;
20     margin-right50px;
21 }
22 #vector{
23     floatright;
24     padding-left30px;
25     width450px;
26 }
27
28 #vector p{
29     width260px;
30     margin-bottom20px;
31 }
32 #vector img{
33     floatright;
34     margin-right50px;
35 }
36 /* END SERIVCE*/

I styled the service div 40px from above to bottom and added an auto left and right, I also added a height that is equal to the background image. For the web div I floated it to the left and gave it a 50% width of the parent div, the same with the vector div but floated to the right. For the paragraph I gave it a fixed width with a margin, for the image I floated it right and give it a right margin, pretty much the same on vector image and text.

Now our layout should look like this.

 

 

Step 7: Working on Media Section

Now let’s add the content inside the media element, here’s the HTML.

1 <div id="media" class="group">
2     <div id="video">
3         <h4>Quick <strong>Video Tour</strong></h4>
4         <h5>How we Design our works!</h5>
5         <a href="#" class="play"><img src="images/play.png" alt="play" /></a>
6     </div>
7
8     <div id="twitter">
9         <h4>Twitter <strong><span class="green">Feed</span></strong></h4>
10         <p class="tweet">Mashable Video: Principal Resigns After Allegedly Posing as a Student on Facebook -<a href="#" class="t-link">http://on.mash.to/IVYWYJ</a></p>
11         <p class="time">9 hours ago</p>
12     </div>
13
14     <div id="facebook">
15         <h4>Like Us On <strong><span class="green">Facebook</span></strong></h4>
16
17     </div>
18 </div><!-- end media -->

I created 3 different sections: video div which contains text headings h4, h5 and a clickable image for play button, twitter div which contains a heading and a paragraph, lastly a facebook div which contains a heading and if you wish to add your widget you can add it by going to Facebook plugins. Also, I added a class group on the media div. I’ll show you what that does when we move on to the CSS.

Now let’s style all the elements, here’s the CSS.

1 /* MEDIA  */
2
3 #media{
4     margin0 auto;
5 }
6 #video{
7     width302px;
8     padding-top20px;
9     floatleft;
10     margin-right58px;
11     backgroundtransparent url(images/video-bg.png) no-repeat;
12     height225px;
13 }
14 #video h4{
15     margin0;
16 }
17 #video h4, #video h5{
18     text-aligncenter;
19     color#fff;
20     text-shadow0 1px 0 #387031;;
21 }
22
23 #video .play{
24     floatright;
25     margin-top5px;
26 }
27
28 #twitter{
29     width285px;
30     height180px;
31     floatleft;
32     margin-right30px;
33     backgroundtransparent url(images/twitter-bg.png) no-repeat;
34     background-positionbottom;
35     padding0 0 20px 0;
36 }
37 #twitter p{
38     padding0 20px;
39 }
40 #twitter .time{
41     font-size11px;
42     font-styleitalic;
43     color#999999;
44     margin-top15px;
45 }
46
47 a.t-link{ color#6767c9text-decorationnone; }
48 a.t-link:hover{ text-decorationunderline; }
49
50 #facebook{
51 width285px;
52 floatright;
53 }
54
55 /* END MEDIA*/
56
57 /* CLEAR FIX */
58 .group:after {
59   content"";
60   display: table;
61   clearboth;
62 }
63 /* END FIX */

I styled the video div with a fixed width and height of 302px x 225px, gave it padding, floated it to the left and lastly added a background image. I styled h4 and h5 centred and added a dropshadow, for the play button which has a class of .play I floated it to the right and added a margin to position it on the right. For twitter div I gave it a fixed width and height of 258px by 180px and added a background image positioned in bottom, also I gave the .timewith a smaller font and lighter caller, also for the a.t-link which has a blue color. For facebook this is the same to twitter heading and floated to right.

The purpose of the group class is to force the element to self-clear its children a.k.a clearfix. What this means is the media is the parent element which holds child elements inside of it that are floating left this are video, twitterand facebook. The media element doesn’t determine it’s height when we apply that clearfix hack this will identify the automatically identify the maximum height of the child element.

Now our layout should look like this.

 

 

Step 8: Working on Widget Section

Now let’s add the content inside the widget element, here’s the HTML.

1 <div id="widget-wrap" class="group">
2 <div id="widget">
3     <div id="links">
4         <h4 class="white">Other <strong>Links</strong></h4>
5         <ul>
6             <li><a href="#">www.example.com</a></li>
7             <li><a href="#">www.1stwebdesigner.com</a></li>
8             <li><a href="#">www.labzip.com</a></li>
9             <li><a href="#">www.samplelink.com</a></li>
10             <li><a href="#">www.outgoinglink.com</a></li>
11             <li><a href="#">www.link.com</a></li>
12         </ul>
13     </div>
14
15     <div id="blog">
16         <h4 class="footer-header white">Latest From The <strong>Blog</strong></h4>
17         <img src="images/blog.png" alt="blog" />
18         <p class="title">Maecenas iaculis lorem vel dui vulputate non consequat mi congue.</p>
19         <p class="date">05.30.2012</p>
20         <p><a href="#" class="readmore">read more</a></p>
21     </div><!-- end blog -->
22
23     <div id="location">
24         <h4 class="footer-header white">Our <strong>Location</strong></h4>
25         <img src="images/map.png" alt="map" />
26         <p class="address">123 unknown street, address
27         </br> 8600 Philippnes</p>
28     </div><!-- end location -->
29         </div><!-- end widget -->
30 </div<!--! end widget-wrap -->

I added a class group to widget-wrap, you already know what this class does. Next I created 3 div links which contains an unordered list, blog which contains a heading, image, title, date and read more link. Lastly, locationwhich contain an image, and the address.

Now let’s style all the element, here’s the CSS.

1 /* WIDGET */
2 #widget-wrap{
3     padding50px 0;
4     background#333333 url(images/widget-bg.jpg);
5 }
6 #widget{
7     width960px;
8     margin0 auto;
9 }
10 h4.footer-header{
11     backgroundtransparent url(images/footer-header.png) no-repeat;
12     line-height58px;
13     text-indent30px;
14 }
15 #links{
16     width225px;
17     floatleft;
18     margin-right75px;
19 }
20 #links ul{
21     list-style-imageurl(images/links.png);
22     margin-left15px;
23 }
24 #links ul li a{
25     color#cccccc;
26     font-size13px;
27     padding8px 0;
28     displayblock;
29 }
30 #links ul li a:hover{
31     color#fff;
32 }
33 #blog{
34     positionrelative;
35     width290px;
36     floatleft;
37     margin-right75px;
38 }
39 #blog img{
40     positionabsolute;
41     top50px;
42     left-18px;
43 }
44 #blog p.title{
45     color#fff;
46     margin-left110px;
47     margin-bottom15px;
48 }
49 #blog p.date{
50     margin-left110px;
51     color#cccccc;
52     font-styleitalic;
53     font-size11px;
54     margin-bottom15px;
55 }
56
57 #blog a.readmore{
58     margin-left110px;
59 }
60 #location{
61     positionrelative;
62     width290px;
63     floatright;
64 }
65 #location img{
66     positionabsolute;
67     top45px;
68     left22px;
69 }
70 #location p.address{
71     margin-top115px;
72     border-right1px solid #484848;
73     padding-right20px;
74     text-alignright;
75     color#cccccc;
76 }
77 /* END WIDGET */

I styled widget-wrap div with a padding of 50px top and bottom and added a gray dotted pattern background. For the widget div I appled 960px width and position it centered. For the links div I gave it a width of 225px, floated it to left and give it a right margin 75px, for the ul list. I added a background image, also I styled the a with a lighter gray and hover of white (I didn’t follow the hover effect in the PSD design).

For the blog div I gave it a width of 290px, floated it to left, apply a 75px margin and position it relatively. For the heading I added a backround, indented the text, and added 58px line height to make the text centered vertically. For the blog img since we just positioned blog div to relative we can now position this absolutely to position the image the same to psd design which is left 18px. For the .title.date and .readmore they have the same margins from left. For the location the same also in blog where it is positioned relatively and position the inside image absolutely, and for the address I added margin and paddings and give it a 1px border to the right.

Now our layout should look like this.

 

 

Step 9: Working on Client Section

Now let’s add the content inside the client element, here’s the HTML.

1 <div id="client-wrap" class="group">
2     <div id="client">
3         <ul>
4             <li><img src="images/client-1.jpg" alt="" /></li>
5             <li><img src="images/client-2.jpg" alt="" /></li>
6             <li><img src="images/client-3.jpg" alt="" /></li>
7             <li><img src="images/client-4.jpg" alt="" /></li>
8             <li><img src="images/client-5.jpg" alt="" /></li>
9         </ul>
10     </div><!-- end client -->
11 </div><!-- end client-wrap -->

In above HTML I added again a group class on client-wrap div and added an unordered list element that contains an image.

Now let’s style all the element, here’s the CSS.

1 /* CLIENT */
2 #client-wrap{
3     background#fff url(images/client-bg.jpg) repeat-x;
4     padding40px 0;
5     border-bottom1px solid #c8c8c8;
6 }
7
8 #client{
9     width960px;
10     margin0 auto;
11 }
12
13 #client ul li{
14     width20%;
15     floatleft;
16     text-aligncenter;
17 }
18 /* END CLIENT */

In the above CSS I styled the client-wrap div by adding a little gray gradient background, padding top and bottom 40px and lastly added a solid gray bottom border. I positioned center the client div and lastly for the unordered list elements which contains the images I floated it left, since we have 5 images I divided it evenly by giving a 20% width of each element, lastly I applied text-align to make the images center.

Now our layout should look like this.

 

 

Step 10: Working on the Footer Section

Now let’s add the content inside the footer element, here’s the HTML.

1 <footer class="group">
2     <div id="footer-left">
3         <p>Copyright <a href="#" class="green">www.1stwebdesigner.com</a> </br>
4         Designed by <a href="#" class="green">Michael Burns</a></p>
5     </div>
6
7     <div id="footer-right">
8         <ul>
9             <li><a href="#">Home</a></li>
10             <li><a href="#">Services</a></li>
11             <li><a href="#">About Us</a></li>
12             <li><a href="#">Testimonials</a></li>
13             <li><a href="#">Contact Us</a></li>
14         </ul>
15     </div>
16
17     <a href="#header-wrap"><img src="images/back-top.png" alt="back-top"class="back-top" /></a>
18 </footer>

In above HTML I added a group class to footer, then created 2 section first is footer-left which contain the copyright text, next footer-right which contain an unordered list links. Lastly I added clickable back to top image.

Now let’s style all the element, here’s the CSS.

1 /* FOOTER */
2 footer{
3     clearboth;
4     width960px;
5     margin0 auto;
6     padding30px 0 60px 0;
7     positionrelative;
8 }
9
10 #footer-left{
11     floatleft;
12     width50%;
13 }
14 #footer-left p{
15     font-size12px;
16     color#666666;
17 }
18 #footer-left a:hover{
19     color#c8c8c8;
20 }
21 #footer-right{
22     floatright;
23     width50%;
24 }
25 #footer-right ul{
26     floatright;
27 }
28 #footer-right ul li{
29     floatleft;
30     margin-right30px;
31 }
32
33 #footer-right ul li:last-child{
34     margin-right0;
35 }
36 #footer-right ul li a{
37     color#666666;
38     displayblock;
39     padding-bottom10px;
40     font-size12px;
41 }
42 #footer-right ul li a:hover{
43     border-bottom2px solid #c8c8c8;
44 }
45
46 .back-top{
47     positionabsolute;
48     bottom30px;
49     right50%;
50
51 }
52 /* END FOOTER */

In above CSS I styled the footer by giving a width of 960px, centered it, applied a padding of 30px top and 60px bottom, lastly I positioned it relatively. For the footer-left and footer-right I gave it a width of 50%, floated it left and right. For the copyright text I made it smaller and changed the color to a lighter one. For the links I floated theul to the right and floated li to left, gave a margin of 30px, for the last-child I removed the margin, for the links I styled it the same with the copyright text and added 2px border when its hovered. Lastly, since I positioned the footer relatively, I can position the back-top absolutely to the center which is right 50%.

Now our layout should look like this.

 

 

We’re done, Finally!

Wew! This took me so long to write. How was the tutorial? I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below. Also, for the next tutorial I’m going teach you how to make this layout responsive. Yeah! You heard it right, let’s make it responsive!

If you liked this tutorial kindly share it with your friends. Thanks! :)

 

Huge Credit to : 1stwebdesigner.com for this tutotial

Incoming search terms:

  • landing page design psd
  • website images with html code
  • psd transparent curved shadow large
  • tutorial html code website
  • tutorial psd to html
  • coronas party psd
  • free psd box shape
  • psd livre dor website
  • PSD to code

Create Stunning 3D Text in a Grungy Landscape + Psd File

Create Stunning 3D Text in a Grungy Landscape + Psd File

 

The more you can learn about blending images and different elements together in Photoshop, the more freedom you will have in creating whatever pops up in your imagination. In this Photoshop tutorial, we are going to go over different digital-image-editing techniques in order to create a beautiful grungy and grainy composition that has 3D text (that we will make in Illustrator) as its centerpiece.

Author: Tyler Denis

Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs

Preview

Click on the image to see the final result in full scale.

Tutorial Resources

Step 1: Setting Up in Illustrator

We are going to start by opening up Adobe Illustrator and creating a new 1200×1200px document.

Setting Up in Illustrator

Next, download this Grass stock image and bring it into our Illustrator artboard. We are going to be using this photo simply as a reference for the 3D text we will be producing, so you could lock this layer to prevent us from accidentally moving it around. We will reuse this image in Photoshop, so keep it in a handy location.

Step 2: Create the Front of the 3D Text

Use the Type Tool (T) to write out the word “DESIGN” using Myriad Pro Black Condensed or a similar bold sans-serif font. So that our text block is easier to work with, we are going to go to Type > Create Outlines (Shift + Ctrl/Cmd + O) to convert the text layer to vector paths.

Create the Front of the 3D Text

Step 3: Create the Back of the 3D Text

Duplicate the “DESIGN” object–select it with the Selection Tool, press Ctrl/Cmd + C to copy, then press Ctrl/Cmd + F to paste in front. Move the duplicate up to the horizon line of the grass image. Hold down Shift + Alt/Option, then click and drag one of the corners inward to shrink it down, while keeping its position in place.

Create the Front of the 3D Text

Step 4: Developing the 3D Text

First let’s change the fill color of the text in front to a shade of yellow (#FEC719). Let us also change the fill color of the text in the back to a darker, more muted shade of yellow (#CC9933).

Now we are ready to build our 3D text. First, ungroup our two “DESIGN” text objects (select them, and then press Shift + Ctrl/Cmd + G or go to Object > Ungroup).

Let us start with the “D”: Click on the Pen Tool (P) in the Tools Panel, and then create a rectangular shape. Change the color of the rectangular shape to a shade of yellow (#E8DC86).

Developing the 3D Text

Use the Direct Selection Tool (A) to drag the corner anchor points so the ones on the left side align with the left corners of the “D” (use View > Smart Guides to have the box snap to the corners of the “D”). Make another rectangular shape that covers the middle part of the “D” as well.

Developing the 3D Text

Select all the vector shapes associated with the “D” and go to Object > Group to make our work more manageable and organized.

We are going to go through each of the letters and create rectangular shapes that connect the front letter to its back letter, just like we did with the “D”. To make the process easier, you can change the colors of the sides of the text to visually see them better (then we could just correct the colors later on).

Developing the 3D Text

Developing the 3D Text

Developing the 3D Text

Developing the 3D Text

Be sure to group the components of each letter together, just like with the letter “D”, or else our Illustrator document can become unwieldy.

Step 5: Create Gradient Swatches

Now that our 3D text is starting to take shape, we can start working on the colors we will be using. To do the shading of our text, we are going to create gradient swatches, which we will later use on subsequent steps. If the Gradient Panel isn’t already open, go to Window > Gradient.

Set your Fill color to a shade of yellow (#EDB329), drag it to the left side of our gradient in the Gradient Panel, switch your Fill color to a brown (#7E4920), and, again, drag it to the right side of our gradient. Drag the Gradient Fill we created from the Gradient Panel into the Swatches Panel to add it as a swatch–this will make it easier for us to use this gradient in our work (we merely have to click on it to fill the target objects).

We are also going to create a gradient with brown color (#B97E2E) on the left of the gradient and a darker brown (#7E4920) on the right. Drag this into the Swatches Panel also.

Create Gradient Swatches

Step 6: Connecting the 3D Text

We want to finish the back end of our text, starting with the “D”. Select the “D” group and then go to Object > Ungroup. Click on the top part of the text and, while holding Shift, click on the back “D” letter to select both of those vector objects. If you don’t already have the Pathfinder Panel open, go to Window > Pathfinder (Shift + Ctrl/Cmd + F9). Alt/Option + click on the Unite Pathfinder icon, and then click on the Expand button.

Connecting the 3D Text

Select the “S”, press Ctrl/Cmd + C to copy, and then press Ctrl/Cmd + F to paste in front so that we end up with two small “S” shapes. Click on one of the “S” shapes and the top part of the “S”, Alt/Option + click on the Unite Pathfinder icon, and then click on the Expand button. This will add the two shapes together and add a little bump on the right side, which we need to get rid of. Click on the shape with the Selection Tool (V) and then switch to the Pen Tool (P). Click on the undesired anchor points to delete them. Take the other “S” shape and the darker bottom shape of the “S”, Alt/Option + click on the Unite Pathfinder icon, and then click on the Expand button.

With the “G”, just combine the two visible shapes by clicking on the Unite Pathfinder icon.

Connecting the 3D Text

Step 7: Adding Color Gradient

Next, we need to figure out where our light source is coming from so that we have consistent lighting. Let’s decide now that we are going to make the light come from the top of our composition.

So, with the light source in mind, we are going to start adding in our gradients by clicking each piece and adding in the light and dark gradients that we saved in our Swatches Panel. You can adjust the gradient with the Gradient Tool (G) in the Tools Panel after you have applied it. Afterwards, change the face of the letters to a muted yellow shade (#E8DC86).

Adding Color Gradient

Step 8: Creating the Second Line of Text

Use the Type Tool (T) to write out “INSTRUCT” with the font, Myriad Black Condensed (or your preferred bold, condensed, sans-serif font). Position it below our “DESIGN” text. Go to Type > Create Outlines. Then go to Effect > Warp > Arch and change the Vertical option to 10% to make the text appear as if it is laying on the ground.

Creating the Second Line of Text

Step 9: Enhancing the Grass in Photoshop

Open the Grass image again, but this time, in Photoshop. We are going to do some color adjustments to the grass so it looks a little greener.

Go to Image > Adjustment > Replace Color. Click on the green and brown/tan area (holding Shift and clicking on different areas of the image you want to sample from will add to the selection), and then adjust the hue to a stronger green color.

Enhancing the Grass in Photoshop

Step 10: Removing the Sky from the Grass Image

Open up Photoshop and create a new 1200×1200px document. This is the document where we will bring our composition together.

First, bring in the grass image that we just enhanced in the previous step, and then use Free Transform (Ctrl/Cmd + T) to resize the image so that it is the same width as the document.

We are going to chop off the sky of the image. To do that, we are going to use the Pen Tool (P) to create a path that surrounds the sky part of the grass image. Go to the Paths Panel (Window > Paths) and Ctrl/Cmd + click on the path we just made to load a selection around the sky. Go back to the Layers Panel, click on the grass layer in the Layers Panel to make it the active layer, and then press Delete to remove the sky.

Enhancing the Grass in Photoshop

Step 11: Bring in the 3D Text from Illustrator

Let’s go back to our Illustrator document and copy our “DESIGN” text, and then switch back to Photoshop and paste it on there. Do the same with our “INSTRUCT” text. Since we used the same document dimensions (and used the grass image as a reference for alignment), pasting it into Photoshop preserves the positions of our text. If this isn’t the case, just use the Move Tool (V) to move the text around so that they are positioned in the canvas properly.

Bring in the 3D Text from Illustrator

Step 12: Creating the Cliff

Let’s start working on the cliff that will be at the bottom of our composition. Go get the Cliff stock image I listed in the Tutorial Resources section above, and then bring it into our canvas. Rotate it 180o with Free Transform (Ctrl/Cmd + T) and scale it down so that it is the same size as our canvas. Move it behind the grass layer.

Creating the Cliff

Step 13: Create a Grassy Edge Using a Photoshop Brush

To give the edge where our grass and cliff meets a more organic look, we’ll need to do some retouching. Select the grass layer, then go to Layer > Add Layer Mask > Reveal All. Use the Rectangular Marquee Tool (M) to create a selection around the bottom part of the grass. I toggled off the visibility of my text layers temporarily so that I can focus on this part of the process.

Switch your Foreground Color to black (#000000), then hit Alt/Option + Backspace to fill the selected area with your Foreground Color. This should mask out the selected area (a refresher: When painting on layer masks–black hides, white reveals).

Now we are going to gradually fill back the hidden area using a Photoshop brush. First, switch to the Brush Tool (B). Then go to Window > Brushes (F5) and uncheck the Scattering, Color Dynamics, and Other Dynamics options.

Click on the Brush Tip Shape option, locate the Grass brush tip shape in the preview pane on the right, and change its angle to 180o.

Now we can start using our brush on the area we masked away. Select white (#FFFFFF) as our Foreground Color and drop the size of the brush down to around 60px Master Diameter. Start painting away some of the bottom edge of the grass to create a more natural boundary between the grass and the cliff.

Create a Grassy Edge Using a Photoshop Brush

Step 14: Enhancing the Cliff

Click on the cliff layer and go to Image > Adjustment > Levels to open up the Levels dialog window. Bring the left slider in a little bit to bring out more of the blacks and darken the image a little bit.

Enhancing the Cliff

Let’s add some shadows to the cliff. Pick a brownish greenish color (#1F1C09) for our Foreground Color. We choose this color because the green grass is going to cast a shadow on the brown cliff, so we want to show that in our color selections. Create a layer above the grass and the cliff. Use the Brush Tool (Hardness: 0%, Master Diameter: 20px) to paint on the top surfaces of the cliff. When finished, change the Blend Mode of the layer to Soft Light.

Create a new layer and use a bigger brush tip (Master Diameter: 100px) to paint just below the grass to give these areas a stronger shadow. Change the Blend Mode of the layer to Multiply and lower the Opacity to 50%.

Create another layer below the grass layer, and paint under the grass. Change the Blend Mode of this layer to Multiply.

Enhancing the Cliff

Step 15: Adding Highlights on the Grass

To give the grassy edge some nice highlighting, we are going to create a new layer and add a white-to-0%-opacity color gradient using the Gradient Tool. To do this, first, change your Foreground Color to white (#FFFFFF). Then switch to the Gradient Tool (G). In the Options Bar, click on the Gradient Editor and then choose the Foreground to Transparent gradient preset. Then create our gradient on the new layer, starting from the bottom of the canvas, and going towards the top.

Adding Highlights on the Grass

Go to Layer > Layer Mask > Reveal All. Use a black brush–with 0% Hardness and about 125px Master Diameter–to paint away the cliff and some of the bottom portions of the grass.

Adding Highlights on the Grass

Change the Blend Mode of the layer to Overlay and lower the Opacity to 30%. This will give the grass a highlight as well as a shadow effect on the front of the grass.

Adding Highlights on the Grass

Step 16: Adding the Cityscape

Let’s go grab our Cityscape stock image and open it up in Photoshop. Isolate the buildings by using your favorite method (such as using the Pen Tool to draw around them and then copying the selection) and bring them into our canvas. Shrink down the cityscape with Free Transform and locate it on the horizon of the grass with the Move Tool (V). Duplicate the cityscape layer (Layer > Duplicate Layer), then go to Edit > Transform > Flip Horizontally.

Adding the Cityscape

Using the Polygonal Lasso Tool (L), take off the big building on the right side of the duplicate to create some variance between the left and right sides of our cityscape.

Adding the Cityscape

Step 17: Adding the Sky

Grab this Sky stock image and place it into our canvas. This layer should be behind the cityscape layers.

Adding the Sky

Step 18: Enhancing the Realism of the Grass around the Text

Select the grass layer and the white-to-transparent highlight layer that’s on top of it, then combine them by going to Layer > Merge Layers.

To work on the grass in front of the “DESIGN” text block, use the Rectangular Marquee Tool (M) to load a selection around the front of the text block, click on the grass layer in the Layers Panel to make sure it’s the active layer, then go to Layer > Duplicate Layer to place the selected area in a new layer.

Enhancing the Realism of the Grass around the Text

Move this layer above the 3D text, then go to Layer > Layer Mask > Hide All.

We need to make the grass blend better with our text. Let’s use our Grass brush again with the same settings as before. Brush away the bottom part of the “DESIGN” text block until you get a satisfactory result.

Step 19: Adding Shadows to the Text

Now we are going to create a drop shadow under the text. Ctrl/Cmd + click on the text layer’s preview thumbnail in the Layers Panel to make a selection around our text. Go to Layer > New > Layer to create a new layer above the text layer and fill the area underneath the selection with black (#000000).

Go to Layer > Duplicate Layer so you have two black text layers. Click on the first black layer in the Layers Panel to make it the active layer, go to Filter > Blur > Gaussian Blur (set the Radius to 4px), and run the filter on it.

Adding Shadows to the Text

Run the Gaussian Blur filter again on the second black layer, but this time, set the Radius of the filter to 10px.

We will have some excess shadows that we don’t want, so we’ll use a layer mask to get rid of those. Go to Layer > Add Layer Mask > Reveal All to place a mask on the black text layers, and just start painting away the unwanted portions of the shadows.

Adding Shadows to the Text

Step 20: Adding Textures to the Scene

Time to “grungify” our piece, starting with our 3D text. To kick things off, download the Cracked Texture and theExperimental Texture, then open them in Photoshop.

Bring the Experimental texture into our main document and use Free Transform to size it so it fits over our text. Ctrl/Cmd + click on the text layer’s thumbnail in the Layers Panel to load a selection around it. You should still be on the Experimental texture layer (if not, switch back to it). Go to Select > Inverse and delete the selected area. Change the Blend Mode of the Experimental texture layer to Color Burn and lower its Opacity to 50%.

Adding Textures to the Scene

Now bring in the Cracked texture and do the same thing, except change the Blend Mode to Soft Light (instead of Color Burn).

Adding Textures to the Scene

Download this Film Texture and open it in Photoshop. Place it into our main document, making sure that it is covering the entire canvas. Change the Blend Mode of the Film texture layer to Soft Light.

Go to Image > Adjustments > Curves and perform adjustments so as to lighten up the layer a bit so that it’s not too harsh.

Adding Textures to the Scene

Adding Textures to the Scene

Step 21: Adjusting the Scene’s Colors

We are going to adjust the color of our scene now, just to try and tie everything together better.

First, we will use a Gradient Map adjustment layer; go to Layer > New Adjustment Layer > Gradient Map to add one on top of all the layers. Change the Blend Mode of the Gradient Map layer to Soft Light and reduce the Opacity to 40%.

Adjusting the Scene's Colors

We’ll add another adjustment layer; Go to Layer > New Adjustment Layer > Hue/Saturation. Change the Saturation option to about -70. This should dramatically change our composition’s colors so that it has this sort of faded, retro/vintage look to it.

Adjusting the Scene's Colors

Step 22: Softening the Edges of the Canvas

Let’s soften up the edges of the piece a bit so that we draw better attention to our centerpiece. Use the Rectangular Marquee Tool to place a selection around the canvas–but ever so slightly smaller than it–adjust the Feather option to 60px in the Options Bar, go to Select > Inverse (Shift + Ctrl/Cmd + I), and fill the inverted selection with black. Change the Blend Mode to Overlay afterwards.

Softening the Edges of the Canvas

Step 23: Final Adjustments and Enhancements

It’s best to save your work before doing this step so that you can go back to your work and modify it later on.

Go to Layer > Flatten Image to combine all of our layers into one layer. Go to Layer > Duplicate Layer to duplicate our flattened layer, then Filter > Other > High Pass (set the Radius at about 4.3px before your execute the filter).

Final Adjustments and Enhancements

Change the Blend Mode of the layer to Soft Light.

Flatten the image again. Use the Elliptical Marquee Tool (M) with Feather at 60px to make a circle in the middle of the canvas that covers the text. Go to Select > Inverse. Then go to Filter > Blur > Gaussian Blur with the Radius set at about 1.8px.

Final Adjustments and Enhancements

This should slightly blur the areas around the text to give our centerpiece a better focal point as well as enhance our depth of field.

Tutorial Summary

In this tutorial, we used Illustrator to produce some interesting 3D text. We then built our composition in Photoshop using various techniques such as smooth-blending edges using layer masks and a Photoshop brush, applying image adjustments, using adjustment layers to control the scene’s colors, and more.

Here is what I came up with; make sure to link to your version in the comments (and add it to our Flickr group)!

Download Source Files

Incoming search terms:

  • illustrator map texture
  • photoshop tutorials text effects
  • psd text action
  • free photoshop tutorials text effects
  • photoshop texture
  • textures for landscape
  • 3d yazı psd
  • cracked pattern photoshop
  • text effect tutorial
  • free flyer templates psd

How to retouch photos pro techniques in 10 easy steps

How to retouch photos on photoshop – pro techniques in 10 easy steps

With fashion and portrait retouching, the devil really is in the detail; you might want to enlarge the eyes a little, remove a few spots, lighten the skin, or even reduce the size of the feet! It’s all work that requires you to get up close and personal, not something you can accomplish with a quick sweep of the brush at 50% zoom. And this is what makes the use of layers and layer masks crucial when you retouch photos: if you make a mistake, you can easily delete or edit the layer and have another go.

Do that same work on the original background layer and you might find, 20 minutes down the line, that you’ve got a wonky arm, one eye bigger than the other and skin that looks like a Botox accident.

It’s not until you see all the elements working together that you can really decide whether something looks right or needs a little tweak here and there – which is easily done when everything sits on separate layers.

In this Photoshop tutorial we’ll cover subtle body slimming and reshaping, skin smoothing and colouration, and background lightening, all on different layers, as well as hopefully give you some new Photoshop tips along the way. All you’ll need for this project is Photoshop CS or above and about 30 minutes.

Our start image

1 Start Instant slimming
We’re going to start with an old trick to slim our model a touch – not that she needs it, but just to show you how it’s done. Open your start image and duplicate the original Background layer by pressing Ctrl-J.

How to retouch photos like a professional: step 1

Next press Ctrl-T to initiate a Free Transform. In the options bar at the top of the screen type 97% in the Width box and hit Enter twice.

 

How to retouch photos like a professional: step 2

2 Crop out the left edge
We need to crop out the left edge of the shot, where the chair now looks skewed – the right side is fine because it’s just white background. Press C for the Crop Tool, zoom in using Ctrl and + and line up the bottom-left edge so you don’t lose more than you have to before extending the crop around the picture. When you’re happy, hit Return.

 

How to retouch photos like a professional: step 3

3 Select the rear
Next we’ll slim down a part of the model’s body. Switch to the Lasso Tool (L) and draw a rough selection freehand around her back and bum, as shown. Float this selection to a new layer by pressing Ctrl-J and then go to Filter > Liquify. Adjust the brush size until it’s about one-sixth of the size of the selection.

 

How to retouch photos like a professional: step 4

4 Liquify the body
Now carefully work down the edge of the dress, using your mouse to drag inwards from the very edge of the clothing towards the body. Try to get the back looking straight and uniform, switching to a smaller brush to iron out little kinks if required. Hit Enter when you’re happy.

 

How to retouch photos like a professional: step 5

5 Check the joins
Zoom in close to check that any reshaped fabric creases and patterns line up with any areas of the dress that we didn’t liquify. You can blend those that don’t by adding a layer mask, clicking it to target the mask and brushing over the join with a soft-edge black brush. Next zoom in to 200% and hold down to the spacebar to drag over to the face. Add a new layer (Layer > New > Layer).

 

How to retouch photos like a professional: step 6

6 Clean up the skin
Switch to the Spot Healing Brush (J), and make sure the tool is set to Sample All Layers in the options bar at the top. Now work around the face clicking on blemishes, using a brush size just slightly bigger than the blemish at hand in each case. Switch to the Clone Stamp Tool when near edges of the mouth and nose to avoid blurring the features. In the options bar, set the Sample menu to Current And Below.

 

How to retouch photos like a professional: step 7

7 Smooth out rough areas
Add a Curves adjustment layer and drag a point in the shadows sector upwards to lighten the shadows on the skin. Click OK, target the layer’s mask and press Ctrl-I to hide the effect. Tap D, then X if need be to set the foreground colour set to white, and use a soft brush to paint over the neck to lighten the shadows.

To smooth the skin a touch, target Layer 3, then press Ctrl-Alt-Shift-E to create a new layer that merges all of the existing layers. Go to Filter > Blur > Gaussian Blur and set Radius to 3 pixels. Hit OK, then add a mask to this layer by clicking the “Add layer mask” button at the foot of the Layers palette.

 

How to retouch photos like a professional: step 8

8 Paint in this smoothing
To turn the mask black and hence mask out your new blurred layer, click the mask thumbnail to target the mask and then press Ctrl-I. Now tap X if need be to set the foreground colour to white. Using a soft-edged brush of around 50 pixels in size, paint onto areas of the skin that look a little rough, to effectively cut a hole in the black mask and reveal the smoothed skin, avoiding facial features or areas of detail.

 

How to retouch photos like a professional: step 9

9 Lighten the skin
We want to tone down the model’s tan too, so add another Curves adjustment layer, then reshape the curve roughly as shown above. Click OK, target the mask and then press Ctrl-I to conceal this adjustment. With the foreground colour set to white, use a soft-edged brush to paint over the skin, cutting a hole in the mask to apply the Curves adjustment to these areas. Avoid painting over the red dress!

 

How to retouch photos like a professional: step 10

10 Finish Adjusting skin colour
Holding down the Ctrl key, click the Curves layer’s mask to load it as a selection. With the selection active, add a Selective Color adjustment layer: the layer’s effect will be limited to the same areas. Choose Yellows from the dialog’s Colors menu and set Yellow to –100% and Black to +100%. Click OK and save the image as a PSD to preserve all the layers so you can revisit them later if you want to tweak them.

 

Using Layers

Because using Adjustment Layers and layer masks is so crucial to advanced portrait retouching, we created this handy cheat sheet to better illustrated what we did and how all the layers fit together when you retouch photos.

Click on the infographic to see the larger version, or drag and drop it to your desktop to download it. And if you find this useful, you might like some of the other infographics in our ongoing photography cheat sheet series.

How to retouch photos like a professional: a quick and easy 10-step Photoshop tutorial

Incoming search terms:

  • jewelry retouching tutorial
  • professional jewellery retouching tutorials
  • trick jewelry photoshop
  • all 80s skateboards
  • photoshop layers cheat sheet
  • buttons psd music
  • skate 1980s
  • Jewelry later retouching tutorial
  • pohtos edting free
  • Jewelry Retouching free tutorial

60 Cool Photoshop Effects Resource

60 Cool Photoshop Effects Resource

Photoshop has given us unlimited possibilities to reinvent our creativity. There are numerous Cool Photoshop Effects Resource which will take you through the step by step procedure of turning a simple image in too most cherished image of your life.

Photoshop is full of various tools which makes your work much simpler and better. These tools also helps you in creating professional results.

Choosing out the best and cool Photoshop effects resources reduces your worries and you can get various detailed as well as advanced level tutorials on mastering a tool or technique you are looking for. Our today’s list of 60 Cool Photoshop Effects Resource will tell you how to get the best out of Photoshop effects techniques. You can bookmark this comprehensive series of important tutorials as use them as your personal guide whenever you like.

Photoshop Effects Tutorials

Photoshop Effects Tutorials will take you to a new world where you can create any thing you imagine. You can play with colors, create beautiful scenery, create surreal or horror manipulation scenes, add light and abstract effects, creating advertisements and much more. Check out this set of collection of Photoshop Effects Tutorials.

Making of “Color Combustion” a Photo Manipulation

In this Photoshop tutorial learn the process of making of a digital photo manipulation called Color Combustion.

Making of “Color Combustion” a Photo Manipulation

More information on Making of “Color Combustion” a Photo Manipulation

Create a Colorful Woodpecker and Tree Scenery

This tutorial is a perfect one for brushing your Photoshop and drawing skills.

Create a Colorful Woodpecker and Tree Scenery

Advertisement

More information on Create a Colorful Woodpecker and Tree Scenery

Combine Photo Elements to Create a Surreal Photo Manipulation

Here you will learn how to use a variety of color, lighting, and cut and paste techniques to create a surreal photo manipulation.

Combine Photo Elements to Create a Surreal Photo Manipulation

More information on Combine Photo Elements to Create a Surreal Photo Manipulation

Create A Speeding Car Scene With Light Effects In Photoshop

Create a composition that blends together various stock images to create a cohesive scene. In addition, we will be using some cool Photoshop tricks to add light effects to the design.

Create A Speeding Car Scene With Light Effects In Photoshop

More information on Create A Speeding Car Scene With Light Effects In Photoshop

Create a Cool Liquid Text Effect with Feather Brush Decoration in Photoshop

Create this Cool Liquid Text Effect with Feather Brush Decoration in Photoshop. This is an intermediate level tutorials and some steps can be a bit tricky for the newbies.

Create a Cool Liquid Text Effect with Feather Brush Decoration in Photoshop

More information on Create a Cool Liquid Text Effect with Feather Brush Decoration in Photoshop

Faking a Dental Ad: From Gorgeous to Gross – Reverse Cosmetic Dentistry

Photshop is widely used for creating advertisements. Make a one for Dental clinic through this tutorial.

Faking a Dental Ad: From Gorgeous to Gross – Reverse Cosmetic Dentistry

More information on Faking a Dental Ad: From Gorgeous to Gross – Reverse Cosmetic Dentistry

The Making of “Climb” – An Awesome 3D Text Composition in Photoshop

In this tutorial, you’ll learn how to create 3D text within Photoshop, along with a nice stylish background, and then apply textures and bring out some awesome details in your work.

The Making of “Climb” – An Awesome 3D Text Composition in Photoshop

More information on The Making of “Climb” – An Awesome 3D Text Composition in Photoshop

Design Awesome Grungy Text Effect with Stone Texture in Photoshop

Author will show you the steps he took to Design Awesome Grungy Text Effect with Stone Texture in Photoshop. The main focus of this tutorial is how you quickly apply textures and stock images to create great text effect.

Design Awesome Grungy Text Effect with Stone Texture in Photoshop

More information on Design Awesome Grungy Text Effect with Stone Texture in Photoshop

Making of the Imaginary Paint Dancers

Learn how to make Imaginary Paint Dancers through this tutorial.

Making of the Imaginary Paint Dancers

More information on Making of the Imaginary Paint Dancers

Fantastic Disintegration Effect inspired by Watchmen in Photoshop

In this tutorial Author will show you how to create the disintegration effect using brushes and the blur filter.

Fantastic Disintegration Effect inspired by Watchmen in Photoshop

More information on Fantastic Disintegration Effect inspired by Watchmen in Photoshop

Dreamy photo effect

In this tutorial we will take a photo and use different color adjustments and something like pattern floral brushes to make it better or to make a different mood to our picture.

Dreamy photo effect

More information on Dreamy photo effect

Easy Photoshop Effects

Photoshop Effects are not that difficult to master if you start your learn with Easy Photoshop Effects tutorials. It will give you detailed knowledge and stepby step description, which is missing in advanced level tutorials. So enjoy learning Photoshop with below mentioned list of Easy Photoshop Effects.

How to Use and Create Brushes in Adobe Photoshop

This tutorial will show you how to get and use brushes. Then how to install them, and finally how to use them. The second part of the video is how to make your own brush.

How to Use and Create Brushes in Adobe Photoshop

More information on How to Use and Create Brushes in Adobe Photoshop

Create Widescreen Wallpaper via Image Merging in Photoshop

In this tutorial, author will show you how you can Create Widescreen Wallpaper via Image Merging in Photoshop.

Create Widescreen Wallpaper via Image Merging in Photoshop

More information on Create Widescreen Wallpaper via Image Merging in Photoshop

Create a Greeting Card for Christmas and New Year

A very detailed tutorial where author will show you how to create a greeting card for Christmas and New Year Holidays to impress your relatives and friends. This Photoshop tutorial is very simple but the result looks so amazing

Create a Greeting Card for Christmas and New Year

More information on Create a Greeting Card for Christmas and New Year

Photoshop Tutorial To Enhance Photos and Still Keeping Skin Pores

Here is a simplified guide on How to Get Your Photos Enhanced Naturally Without Having To Learn All The Tools In Photoshop and Still Keeping Skin Pores.

Photoshop Tutorial To Enhance Photos and Still Keeping Skin Pores

More information on Photoshop Tutorial To Enhance Photos and Still Keeping Skin Pores

Create Your Own Social Icon Stickers

In this tutorial author will run you through some simple steps to create some social networking icon stickers you can use on a website or any other project you want to use them for.

Create Your Own Social Icon Stickers

More information on Create Your Own Social Icon Stickers

How to remove objects from an image

This is a common task using Photoshop in works for clients. They give you their source image and you must “clean it”. This require of patience and analyzing the image you will work with.

How to remove objects from an image

More information on How to remove objects from an image

Create a Roadmap Poster in Photoshop

Learn how to create a very simple but a pretty roadmap poster in Photoshop. In this tutorial author will use layer styles, blend modes and a little of adjustments layers.

Create a Roadmap Poster in Photoshop

More information on Create a Roadmap Poster in Photoshop

How to Use Blending Modes in Photoshop

This tutorial shows you how to use blending modes in Photoshop for a variety of effects. Knowing how blending modes work can really help you get the job done in a wide variety of situations.

How to Use Blending Modes in Photoshop

More information on How to Use Blending Modes in Photoshop

How to correctly position subjects in an image

How many times we look at a montage and instinctively we detect there something wrong; the subject clearly looks superimposed. There is a very simple rule that applies in every image and it can make your subjects really appear like they were originally in the shot.

How to correctly position subjects in an image

More information on How to correctly position subjects in an image

Getting Started with Photoshop Article

Here author will cover some of the basic tools and tasks that will be drawn on in the later chapters.

Getting Started with Photoshop Article

More information on Getting Started with Photoshop Article

Scary Photoshop Effects

Photoshop is not only used to beauty or enhance an image. Photoshop can also be used to show distructive or scary effects. You can create a effect to show how our planet will look without trees or without water, or you can create any sort of Photomanipulation to create a scary look. Enjoy this list of Scary Photoshop Effects.

“Mysterious Hollow. Dark landscape.”

Learn how to make a Mysterious Hollow effect in this amazing tutorial.

“Mysterious Hollow. Dark landscape.”

More information on “Mysterious Hollow. Dark landscape.”

Scared Photomanipulation Tutorial

Author will teach you some basic things about Photomanipulation through this tutorial.

Scared Photomanipulation Tutorial

More information on Scared Photomanipulation Tutorial

Torture a Man and Stitch Him Up

Transform a man into a torture victim with a couple tricks and some basic tools.

Torture a Man and Stitch Him Up

More information on Torture a Man and Stitch Him Up

Design a Dramatic and Surreal Rainy Scene with Photoshop

Learn all about how to manipulate images and combine them to create surreal scenes, in this case a rainy scene.

Design a Dramatic and Surreal Rainy Scene with Photoshop

More information on Design a Dramatic and Surreal Rainy Scene with Photoshop

How to Create a Mythical Creature Photo Manipulation

A premium tutorial on how to create a mythical creature photo manipulation.

How to Create a Mythical Creature Photo Manipulation

More information on How to Create a Mythical Creature Photo Manipulation

Design a Surreal Desert Scene in Photoshop

In this tutorial author is going to show you how to create a surreal time-themed photomanipulation using Photoshop.

Design a Surreal Desert Scene in Photoshop

More information on Design a Surreal Desert Scene in Photoshop

Create an Alien Invasion Photo Manipulation in Photoshop

In this tutorial author will explain you how to create a destroying city manipulation by using some basic techniques like color correction, masking and brushes.

Create an Alien Invasion Photo Manipulation in Photoshop

More information on Create an Alien Invasion Photo Manipulation in Photoshop

Matte Painting Tutorial

Here is one matte painting author did long time ago. He thought some people want to see how you can create matte painting and maybe to clear some things about it.

Matte Painting Tutorial

More information on Matte Painting Tutorial

Making of Renaissance

Learn how to make Renaissance in Photoshop using Matte painting technique

Making of Renaissance

More information on Making of Renaissance

End of the World Photo Manipulation

Learn how to make a seen of end of the World through Photo Manipulation.

End of the World Photo Manipulation

More information on End of the World Photo Manipulation

Photoshop Photo Effects

Photographs are our treasure of memories and we want to click each Photograph to make it the best memory of our life. But not every image can be rated ten out often. When its difficult to create that memory again, Photoshop comes as a saviour with its Photoshop Photo Effects. You can retouch a Photograph to give it a complete makeover or restore an old one. Check out the best techniques with these Photoshop Photo Effects

Beautiful Facial Make Up Photoshop Retouching Tutorial

In this tutorial author will show you how you can dramatically change one woman’s face with simple photoshop techniques. Author will try to create unrealistic woman portrait. The face will have a plastic look, and author will try to create an effect between a plastic girl and a cartoon image.

Beautiful Facial Make Up Photoshop Retouching Tutorial

More information on Beautiful Facial Make Up Photoshop Retouching Tutorial

How to Retouch a Photo

In this tutorial author will show you how to retouch a picture of a person and get the image more celebrity-like or magazine-worthy (in society’s eyes, not mine), without getting an airbrushed look.

How to Retouch a Photo

More information on How to Retouch a Photo

Advance masking

Second part for the advance masking series using Calculations Photoshop tutorial.

Advance masking

More information on Advance masking

Complete portrait retouching

In this tutorial author will tell you how to make a complete portrait retouch. You will know how to remove blemishes, retouch and enhance the skin, eyes, eyebrows, lips, as well as improve the highlight and shadow to make your picture look natural, vivid and beautiful. During this process many different techniques are shown and everything is explained in detail.

Complete portrait retouching

More information on Complete portrait retouching

Beautify a Face

This Photoshop tutorial will show you how to beautify a face. The corrections that we’re going to do will make the face look different, but at the same time we avoid to make the results look unnatural like we tend to see in other Photoshop tutorials.

Beautify a Face

More information on Beautify a Face

How to create a glamour style composition using patterns and masks

In today’s tutorial you will learn how to give a photo a complete glamour style using patterns and masks in Adobe Photoshop. Layered PSD file included.

How to create a glamour style composition using patterns and masks

More information on How to create a glamour style composition using patterns and masks

Enhance portrait photo with natural look

In this tutorial author will show you a way that gives your portrait a very nice, smooth but still very natural look. Your photo wil have a real skin with lively skin, nice shadow and highlight, lively and sexy lips and eyes. It gives you the best and natural look that’s possible.

Enhance portrait photo with natural look

More information on Enhance portrait photo with natural look

How To Repair Scratches, Tears, and Spots on an Old Photograph

In this tutorial you will learn how to repair cracks, scratches, and spots so this photo of the Swedish Nightingale, Jenny Lind, looks just like new. We will purposely avoid using some of the quick fix tools such as the healing brush so that you can gain an understanding of the basics of photo restoration.

How To Repair Scratches, Tears, and Spots on an Old Photograph

More information on How To Repair Scratches, Tears, and Spots on an Old Photograph

Photoshop Skin Retouching

The skin retouching is recommended if pimples, spots and light reflections let the skin effect of restlessness and unclean. The effect of the retouching is silky-smooth skin that will look even more natural.

Photoshop Skin Retouching

More information on Photoshop Skin Retouching

Crazy Photoshop Effects

The possibilities with Photoshop are endless. You can create anything which is in your mind. To fullfil the creative hunger, designers can create some really amazing and Crazy Photoshop Effects which will energize your interest level. Check our list of Crazy Photoshop Effects below.

How to Create an Outstanding Wallpaper Design in Photoshop

Here author will create a textured abstract design in Photoshop using stock photos, brushes and a few guidelines regarding the composition.

How to Create an Outstanding Wallpaper Design in Photoshop

More information on How to Create an Outstanding Wallpaper Design in Photoshop

Photoshop Water Reflection

In this Photoshop photo effects tutorial, we’re going to learn how to easily add a realistic water reflection to any photo. It’s a very easy effect to create and you can add it to any photo you like, although it tends to work best with images that don’t already contain water in them.

Photoshop Water Reflection

More information on Photoshop Water Reflection

Banana style text effect

Learn how you can create a Banana style text effect in Photoshop.

Banana style text effect

More information on Banana style text effect

Pitch

In order to practice and improve on certain aspects of painting author often do quick sketches with a specific theme or subject matter. The drawing “Pitch” was one of these ‘test-paintings’; author started working on it with the intention of creating a very complex scene, but not over detailing it. Detail in the wrong place can hurt the overall picture, as it distracts the viewer from where he should be looking instead.

Pitch

More information on Pitch

Getting Started With Digital Matte Painting – Workflow, Techniques and Walkthrough

Welcome to this tutorial on the basic work?ow for a general matte painting, hope you like it and learn something from it. This is not an extremely advanced tutorial yet the author assume you have knowledge of Photoshop masks, adjustment layers and custom brush creation, if not there are several tutorials online that cover all these techniques.

Getting Started With Digital Matte Painting – Workflow, Techniques and Walkthrough

More information on Getting Started With Digital Matte Painting – Workflow, Techniques and Walkthrough

How to Create a Matte Painting Inspired Scene

In this Adobe Photoshop tutorial, we are going to go over a method for composing a beautiful matte painting style scene. Matte paintings are typically used in movies to create expensive or surreal landscapes and scenes that are stitched together with regular footage.

How to Create a Matte Painting Inspired Scene

More information on How to Create a Matte Painting Inspired Scene

How to Combine Digital Painting and Photo Manipulation to Create a Platform Environment

In this tutorial, you will learn how to combine digital painting and photo manipulation to create polished fantasy art. The process of combining digital painting and photo manipulation is a great mix. It truly allows you conquer the world with beautiful illustrations.

How to Combine Digital Painting and Photo Manipulation to Create a Platform Environment

More information on How to Combine Digital Painting and Photo Manipulation to Create a Platform Environment

Matte painting tutorial

Explained here is the process of creating a mattepainting, including basic painting techniques, using 3d elements and composing them inside your painting as well some ways of color-grading.

Matte painting tutorial

More information on Matte painting tutorial

Create Cracked 3D Stone Text Effect with Photoshop and Cinema 4D

In this tutorial we are going to create realistic stone text effect with Photoshop and Cinema 4D.

Create Cracked 3D Stone Text Effect with Photoshop and Cinema 4D

More information on Create Cracked 3D Stone Text Effect with Photoshop and Cinema 4D

Create Bring Me To Life Photo Manipulation Scene

In this tutorial you will learn different photomanipulation techniques such as how to implement stock photos in your picture, how to combine them together to create a surreal image and how to use the 3D tool of Photoshop to give your piece a better look.

Create Bring Me To Life Photo Manipulation Scene

More information on Create Bring Me To Life Photo Manipulation Scene

Best Photoshop Effects

Photoshop is all about your creativity level. You can create better than the best designs with the helpof Photoshop. Have a look at following Best Photoshop Effects and alsolearn how the authors have created these Best Photoshop Effects.

Create a Fictional Arctic Snow Frog in Photoshop

Here author will combine several stock images and effects to create a fictional arctic snow frog in Photoshop

Create a Fictional Arctic Snow Frog in Photoshop

More information on Create a Fictional Arctic Snow Frog in Photoshop

Roses bouquet splash effect

This is step by step Photoshop tutorial that teaches you how to create blurred, bokeh effect background and beautiful splash effect for Roses bouquet. You will use milk splashes, filters and layer style effects

Roses bouquet splash effect

More information on Roses bouquet splash effect

Create Bring Me To Life Photo Manipulation Scene

In this tutorial you will learn different photomanipulation techniques such as how to implement stock photos in your picture, how to combine them together to create a surreal image and how to use the 3D tool of Photoshop to give your piece a better look.

Create Bring Me To Life Photo Manipulation Scene

More information on Create Bring Me To Life Photo Manipulation Scene

How To Build a Stylish Portfolio Web Design Concept

In this particular article author will create the visual concept and overall design concept in Photoshop, using various effects, blending modes and layer styles to create all the detailed elements of the design.

How To Build a Stylish Portfolio Web Design Concept

More information on How To Build a Stylish Portfolio Web Design Concept

Untouched Signature Photoshop Tutorial

In this tutorial author will show you how to piece together a simple, but great looking signature in Photoshop. We will be making use of the smudge tools and some image adjustments filters as well. You don’t have to be pro to follow this simple tutorial.

Untouched Signature Photoshop Tutorial

More information on Untouched Signature Photoshop Tutorial

Create a Fallen, Rain-Soaked, Angel Composition in Photoshop

Here author will demonstrate how to create a lonely, fallen, rain-soaked, angel composition in Photoshop using photo manipulation techniques.

Create a Fallen, Rain-Soaked, Angel Composition in Photoshop

More information on Create a Fallen, Rain-Soaked, Angel Composition in Photoshop

Water effect photo montage

Learn how you can create a Water effect photo montage through this tutorial.

Water effect photo montage

More information on Water effect photo montage

How to Create a Conceptual Headdress in Photoshop

In this tutorial, author will create a really cool conceptual headdress using stock photos, Photoshop and his imagination.

How to Create a Conceptual Headdress in Photoshop

More information on How to Create a Conceptual Headdress in Photoshop

Abstract Celeb Sig Tutorial

This is an abstract tutorial for making a sig in PhotoShop CS2, or a similar version/program.

Abstract Celeb Sig Tutorial

More information on Abstract Celeb Sig Tutorial

Facing a New Day – Photoshop Manipulation

In this manipulation tutorial author will show you how to create a really nice sunrise scene. He will also show you how to transform a day picture into a sunrise using some adjustment layers and gradient maps.

Facing a New Day – Photoshop Manipulation

More information on Facing a New Day – Photoshop Manipulation

Incoming search terms:

  • cool photoshop
  • cool photoshop effects
  • cool photoshop pictures
  • FLYING TEXT EFFECT PHOTOSHOP
  • cool photo effects
  • padlock cinema 4d model
  • photoshop lighting effect psd
  • text light photoshop tutorial
  • The World of Nature in the City psd for Photoshop
  • photoshop amazing effects

Sponsored Ads

Ad
40

Apply a Fantastic Lighting and Coloring Effect on Images

I will be showing you how to take a stock image and turn it into a futuristic composition that uses various Photoshop techniques. We will be doing some work with Brush tool and implementing color and light effects to achieve the end result. If you are ready then start up Photoshop and let’s get started.

Final Image Preview

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Start working by creating a new document (Ctrl+N) in Adobe Photoshop with the size 1024px by 1280px (RGBcolor mode) at a resolution of 72 pixels/inch. Select the background layer in Layers panel and click on Add a layer style icon from bottom part of the Layers panel to select Gradient Overlay.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Click in the color bar to open the Gradient Editor and set the color stops as shown. Click OK to close theGradient Editor dialog box.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

We’ve got the next background:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Use now the Rectangle Tool (U) to represent a kind of surface like the next one:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Click on Add a layer style icon from bottom part of the Layers panel and select Inner Shadow.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Add Gradient Overlay:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Click in the color bar to open the Gradient Editor and set the color stops as shown. Click OK to close theGradient Editor dialog box.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

We’ve got the next result:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Create a new layer which must be filled using the Paint Bucket Tool (G) with #BBBCBA color.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Apply for this layer the enxt filter: Filter>Noise>Add Noise.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

We’ve got the next result:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Set Fill to 39% for this layer and change the Blending mode to Divide.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Create a new layer and select for it the Soft Round brush of black color (set Opacity to 20% in Options bar).

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Use this brush to make darker the surfaces’ edge as it is demonstrated on the next picture:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Find a stock photo, I used this photo from Shutterstock. I would like to thank the author of this photo, or if you prefer, you can substitute similar image of your own.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Remove the background using your favorite tools like Pen Tool (P)Magic Wand Tool (W)Magnetic Lasso (L)or even a simple Filter>Extract and insert it on a new layer in our main document.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Create the next new layer and select for it the Soft Round brush of white color (set Opacity to 20% in Options bar).

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Use this brush to paint on the girl’s image the certain indicated zones.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Set the Blending mode for this layer to Overlay.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Select Hard Mechanical brush and customize the brush in Brushes panel (F5), select theBrush Tip Shape. Click and drag any of the sliders to change the size and the brush spacingas show. The Preview window displays the changed brushstroke.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Go to Shape Dynamics:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Go to Color Dynamics:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Also set the colors correctly on the Tools bar.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Create a new layer and paint here with selected brush using different brush sizes to represent many colored small circles. The brush itself will change the colors.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Set the Blending mode for this layer to Screen.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Insert the mask on the layer by choosing Add layer mask on the bottom part of the Layers panel and choose theSoft Round brush of black color (set Opacity to 15% in Options bar).

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Paint in the mask using this brush to hide the circles edges as shown:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Create a new layer and apply here the earlier brush (Opacity – 20%) to insert more circles of bigger diameter:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Set the Blending mode for this layer to Linear Dodge.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Make a copy of the earlier made circles’ layer (with mask) and place it above all the layers. Apply for the copy’s layer the next filter: Filter>Blur>Gaussian blur.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

We’ve got the next result:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Set Fill to 0% for this layer and change the Blending mode to Color Dodge.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Make a copy of the recently made layer. Rasterize the copy’s layer by creating a new layer above the copy’s layer and press CTRL button when select both layers and press CTRL+E to Merge Down. Now apply the Smudge Tool (R) to smudge the circles laterally.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Make a copy of the last made layer and apply the same tool selected previously to process it the same way we did before.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Make a copy of the last made layer and select for it the next filter Filter>Blur>Gaussian blur.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

We’ve got the next result:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Make a copy of the last made layer and choose the Free Transform (Ctrl+T) command to turn over horizontally the copy’s layer.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Create a new layer and choose the earlier brush of small diameter to represent many colored small circles.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Click Create new fill or adjustment layer from bottom part of the Layers panel and click to Curves to adjust the curve shape as shown to make a little color corrections.

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

We’ve got the next result:

Apply a Fantastic Lighting and Coloring Effect on Images with Photoshop CS5

Finished!

Incoming search terms:

  • 20% button free psd
  • Paint brush psd
  • efek hard photoshop cs5
  • fantastic‑lighting‑and‑coloring‑effect jpg
  • psd file fantastic lighting
  • photoshop cs5 brush mode curve
  • fantastic efect psd template
  • cs5 photoshop tutorials filter
  • change color by brushes in photoshop cs5
  • brushes cs5 Kids

50

How to use texture effects to create beautiful compositions (CS5)

This tutorial is an example of how a few simple techniques can be used to create basics photo illustration using multiple layers, masking, the Pen tool, some basic lighting and one simple texture.

Start working by creating a new document (Ctrl+N) in Adobe Photoshop with the size 1280px by 1024px (RGBcolor mode) at a resolution of 72 pixels/inch.

Find a grunge texture, I used this texture from deviantart. I would like to thank the author of this photo, or if you prefer, you can substitute similar image of your own.

Download the next demonstrated texture and insert it on a new layer in our main document.

Create a new layer and select the Soft Round brush of black color ( set Opacity to 20% in Options bar).

Use this brush to dark out the left lowest corner of our canvas.

How to use texture effects to create beautiful compositions in Photoshop CS5

Set Fill to 73% for this layer and change the Blending mode to Linear Light.

How to use texture effects to create beautiful compositions in Photoshop CS5

Find a stock photo with a cool looking dancer represented on it, I used this photo from Shutterstock. I would like to thank the author of this photo, or if you prefer, you can substitute similar image of your own.

How to use texture effects to create beautiful compositions in Photoshop CS5

Remove the background using your favorite tools like Pen Tool (P)Magic Wand Tool (W)Magnetic Lasso (L)or even a simple Filter>Extract and insert it on a new layer in our main document. Apply Edit > Transform > Flip Horizontal.

How to use texture effects to create beautiful compositions in Photoshop CS5

Click on Add a layer style icon from bottom part of the Layers panel and select Drop Shadow.

How to use texture effects to create beautiful compositions in Photoshop CS5

We’ve got the next result:

How to use texture effects to create beautiful compositions in Photoshop CS5

Choose the Pen Tool (P), set the drawing mode on Shape Layers in Options bar and draw the next shape as shown. The Foreground color is #28204F. Place the layer under the dancer’s layer:

How to use texture effects to create beautiful compositions in Photoshop CS5

Set Fill to 70% for this layer and change the Blending mode to Hard Light.

How to use texture effects to create beautiful compositions in Photoshop CS5

Insert the mask on the layer by choosing Add layer mask on the bottom part of the Layers panel and choose theSoft Round brush of black color (set Opacity to 20% in Options bar).

How to use texture effects to create beautiful compositions in Photoshop CS5

Paint in the mask using this brush to hide the top part of the shape.

How to use texture effects to create beautiful compositions in Photoshop CS5

Choose the Pen Tool (P), set the drawing mode on Shape Layers in Options bar and draw the next shape as shown. The Foreground color is #FF441F. Place this layer under the layer with the dancer on it.

How to use texture effects to create beautiful compositions in Photoshop CS5

Set Fill to 57% for this layer and change the Blending mode to Multiply.

How to use texture effects to create beautiful compositions in Photoshop CS5

Insert the mask on the layer the same way we did before (Add layer mask). Choose the Soft Round brush ofblack color, mentioned in the previous example for the rhombus to hide the next zone on the shape.

How to use texture effects to create beautiful compositions in Photoshop CS5

 

Use the Pen Tool (P) to represent the next shape of the color #FF1F1F. Place the layer under the dancer’s layer.

How to use texture effects to create beautiful compositions in Photoshop CS5

 

Set Fill to 57% for this layer and change the Blending mode to Linear Burn.

How to use texture effects to create beautiful compositions in Photoshop CS5

Take now the Line Tool (U) set Weight to 1px in Options bar and draw many white lines. This layer will be situated also lower than the dancer’s layer.

How to use texture effects to create beautiful compositions in Photoshop CS5

 

Set Fill to 70% for all the layers containing the white lines.

How to use texture effects to create beautiful compositions in Photoshop CS5

Now we have to download the next set of patterns, named techie. Copy the pattern file to C:\Program Files\Adobe\Adobe Photoshop X\Presets\Patterns folder (Adobe Photoshop X been your version of Photoshop).

Using the Pen Tool (P), we’ll represent the next shape which layer will be situated under the dancer’s layer.

How to use texture effects to create beautiful compositions in Photoshop CS5

Set Fill to 0% for this layer. Click on Add a layer style icon from bottom part of the Layers panel and selectColor Overlay.

How to use texture effects to create beautiful compositions in Photoshop CS5

Add Pattern Overlay. Click the Pattern Preset Picker and Load the downloaded pattern file from Program Files\Adobe\Adobe Photoshop X\Presets\Patterns folder. Apply the next settings for Pattern Overlay:

How to use texture effects to create beautiful compositions in Photoshop CS5

We’ve got the next result:

How to use texture effects to create beautiful compositions in Photoshop CS5

Create a new layer and select for it the Soft Round brush (Opacity – 20%).

How to use texture effects to create beautiful compositions in Photoshop CS5

 

Use this brush to paint the canvas with #ED2000 color. Place this layer under the dancer’s layer too.

How to use texture effects to create beautiful compositions in Photoshop CS5

Set the Blending mode for this layer to Color Burn.

How to use texture effects to create beautiful compositions in Photoshop CS5

Create a new layer above the dancer’s layer and choose the Paint Bucket Tool (G) to fill the layer with#72332C color.

How to use texture effects to create beautiful compositions in Photoshop CS5

Hold down Alt (Windows) or Option (Mac OS) and click between the created layer and the dancer’s layer in theLayers panel to create a clipping mask.

How to use texture effects to create beautiful compositions in Photoshop CS5

We’ve got the next result:

How to use texture effects to create beautiful compositions in Photoshop CS5

Set Fill to 57% for this layer and change the Blending mode to Overlay.

How to use texture effects to create beautiful compositions in Photoshop CS5

Create a new layer and choose the Soft Mechanical brush of white color (Opacity – 30%).

How to use texture effects to create beautiful compositions in Photoshop CS5

Use this brush to paint the light zones on the dancer.

How to use texture effects to create beautiful compositions in Photoshop CS5

Hold down Alt (Windows) or Option (Mac OS) and click between layers in the Layers panel to create a clipping mask.

How to use texture effects to create beautiful compositions in Photoshop CS5

We’ve got the next result:

How to use texture effects to create beautiful compositions in Photoshop CS5

Set the Blending mode for this layer to Overlay.

How to use texture effects to create beautiful compositions in Photoshop CS5

Create a new layer and select the Soft Mechanical brush (Opacity – 20%).

How to use texture effects to create beautiful compositions in Photoshop CS5

Use this brush to paint the dancer and his shadow in the near represented colors. In this case we’ll use theEyedropper Tool (I) to get the samples of the near colors.

How to use texture effects to create beautiful compositions in Photoshop CS5

Hold down Alt (Windows) or Option (Mac OS) and click between layers in the Layers panel to create a clipping mask.

How to use texture effects to create beautiful compositions in Photoshop CS5

Set Fill to 45% for this layer and change the Blending mode to Linear Dodge.

How to use texture effects to create beautiful compositions in Photoshop CS5

Next we’ll choose the Pen Tool (P) to drawn the next shape:

How to use texture effects to create beautiful compositions in Photoshop CS5

Set Fill to 0% for this layer. Click on Add a layer style icon from bottom part of the Layers panel and selectDrop Shadow.

How to use texture effects to create beautiful compositions in Photoshop CS5

Add Pattern Overlay. Click the Pattern Preset Picker and select the next pattern. Apply the next settings forPattern Overlay:

How to use texture effects to create beautiful compositions in Photoshop CS5

We’ve got the next result:

How to use texture effects to create beautiful compositions in Photoshop CS5

Insert the mask on the layer by choosing Add layer mask on the bottom part of the Layers panel and choose theSoft Mechanical brush of black color.

How to use texture effects to create beautiful compositions in Photoshop CS5

Paint in the mask using this brush to hide the next zones on the shape to get the same effect as on the picture below:

How to use texture effects to create beautiful compositions in Photoshop CS5

On the next new layer we’ll choose the Soft Round brush (Opacity – 20%).

How to use texture effects to create beautiful compositions in Photoshop CS5

Use this brush to paint the canvas with #F51A00 color.

How to use texture effects to create beautiful compositions in Photoshop CS5

Set Fill to 45% for this layer and change the Blending mode to Color Dodge.

How to use texture effects to create beautiful compositions in Photoshop CS5

Click Create new fill or adjustment layer from bottom part of the Layers panel and click to Curves to adjust the curve shape as shown to make a little color corrections.

How to use texture effects to create beautiful compositions in Photoshop CS5

We’ve got the next result:

How to use texture effects to create beautiful compositions in Photoshop CS5

Incoming search terms:

  • DANCER psd
  • light effect psd
  • sport add photoshop tutorials
  • photoshop sport tutorial
  • photoshop tutorials sports
  • canvas texture psd
  • mask effect psd
  • mechanical formula1 psd
  • how to use drop shadow linear dodge in photoshop cs5
  • tutorial photoshop sport

preview

Create A Vector Gold Medal-Photoshop Tutorial

In this weeks new tutorial I’ll be demonstrating how easy it is to create a clean, crisp, gold medal vector in adobe photoshop. You can download the PSD file for free at the end of the tutorial.

What We’ll Be Creating

Learn To Create A Gold Medal

Getting Started…

Create a new document (Ctrl + N) with the dimensions 2274 x 2540 with any colored background. Select the background layer from within the layers window, then right click and go to “Layer From Background”. Doing this will unlock the background making it editable. Now add a “Gradient Overlay” to the background layer using the settings below.

Learn To Create A Gold Medal

Now, select the “Ellipse Tool” (U) and drag out a big ellipse onto the canvas.

Learn To Create A Gold Medal

Label the first ellipse layer “Inside”, then create a further two more circles underneath the “Inside” layer. The two new circles should be slightly bigger towards the bottom.

Learn To Create A Gold Medal

Label the two new circles “Edge” and “Outer” as shown in the image above.

Adding The Styles

It doesn’t look much like a medal at the moment so lets go ahead and add some styles to what we’ve created so far. Add the following layer styles to the “Outer” layer.

Learn To Create A Gold Medal

Learn To Create A Gold Medal

Now, add the following layer styles the “Edge” layer.

Learn To Create A Gold Medal

Learn To Create A Gold Medal

Learn To Create A Gold Medal

And finally, add the following layer styles to the “Inside” layer.

Learn To Create A Gold Medal

Learn To Create A Gold Medal

Learn To Create A Gold Medal

Adding Some Detail

Inside the medal create two new circles using the “Ellipse Tool” (U). Label the two new circle layers “Indent #1? and “Indent #2?.

Learn To Create A Gold Medal

Add the following layer styles to the “Indent #1? layer.

Learn To Create A Gold Medal

Learn To Create A Gold Medal

Learn To Create A Gold Medal

You should have something like this.

Learn To Create A Gold Medal

Now to the “Indent #2? layer add the following layer styles.

Learn To Create A Gold Medal

Learn To Create A Gold Medal

Learn To Create A Gold Medal

The medal so far should look like this.

Learn To Create A Gold Medal

Completing The Medal Detail

Select the “Rectangular Marquee Tool” (M) then create two rectangles which exceed over the medal. Fill (G) the rectangles with the color white #ffffff.

Learn To Create A Gold Medal

Select the “Free Transform Tool” (Ctrl + T) then rotate the two rectangles so there roughly about 120 degree’s.

Learn To Create A Gold Medal

Once rotated, blur the rectangles by about 4 pixels by going to “Filter > Blur > Guassian Blur”. Set the rectangles layer opacity to around 17% then load a selection around the “Edge” layer.

Quick Tip:

To load a selection simply click the little layer thumbnail whilst holding down the Ctrl key on the keyboard.

Learn To Create A Gold Medal

Inverse the selection by going to “Select > Inverse” then hit the delete key on keyboard to remove the excess from around the medal. Now select the “Type Tool” (T) and add “1st” into the middle of the medal, the text color should be #cd9701.

Learn To Create A Gold Medal

Add the following layer styles to the text layer.

Learn To Create A Gold Medal

Learn To Create A Gold Medal

Learn To Create A Gold Medal

For this next part we’ll be using a star out of the pre-made custom shapes library. Select the “Custom Shapes Tool” (U) then select the star from the list of shapes.

Learn To Create A Gold Medal

Once you have selected the star, drag one onto the canvas at the bottom of the medal.

Learn To Create A Gold Medal

Now, duplicate the star 6 times, place 3 smaller stars on one side of the bigger star, then repeat for the other side. Once your happy with the star placement add the following layer styles to each star.

Learn To Create A Gold Medal

Learn To Create A Gold Medal

Learn To Create A Gold Medal

The stars should look like this.

Learn To Create A Gold Medal

Repeat the steps above so you have two sets of stars, 7 at the top and 7 at the bottom.

Learn To Create A Gold Medal

Building The Strap Buckle’s

Select the “Rounded Rectangle Tool” (U) then drag out a rectangle at the top of the medal.

Learn To Create A Gold Medal

Were now going to warp the top of the rectangle to make it rounded in the middle. Go to “Edit > Transform > Warp” then warp the middle of the rectangle.

Learn To Create A Gold Medal

Now add a “Gradient Overlay” to the rectangle using the settings below.

Learn To Create A Gold Medal

Were now going to create the loop and joints, start off by creating two circles using the “Ellipse Tool” (U).

Learn To Create A Gold Medal

After creating the two circles create another set of circles, like a donut shape.

Learn To Create A Gold Medal

To the two small circles add a “Gradient Overlay” using the settings below.

Learn To Create A Gold Medal

Add the following layer styles to the donut shaped circle.

Learn To Create A Gold Medal

Learn To Create A Gold Medal

Learn To Create A Gold Medal

You should have something like this.

Learn To Create A Gold Medal

Above the top circle create a rounded rectangle using the “Rounded Rectangle Tool” (U), subtract the center of the rectangle so it kind of looks like a paper clip.

Learn To Create A Gold Medal

Duplicate the shape then shift it down a couple of pixels using the “Move Tool” (V).

Learn To Create A Gold Medal

To the duplicate rectangle add a “Color Overlay” using the settings below.

Learn To Create A Gold Medal

Finally add a “Gradient Overlay” to the top shape using the settings below.

Learn To Create A Gold Medal

You should have something like this.

Learn To Create A Gold Medal

Creating The Straps

Select the “Pen Tool” (P) then create a rectangular shape with diagonal sides. Make sure the bottom of the rectangular shape hangs over the buckle at the bottom.

Learn To Create A Gold Medal

Duplicate the layer and flip it horizontally, then shift the duplicated strap over towards the right side of the buckle.

Learn To Create A Gold Medal

Add a “Gradient Overlay” to the left strap using the settings below.

Learn To Create A Gold Medal

Add the following layer styles to the right strap.

Learn To Create A Gold Medal

Learn To Create A Gold Medal

To add a little bit of texture to the strap you could add a pattern.

Credit to:

http://www.photoshop-plus.co.uk

Incoming search terms:

  • 3d text psd free download
  • wedding psd file free download
  • gold banner psd
  • psd medal
  • vector backgrounds psd free download
  • free gold medal psd
  • gold medal ribbon
  • MEDAL RIBBON PSD
  • gold medal photoshop tutorial
  • psd file free download backgrounds

preview

Create A Padlock Icon-Photoshop Tutorial

What We’ll Be Creating

Learn To Create A PadLock Icon In Adobe Photoshop

Starting Out Simple

Create a new (Ctrl + N) document 800 x 800 pixels with any colored background. Right-click the background layer and select “Layer From Background” in the fly out menu. Now add a “Gradient Overlay” using the settings below.

Quick Tip:

By selecting “Layer From Background” it allows you to edit the background layer as if it were any other normal layer.

Learn To Create A PadLock Icon In Adobe Photoshop

Creating The Lock Basic Shapes

Once you’ve sorted the background lets crack on with drafting out the shapes for our lock. Select the “Rounded Rectangle Tool” (U) with a radius of 20px.

Learn To Create A PadLock Icon In Adobe Photoshop

Drag the rectangle out making it roughly about 350 pixels long and about 40 pixels in height.

Learn To Create A PadLock Icon In Adobe Photoshop

With the rectangle layer selected, select the “Free Transform Tool” (Ctrl + T). Now select one of the side middle anchor points and drag inwards.

Learn To Create A PadLock Icon In Adobe Photoshop

The width of this first rectangle will determine the width of the padlock, when we resized the rectangle down the radius of the edges actually got a bit squarer making the lock a bit more realistic and no to round.

Learn To Create A PadLock Icon In Adobe Photoshop

Duplicate the rectangle layer then drag the duplicated layer underneath the original layer. Select the “Move Tool” (V) and shift the duplicated rectangle down a couple of pixels.

Learn To Create A PadLock Icon In Adobe Photoshop

We now need to join up the edges so that both rectangles meet, select the “Rectangle Tool” (U), hold down the shift key then drag out a rectangle joining both rectangles together.

Quick Tip:

Holding down the shift key will automatically add the new shape to the current vector mask.

Learn To Create A PadLock Icon In Adobe Photoshop

When joining the rectangles make sure you are adding to the vector mask and not making a new layer. Do both sides of the rectangle, when your done you should have something like this.

Learn To Create A PadLock Icon In Adobe Photoshop

Duplicate the first rectangle again then with the “Move Tool” (V) shift the duplicated rectangle down past the second rectangle. This rectangle will determine the height of the lock.

Learn To Create A PadLock Icon In Adobe Photoshop

In the same way as we did with the 2nd rectangle join up the bottom rectangle by adding a bigger rectangle to the vector mask.

Learn To Create A PadLock Icon In Adobe Photoshop

Bringing The Shapes To Life

Time for some organization, label the very top rectangle layer “Lock Top #1?, the 2nd rectangle “Lock Top #2? and finally the Bottom rectangle “Lock Body”.

Learn To Create A PadLock Icon In Adobe Photoshop

Lets add some layer styles to our lock, starting with the “Lock Body Layer”.

Learn To Create A PadLock Icon In Adobe Photoshop

Learn To Create A PadLock Icon In Adobe Photoshop

Next add a “Gradient Overlay” to the “Lock Top #2 Layer” using the settings below.

Learn To Create A PadLock Icon In Adobe Photoshop

Learn To Create A PadLock Icon In Adobe Photoshop

And finally, add a “Gradient Overlay” to the “Lock Top #1 Layer”.

Learn To Create A PadLock Icon In Adobe Photoshop

You should have something like this.

Learn To Create A PadLock Icon In Adobe Photoshop

Creating The Groves

Load a selection around the “Lock Top #2 Layer”, create a new layer above the “Lock Body Layer” then go to “Edit > Stroke”.

Quick Tip:

To load a selection around a layer, first select the layer then go to “Select > Load Selection” or simply click the little thumbnail in the layers window whilst holding down the Ctrl key on the keyboard.

Learn To Create A PadLock Icon In Adobe Photoshop

Learn To Create A PadLock Icon In Adobe Photoshop

Once the stroke has been added deselect the selection (Ctrl + D) then with the “Move Tool” (V) move the stroke down 1 pixel.

Learn To Create A PadLock Icon In Adobe Photoshop

Duplicate the layer then move that layer down 1 pixel, then add a “Color Overlay” to the duplicated layer using the color white #ffffff. Finally set both layers blend mode to “Overlay” then just the white strokes layers opacity to 50%.

Learn To Create A PadLock Icon In Adobe Photoshop

Duplicate both stroke layers then shift the two strokes down a couple of pixels, repeat this until the length of the lock is filled with the strokes leaving a nice even gap in between each set of strokes.

Learn To Create A PadLock Icon In Adobe Photoshop

Select all the stroke layers leaving out the first set you created, once selected merge them together and adjust the opacity of the final layer to 35%. The blend mode should also be changed back to “Overlay” if it isn’t already.

Learn To Create A PadLock Icon In Adobe Photoshop

Creating The Key Hole

Select the “Ellipse Tool” (U) and drag out a circle onto the middle of the lock body. Once your happy with the ellipse select the “Pen Tool” (P), hold down the shift key and create a triangular shape.

Quick Tip:

Holding down the shift key will automatically add the new shape to the current vector mask.

Learn To Create A PadLock Icon In Adobe Photoshop

Finally add the following layer styles to the keyhole layer.

Learn To Create A PadLock Icon In Adobe Photoshop

Learn To Create A PadLock Icon In Adobe Photoshop

You should have something like this.

Learn To Create A PadLock Icon In Adobe Photoshop

Creating The Shadow And Reflection

Select all the lock layers so far apart from the background layer then duplicate them all. Merge all the duplicated layers into one layer the flip the new single layer vertically “Edit > Transform > Flip Vertical”. Move (V) the lock down underneath the original lock.

Learn To Create A PadLock Icon In Adobe Photoshop

Blur the flipped lock by going to “Filter > Blur > Guassian Blur” blurring by 4px.

Learn To Create A PadLock Icon In Adobe Photoshop

Label the layer “Reflection” then add a layer mask to the layer. Select the “Gradient Tool” (G) with a linear gradient then drag from the bottom of the reflection upwards.

Learn To Create A PadLock Icon In Adobe Photoshop

Now for the shadow, duplicate the “Lock Body Layer” then right click the duplicated layer and select “Rasterize Layer”. Double click the layer and add a black #000000 “Color Overlay”. Once the color has been added select the “Rectangular Marquee Tool” (M) and make a selection over the lock down to just above where the edges curve up at the bottom.

Learn To Create A PadLock Icon In Adobe Photoshop

When the selection has been made hit the delete key to remove the top half of the shape. Select the “Move Tool” (V) and move the shape down a couple of pixels, finish the shadow by adding a guassian blur “Filter > Blur > Guassian Blur” and setting the opacity to 75%.

Learn To Create A PadLock Icon In Adobe Photoshop

Creating The Chrome Lock

Select the “Rounded Rectangle Tool” (U) with a radius of 80px. Drag out a rectangle at the top of the lock.

Learn To Create A PadLock Icon In Adobe Photoshop

Still with the “Rounded Rectangle Tool” (U) only this time select “Subtract From Shape Area” from the options tool bar.

Learn To Create A PadLock Icon In Adobe Photoshop

Once selected drag out another smaller rectangle inside of the rectangle you just created. Try and keep the width of the rectangle the same all the way around.

Learn To Create A PadLock Icon In Adobe Photoshop

Select the “Pen Tool” (P) with the “Subtract” option still selected the round off the bottom edges of the lock.

Learn To Create A PadLock Icon In Adobe Photoshop

With both sides done you should have something like this.

Learn To Create A PadLock Icon In Adobe Photoshop

Create The Lock Holes

Select the “Ellipse Tool” (U) then drag out two circles at the bottom of the lock where we rounded it off.

Learn To Create A PadLock Icon In Adobe Photoshop

To the two lock holes add the following layer styles.

Learn To Create A PadLock Icon In Adobe Photoshop

Learn To Create A PadLock Icon In Adobe Photoshop

To the soon to be chrome looking lock add the following layer styles.

Learn To Create A PadLock Icon In Adobe Photoshop

Learn To Create A PadLock Icon In Adobe Photoshop

Learn To Create A PadLock Icon In Adobe Photoshop

Learn To Create A PadLock Icon In Adobe Photoshop

Learn To Create A PadLock Icon In Adobe Photoshop

Learn To Create A PadLock Icon In Adobe Photoshop

The lock should now be transformed into something like this.

Learn To Create A PadLock Icon In Adobe Photoshop

Adding The Reflections And Shadows To The Lock

Duplicate the lock layer then right click the layer and go to “Rasterize Layer”. Once rasterized flip the lock vertically by going to “Edit > Transform > Flip Vertical” position the lock underneath the original.

Learn To Create A PadLock Icon In Adobe Photoshop

Load a selection around the “Lock Top #1? layer by selecting the layer then going to “Layer > Load Selection”.

Learn To Create A PadLock Icon In Adobe Photoshop

Now go to “Select > Inverse” then hit the delete key. You should be left with just the part of the lock which sits inside of the selection.

Learn To Create A PadLock Icon In Adobe Photoshop

Finally add a layer mask to the layer and drag a linear gradient from the bottom upwards. For this reflection you aiming for a subtle reflection.

Learn To Create A PadLock Icon In Adobe Photoshop

For the shadows load a selection around the lock holes.

Learn To Create A PadLock Icon In Adobe Photoshop

Create a new layer above the lock layer then select the “Gradient Tool” (G) with the gradient settings set to “Black #000000 to Transparent”.

Learn To Create A PadLock Icon In Adobe Photoshop

Drag the gradient upwards, again were aiming for subtle shadows. Repeat these steps for both sides.

Learn To Create A PadLock Icon In Adobe Photoshop

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

Learn To Create A PadLock Icon In Adobe Photoshop

Download Freebie
Credit to:

Incoming search terms:

  • creating a keyhole in photoshop illustrator
  • photoshop lock
  • padlock icons
  • open lock icon
  • login icon psd
  • psd icon tutorials
  • psd ui lockpad
  • free background lock images for photoshop
  • padlock open psd
  • psd padlock

Sponsored Ads

Ad
cool looking dancer makes a difficult jump

Surreal Retro Futurism Scene-Photoshop Tuorial

Design a Surreal Retro Futurism Scene

Final Image

Here is a preview of the image that we are going to be creating:

Step 1

Start by creating a new document (1600X2000px).

Fill your canvas with 1a1121.

Step 2

Create a new layer called ‘background brush marks’. Download the watercolor brush set from the resources section for this tutorial. Apply several of the brushes over your canvas (using 45364f color). Then reduce this layer’s opacity to 30%.

Step 3

Now create a new layer called ‘background brush marks 2?. Apply several more brushes (using 2b3245 color). Then reduce this layer’s opacity to 20%.

Step 4

Now paste in the nebula image from the resources for this tutorial. Call this layer ‘nebula’.

Reduce this layer’s opacity to 15%.

Step 5

Now apply a levels adjustment layer. Ensure that you apply a clipping mask to this layer, so that it only effects your underlying nebula layer.

Levels Adjustment Layer Settings:

28 / 0.76 / 175

Step 6

Now create a new layer called ‘radial gradient’.

Apply several white to transparent radial gradients over your canvas. Then change this layer’s blend mode to ‘overlay’. This should help build up a cool background lighting effect.

Step 7

Now repeat this technique on a new layer, applying several more radial highlights:

Step 8

Now cut out and paste in your jumping man from the resources for this tutorial.

Then apply a layer mask, and mask off the man’s head:

Step 9

Now cut out and paste in the panthers head from the resources for this tutorial.

Go to edit>transform and use your transform tools to rotate/resize the head to fit on your man’s body.

Now apply a layer mask, and use a soft black paintbrush (20% opacity) to mask off the panthers neck, fading it smoothly into the man’s neck:

Step 10

Now apply a levels and color balance adjustment layer, making sure to apply a clipping mask to each, so that your adjustments only effect your underlying panther head.

Levels Adjustment Layer Settings:

17 / 1.00 / 218

Color Adjustment Layer Settings:

Shadow: +1 / +8 / +2
Midtones: +12 / -1 / +9
Color Balance: -13 / +8 / +18

These adjustments should help blend your panther better with your surrounding composition:

Step 11

Now create a new layer called ‘eyes’. Select a small, soft paintbrush (fded4f) and paint over your panthers eyes. Then change this layer’s blend mode to ‘overlay’.

If needed, duplicate this layer to make the effect more intense. This should make your panthers eyes really glow!

Step 12

Duplicate your panther head layer and called this layer ‘jawline’.

In your layer’s palette move this duplicate layer above your ‘eyes’ layer and adjustment layers. Delete the layer mask applied to this layer.

Move your duplicate head down past your original.

Now apply a layer mask. Mask off all of this duplicate head apart from the jaw. The idea is to use part of your panther head to build an artificial jawline that is lower than the original:

Step 13

Now cut out and paste in the photo of the roaring panther jaw from the resources section for this tutorial.

Resize your roaring jaw to be a more suitable size for the main panther head. Now go to edit>transform>warp. Warp your jaw to fit with your overall composition better:

Now apply a layer mask, and mask off the edges of this open jaw so that it blends better with your main panther head:

Step 14

Now apply a levels and color balance adjustment layer to your jaw layer. Remember to apply a clipping mask to each adjustment layer!

These adjustments will help blend your open jaw with the main image:

Step 15

You’ll notice that the side of the jaw is looking a little incomplete.

Luckily, this area is where the most shadow should be given the lighting of the piece. Therefore to construct a fake jaw, we really only need to build up the shadows to cover this area.

Create a new layer called ‘face shadow’. Use a soft black paintbrush to paint in shadows over this area of jaw.

Step 16

Now create a new layer called ‘face whiskers’.

Use a soft, 1px brush to paint in some whiskers on the right side of the panthers face. This just helps things to be a bit more symmetrical.

Step 17

Now create a new layer called ‘lighting’. Drag out a series of colorful radial gradients over your jumping figure. Try to use very bright colors, but colors that somehow compliment the imagery behind them.

Now change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 25%.

Step 18

Now create a new layer called ‘bar lighting’.

Drag a thin white to transparent linear gradient out so that it goes diagonally across your jumping figure:

Now apply a layer mask. Use a soft black paintbrush to slightly mask off the edges of your gradient shape. You want to subtly fade these edges into your background, but not totally hide them:

Now reduce this layer’s opacity to 15%. This creates a subtle lighting effect:

Step 19

Now duplicate your ‘bar lighting’ layer and space out the duplicates across your jumping figure. The idea is that as the bar duplicates get further away from the original they get more spaced out and have a lower opacity.

Step 20

Now download the fractal lines brush set from the resources for this tutorial. Apply several of the brushes over your jumping figure.

Now apply a layer mask, and use a large, soft black paintbrush (20% opacity) to mask off areas of your fractal shapes. Then reduce this layer’s opacity to 60%. This should add just a subtle bit of detail to your composition:

Step 21

Now we’re going to dodge/burn our image in a non-destructive way.

Create a new layer called ‘dodge/burn’.

Go to edit>fill and fill your canvas with 50% gray. Then change this layer’s blend mode to ‘overlay’. This will hide your 50% gray fill but will allow you to paint over your canvas.

Use a soft, low opacity black paintbrush to paint in shadows, and a soft, low opacity white paintbrush to paint in the highlights. To make the effect more subtle I reduced my dodge/burn layer’s opacity to 50%.

The images below show the dodge/burn layer at ‘normal’ blend mode, and then at ‘overlay’:

Step 22

Now create a new layer called ‘triangle top’. Use your lasso tool to create a cool looking triangle shape like the image below:

Now reduce this layer’s opacity to 60%. Apply an outer glow blending option:

Outer Glow Blending Option Settings:

Blend Mode: Normal
Opacity: 32%
Noise: 0%
Color: ffffff
Spread: 0%
Size: 38px

Finally create a new layer called ‘triangle shadows’. Use a low opacity, soft black paintbrush to paint in shadows to make your triangle shape seem more 3D:

Step 23

Now duplicate your triangle layer. Enlarge the triangle to make it about half the width of your canvas. Then apply a layer mask and mask off areas that overlap your jumping figure too much.

Then reduce this layer’s opacity to 10%.

Then duplicate this layer, and go to edit>transform>flip vertical. Move the large, flipped triangle to the bottom center of your canvas, and change it’s blend mode to ‘overlay’, increasing it’s opacity to 100%.

Below you can see the triangles at 100% opacity with no masking, and below that the finished result:

Step 24

As a final touch apply a gradient overlay adjustment layer and levels adjustment layer.

Gradient Overlay Adjustment Layer Settings:

Gradient: Default gradient (purple to orange)
Opacity: 8%

Levels Adjustment Layer Settings:

3 / 0.95 / 209

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome.

Credit to:

http://psd.fanextra.com

Incoming search terms:

  • - 10% psd
  • tutorial photoshop jump
  • futurism brushes photoshop
  • jumping dancer photoshop tutorial
  • retro scene free psd
  • free psd templates add edit and delete icons
  • retro futurism tutorials
  • wedding couple layer masking in photoshop
  • jumping dancer design
  • jumping photos photoshop tutorials

3dicon-tut

3D Globe-Photoshop Tutorial

So in this tutorial I will show you how to create a nice 3D globe in Photoshop using basic tools and the Spherize filter. This whole tutorial won’t take more than 30 minutes but the technique is really useful especially for icons and logos.

Step 1

Open Photoshop and then with the Rectangle Tool (U) create a rectangle, then start duplicating it until you get 7 columns. Use the Distribute Horizontal Centers to make the distances the same. After that duplicate those 7 rectangles and rotate them to create a grid.

Easy 3D Globe in Photoshop

Step 2

With the Elliptical Marquee Tool (M) create a circle selection like the one I did in the image below.

Easy 3D Globe in Photoshop

Step 3

Go to Filter>Distort>Spherize. Use 100% for the Amount and Normal for the Mode.

Easy 3D Globe in Photoshop

Step 4

Cut the selection and paste it in order to get the front face of the globe.

Easy 3D Globe in Photoshop

Step 5

Go to Layer>Layer Styles>Gradient Overlay. Apply a gradient from dark red to light blue in linear mode. You can try with Radial as well.

Easy 3D Globe in Photoshop

Step 6

Duplicate the layer and rotate it 45º Also change the gradient colors to light red on top and dark blue at the bottom. This will create a really nice 3D effect and it’s super simple.

Easy 3D Globe in Photoshop

Step 7

Select the background layer and go to Layer>Layer Styles>Gradient Overlay. Use (#aa616b) and (#2c354d) for the colors, Radial for the Style and 140% for the Scale. Position the center of the gradient a little bit on top of the center of the globe. To do that just click and hold to move the gradient position while you are in the Gradient Overlay properties.

Easy 3D Globe in Photoshop

Step 8

Select the two globe layers and duplicate them. After that go to Layer>Merge Layers. You will have one layer with the globe. Go to Layer>Layer Styles>Color Overlay. Use black for the color. After that go to Filter>Blur>Gaussian Blur. Use 15 for the radius. Then just resize it and change the opacity to 20%. to create a nice shadow effect.

Easy 3D Globe in Photoshop

Step 9

Select the front face of the globe and edit the Layer Styles. Click then on Inner Shadow and use white for the color, Color Dodge for the Blend Mode at 60% Opacity. Also change the Angle to 100%, Distance to 3 pixesl and Size to 7 pixels.

Easy 3D Globe in Photoshop

Step 10

After the Inner Shadow you will get a nice light effect in your globe.

Easy 3D Globe in Photoshop

Step 11

Select all layers and duplicate them. After that go to Layer>Merge Layers to have one layer with all the image merged. Go to Filter>Blur>Gaussian Blur. Use 20 pixels for the Radius.

Easy 3D Globe in Photoshop

Step 12

Change the Blend Mode to Overlay and you will get a really nice light effect.

Easy 3D Globe in Photoshop

Conclusion

Now just add the text you want and also you can apply a texture on top. I am using a scanline pattern I created. The whole idea of this tutorial was showing how to create a nice 3D globe using only Photoshop, it’s a nice technique for logos and icons and it’s super simple to achieve.

Easy 3D Globe in Photoshop

Download the Photoshop File

Click here to download the Photoshop file used for this tutorial

Credit to:

http://abduzeedo.com

 

Incoming search terms:

  • globe psd
  • photoshop 3D icon
  • tutorials psd
  • free psd shadows
  • 3d globe psd
  • 3D globe logo
  • PSD tutorial banner
  • globe 3d psd
  • photoshop 3d icon psd files
  • photoshop 3d tutorial

Page 1 of 912345...Last »

Recent Tweets

Follow Me On Twitter →

Latest Video


Hit Counter provided by technology reviews