Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 19 2014

14:00

January 22 2014

15:00

Get ‘Layed’: What You Need to Know about Photoshop Layers

Photoshop is revered as one of the best digital multimedia solutions software. So there is no question on what you need to know about Photoshop layers because there is always something to be learnt about this amazing software. It basically encompasses every design need there is. Artists consider using it because of its flexibility. It can be utilized by any artist notwithstanding their design inclinations. Most photographers use the software in editing their photos. Some digital artists use Photoshop, (if not, Illustrator) in their designs. Meanwhile, most web designers use this software in building the visuals of their designs. Truly, with these uses, Adobe’s carrier software has been the one-man-wrecking-machine software that solved most of our digital problems.

photoshop-layers-02

photo from Wallpaper Stock.net

Having said that Photoshop is a must-have software, it is also equally a must to master it. And that entails a great deal of effort. With all the tools, options and features of Photoshop, which – until today – is continually developing, it is very difficult to start training with the software. But never fret, you have us. What is 1stwebdesigners for, right?

photoshop-layers-01

Photo from Deviantart

One of the probably gazillion things you need to know about Photoshop is its layers. The importance of mastering this feature is, of course, pertinent for a web designer as a web design, before being coded, is most probably created through Photoshop.

Layers are free and independent elements in a Photoshop work space. They can be manipulated in scaling, color, effects, position, opacity and more. Layers often represent separate elements that a designer wants to tweak or customize. In the realm of web design, layers play an important role. They are used to represent the design elements of a webpage. They are made to imply a text box, an image, a background, the content and a lot more.

photoshop-layers-03

Photo from Designcontest.com

Most Photoshop users will agree to the notion that one of the key features of a software like Photoshop is its good layering options. Here are some of them that you need to know.

Fill and Opacity

Fill and opacity are two different things. Although they are commonly confused as the same terms and often connected as a single terminology (i.e. Fill-Opacity), they are completely different from one another.photoshop-layers-04

Fill is an option of a layer to customize how many percent of the background color is seen. This option is commonly used for shapes

.photoshop-layers-03

On the other hand, opacity is the option that dictates how transparent the whole layer relative to the other layers in the design.

The difference between the two is that the Fill option does not affect layer styles. For example, you put a stroke in the image. Notice that when you ticker down the fill percentage, the stroke is still seen unlike if you lower the opacity percentage, you see the whole image together with the layer styles is made transparent.

photoshop-layers-05

Grouping

This is one of the most rudimentary learnings a Photoshop user should have when it comes to layers. Grouping really does not do a lot of things in the design per se. Despite that predicament, the importance of grouping is never left behind. You see, grouping helps in the organization of layers. Aside from naming them properly, which is also very useful, grouping layers improves the workflow because you don’t need to search the whole design looking for a single pixel. Just find where it belongs and voila! You have it!

photoshop-layers-09

photo from elated.com

Masking

Masking is the act of hiding particular portions of the layer to show the layers below it. This technique is a very important skill in a designer’s arsenal as it is a good way of combining multiple photos in one seamless image.

Photoshop masks can be used at a very large amount on a single layer. According to TutsPlus.com, you can use up to 11 Pixel Masks and 11 Vector Masks!

If you want a good tutorial, better visit this.

photoshop-layers-06

Photo from Photoshopsupport

photoshop-layers-07

Photo from Amazon news

Selecting

Supposed you’re slicing up particular photos in a design. You have a lot of options to choose from. Either you click the layer you want to copy or cut, press CTRL+A and paste it wherever you want to, or use the lasso or quick selection tool. But you have a third option. That is quick selecting it by pressing CTRL + click the image desired.

photoshop-layers-11

Layer Styles

Layer styles give you the liberty to select specific options to enhance the design. There are some options to tinker on:

  • General Blending – here you can choose the Blending Mode. The Blending mode option allows you to customize background and image relationships and how to complement, contrast or both. Aside from that, you could also choose from advanced options where you are allowed to reduce the opacity of the layer as a whole or per channel.
  • Bevel and Emboss – this option gives your layers a 3D feel as they tend to pop out of the design. The Bevel and Emboss option add depth to the design, making it more ‘realistic.’ In this option, you could select from contouring options like inner bevels, emboss and more.
  • Stroke – this is one of the most used options in the menu. Stroke adds an outline to the main image. You can choose the opacity of the stroke, the color and its blending options.
  • Inner Shadow- gives you a subtle darkening of the layer. Inner shadow also provides depth. (Outer Shadow is the opposite of this)
  • Inner Glow – adds a shiny and feathered yellow design in the outline of the image within. (Outer Glow is the opposite of this)
  • Color Overlay – fills the whole image with a chosen color. It will totally forget what’s inside the fill. It will surely fill every spot of what you wanted it to fill with.

photoshop-layers-10

Conclusion

Layers are one nasty piece of business to study. It requires a lot of time and patience to do this. With the importance of layers highlighted, it is equally important to study them well. The key to this lesson is that you should try using them and commit mistakes. It’s where we really learn- from our mistakes. So next time, you’ll be dealing with layers, stand up and be proud that once in your life, you got ‘layed’ here at 1stwebesigner. Again, pun intended.

Sponsored post
soup-sponsored
20:53
Reposted byLegendaryy Legendaryy

January 15 2014

14:00

10 Easy To Understand Photoshop Tutorials on Lighting Effects

Most designers find Photoshop very versatile. Photoshop tutorials on lighting effects is highly sought after. Although mainly used in photography, this favorite software of designers bridges different kinds of needs, from typography to web design.

Not to exaggerate, Photoshop can supply all your design needs. Today, we will be highlighting a very particular need. This article is directed mainly to graphic designers and photo enthusiasts but could be a very good springboard to web designers too. With lightning effects added in your photos, you will be able to add more dynamism and professionalism in your designs. In short, it would make your awesome website more awesome. How cool is that?

The need I am talking about is lighting effects. In photography and graphic design, lighting is very important because it stimulates the vision to think or perceive a certain period of the day. Light, in these specific art forms, creates the illusion of time and space. You can readily make people believe that you took a certain photo at night just because the lighting says so. One can also confuse a picture to be taken at dusk when in fact it’s otherwise just because the light says so. Having said that, it is important to put in mind these reminders and master the art of lighting.

For beginners, you’ll find these tutorials very fun-to-do and instructive. For experts and masters, you’ll find these links refreshing. So here they are:

Nike Ad in Photoshop

photosho-lighting-effects-11

Morning Light in Photoshop

photosho-lighting-effects-10

Lomography Effect

photosho-lighting-effects-09

Rainbow Light Effect

photosho-lighting-effects-08

Light Bulb Text Effect

photosho-lighting-effects-06

Apocalyptic Effect

photosho-lighting-effects-05

Fiery Explosion

photosho-lighting-effects-04

Dynamic Lighting

photosho-lighting-effects-03

Crystallized Effect

photosho-lighting-effects-02

Scarecrow + Sick Background Lighting

photosho-lighting-effects-01

Conclusion

You have to admit that Photoshop is the best editing software when it comes to photos. With its versatility, you can easily play with the lighting of your photos or graphic illustrations. These tutorials are just guides. Remember that you should never stick to them point by point. You should learn how each step works and how can you adjust them for different photos of different scenarios. This way, you can apply the concepts in your everyday designs.

September 03 2013

13:00

Beginners Guide to Working with jQuery Animation

In this tutorial, we are going explore the basics of jQuery animations for you to get prepared for advanced designs. Animations is the core functionality behind the interactive elements in web design.

The design of a website plays a major role in attracting visitors on a consistent basis. Interactive designs get more attention compared to the plain old static designs.

Technology is improving at a rapid pace to cater the advanced modern web designs. As a result, CSS3 offers the animations without the help of JavaScript. Even though CSS3 and HTML5 are improving in leaps and bounds, jQuery seems to be the popular choice for creating interactive designs.

Let’s get started!

Practical Usage of jQuery Animations

jQuery has been used widely for designing interactive elements such as sliders, menus, scrollers and so on. Before we start the animation aspects, I suggest you to have a look at the following practical implementations, which illustrates the power of jQuery animations.

As a beginner, you can’t  just jump into the types of designs illustrated in the preceding section. So here we are going to cover the basics of jQuery animations from the beginner’s perspective.

Introduction to Basic Animations with jQuery

Most designers have the knowledge of working with basic jQuery or JavaScript codes. Changing the visibility of an element is a common task that is included in almost every website design. We can just hide/show the element using CSS display or visibility attributes. jQuery simplifies the process by introducing two functions called hide and show. Consider the following code for showing and hiding an HTML element.


$("#panel").show();

$("#panel").hide();

With the preceding code, the element appears and disappears in a very limited time range. Use the following jsFiddle link to see a demo of the preceding code in action.

http://jsfiddle.net/nimeshrmr/bMmFS/

Ideally, we should smoothen the process of hiding and showing elements using animations to provide better user experience. jQuery provides two built-in techniques for showing and hiding elements with simple animation effect.

  • Fading – Integrates a fading motion into HTML elements by changing the element’s opacity.
  • Sliding – Integrates a sliding motion into HTML elements by changing the element’s height.

Let’s see how to use the above techniques to show and hide the elements with an animated effect.

jQuery encapsulates the complexity of animations by providing built-in methods to cater various tasks in web design.

Fading

Fading is mainly provided by the functions called fadeIn and fadeOut. Opacity of the element is increased by the fadeIn function and decreased by the fadeOut function. We can also pass the time interval for fading as shown in the following code.


$("#panel").fadeIn("slow");

$("#panel").fadeOut("fast");

We have the option of choosing slow or fast as the predefined values for the time interval . Also,we can pass the number in milliseconds to define the duration of animation. Here is the jsFiddle demo for working with fadeIn and fadeOut functions.

http://jsfiddle.net/nimeshrmr/zcRzL/

Sliding

Sliding functions change the height of the element instead of opacity for animating elements. Functions and syntaxes work exactly similar to fading, where slideUp is used for hiding and slideDown is used for showing elements. Following code previews the basic usage of sliding functions.


$("#panel").slideDown("slow");

$("#panel").slideUp("fast");

Duration parameter also works similar to the usage of fading functions. Here, you can see the actual beginning of the animations by moving the element. Consider the following URL for a demo usage of sliding functions.

http://jsfiddle.net/nimeshrmr/nDz6J/

Getting Started with jQuery Animate Function

Most beginners will think that building animations is a quite complex task. Definitely it’s difficult if you are doing it from scratch. jQuery encapsulates all the complexity by providing a single standalone function, which handles any type of animation. Basically, the animations will be created by altering the values of the CSS attributes. Once you get used to the jQuery animate function, building complex animations will become a simple task. Let’s get started by looking at the basic syntax of animate function.


$( "#panel" ).animate({

  // CSS Properties and values

}, 5000, "linear", function() {

  // Completion Handler

});

Preceding code illustrates the syntax for using the animate function. The first parameter contains all the CSS properties and values. The next optional parameter defines the duration of the animation. The third parameter defines the easing( animation type) and the final parameter defines an anonymous function for handling animation completion. Having looked at the basic usage, we can move into creating something practical with jQuery animations.

Animating Image Parts

In this section, we are going to look at how we can display an image by animating image parts. First, we have to split an image into smaller images. You can use the technique provided in my tutorial on Create Jigsaw Puzzle Using jQuery and PHP for splitting images.

Here, is the image that we are going to use for animation.

animations1

Inside the source codes, you will find 12 images generated by splitting the preceding image. Each image will have the dimensions of 150px x 150px. Sub images are divided into 2 rows of 6 blocks. Then all the 6 blocks of each row will be positioned in the right hand corner of the page using the following code.


<div id="img_panel">

    <div class="img_item"><img src="1.jpg" /></div>

    <div class="img_item"><img src="2.jpg" /></div>

    <div class="img_item"><img src="3.jpg" /></div>

    <div class="img_item"><img src="4.jpg" /></div>

    <div class="img_item"><img src="5.jpg" /></div>

    <div class="img_item"><img src="6.jpg" /></div>

    <div class="img_item2"><img src="7.jpg" /></div>

    <div class="img_item2"><img src="8.jpg" /></div>

    <div class="img_item2"><img src="9.jpg" /></div>

    <div class="img_item2"><img src="10.jpg" /></div>

    <div class="img_item2"><img src="11.jpg" /></div>

    <div class="img_item2"><img src="12.jpg" /></div>

</div>

Here, we have separated 12 images into 2 columns using two CSS classes called img_item and img_item2. Now let’s look at the CSS code for positioning images.


    .img_item{

       position: absolute;

       right: 0px;

       opacity:0;

       top :0;

    }

    .img_item2{

       position: absolute;

       right: 0px;

       opacity:0;

       top:150px;

    }

According to the above code, all the images of each row will be hidden and positioned on top of each other using absolute positioning. Now we can look at the jQuery code for generating the image through animations.

$(document).ready(function(){

   var left = 0;

 $(".img_item").each(function(i,val){

           $(this).animate({

               left: left,

               opacity: 1

           }, 1500 );

           left += 150;

   });

   left = 0;

 $(".img_item2").each(function(i,val){

           $(this).animate({

               left: left,

               opacity: 1

           }, 1500 );

           left += 150;

       });

    });

First, we have two selection statements for filtering img_item and img_item2 class items. Then we execute the animate function on the individual elements to convert opacity to 1 and left positioning relative to the preceding image part. Basically, all the image parts will start the animation at the same time providing an output similar to the following image.

animate3

We can use similar effects inside sliders, splash screens, image galleries. Here is the demo of the preceding implementation.

Now you know the basics of working with animate function. Let’s dig deeper into the animation aspects by looking at advanced configurations.

Designing Sequential Animations

In the preceding scenario, all the elements started animating immediately on page load. But sometimes we want sequential animations, where animation of each element starts after the completion of preceding element. So here we are going to load the same image using sequential animations. Let’s start by defining the HTML code.


<div id="img_panel">

    <div class="img_item"><img src="1.jpg" /></div>

    <div class="img_item"><img src="2.jpg" /></div>

    <div class="img_item"><img src="3.jpg" /></div>

    <div class="img_item"><img src="4.jpg" /></div>

    <div class="img_item"><img src="5.jpg" /></div>

    <div class="img_item"><img src="6.jpg" /></div>

    <div class="img_item"><img src="7.jpg" /></div>

    <div class="img_item"><img src="8.jpg" /></div>

    <div class="img_item"><img src="9.jpg" /></div>

    <div class="img_item"><img src="10.jpg" /></div>

    <div class="img_item"><img src="11.jpg" /></div>

    <div class="img_item"><img src="12.jpg" /></div>

</div>

The only change from the previous code is the use of single CSS class instead of two classes for rows. This implementation will generate the rows from jQuery code instead of hard coding using CSS classes. The CSS code for this implementation will be same as the code used for the previous example. Now let’s look at the jQuery code for sequential animation.


    $(document).ready(function(){

       var left = 0;

       var items = $(".img_item");

       animateImg(items,0,0,0);

    });

Once the page is loaded, we get all the image elements using img_item class. Then we pass the items into a function called animateImg for processing animations. The following code provides the implementation of animateImg function.


var indexNum = 1;

 var animateImg = function(items,left,height,indexNum){

 if(items.length >= indexNum){

           var item = items.get(indexNum);

           $(item).animate({

               left: left,

               top : height,

               opacity: 1

           }, 1500 ,function() {

               left += 150;

               indexNum++;

               if(indexNum  % 6 == 0){

                   left = 0;

                   height += 150;

               }

 animateImg(items,left,height,indexNum);

           });

       }

    };

The animateImg function uses four parameters for providing its functionality. The first parameter defines the collection of image items. The second and third parameters define the left and top values of the screen. Initially these 2 values will be set to 0 to start the image from the top left corner of the screen. The fourth parameter is the index number of image for separating them into rows.

First, we check whether we have reached the end of the items array by using an if condition. Then we get the image at the given index number from the items array. Then we call the animate function with a duration of 1500 milliseconds. Next, we increase the index number to get the next element from items array.

In this scenario, we have 2 rows with 6 images each. So we take the module of the index number to check whether we have reached an end of a row. If so, we increase the top value of the image to dynamically create rows. Finally, we call the animateImg function in a recursive manner to traverse through all the elements and generate the complete animation. The following image previews the sequential animation for this scenario.

animate2

Here you can find the demo for the preceding scenario.

As you can see, we have used the animation complete function to execute the animation on the next element. So each animation will start after the preceding one is completed. We can achieve similar functionality with queue functionality of the animate function.

Chaining Animations

Up to this point, we created single animations on each element. In complex scenarios, we need to chain multiple animations on a single element. So let’s modify the preceding example to chain animations.


var animateImg = function(items,left,height,indexNum){

 if(items.length >= indexNum){

           var item = items.get(indexNum);

           $(item).animate({

               left: left,

               top : height,

               opacity: 1

           }, 1500 ,function() {

               left += 150;

               indexNum++;

               if(indexNum  % 6 == 0){

                   left = 0;

                   height += 150;

               }

               console.log(items);

 animateImg(items,left,height,indexNum);

           }).animate({ left:left+150}, 1500);

       }

    };

We can chain animations on elements by calling the animate function multiple times using the dot notation. In the preceding code, we have started another animation after the first animation using .animate function. We can add any number of animations using this technique. Here is the demo of chaining animations.

Wrap Up

In this tutorial, we explored the possibilities of building animations with jQuery animate function. We have looked at various practical techniques when animating the parts of an image to generate the complete image. Now you can continue researching about the things mentioned in the following list for enhancing jQuery animations.

  • Animations queueing
  • Handling animation progress
  • Handling animation steps

Hope you take time to build some amazing animations as we listed in the beginning of this tutorial. Feel free to share and discuss about them using the comments section.

May 03 2013

13:00

Create a Coca-Cola Can Using Adobe Photoshop

In this tutorial, I will teach you how to create a Coca-Cola can from scratch in Photoshop using shapes, brushes and layer styles. You are going to learn different techniques which you can apply to solve different problems in iconography, UI or web layouts. Photoshop is one of the most powerful programs out there and once you start learning your way around it, you’ll realize that what you can do with it is only limited by your imagination.
The best way to improve your skills is through discovery and experimentation. Don’t wait for a tutorial or article, grab an image and start trying to mimic its shapes, weight, light and shadows.

If you have any questions, use the comment section and I’ll get back to you. Let’s get started!

Final Result

Final result

Step 1

Open Photoshop and set up a new document with size of at least 800px by 800px.

step1

Step 2

Create one vertical guide and one horizontal guide and align them to the middle of your document. To do this, go to View > New Guide , choose horizontal and apply a position of 50%. Do the same for the vertical guide.

step2

Step 3

The first thing is to make the shape of our can. You can use your own imagination here, however, in this case, I’ve used an image for reference (although I didn’t follow the real form completely).

step3

Step 4

In order to keep the shape of the can equal in both sides, we will draw half of the can and duplicate it. Activate the Pen tool (P), and start drawing just half of the red shape.

step4

Step 5

With the red shape layer selected, press alt+shift on your shape and drag it to the side. Then, press ctrl+T, right click on the shape, select Fip Horizontal and press enter. You can also do this by going to Edit > Transform Path and select Flip Horizontal.

step5

Step 6

Place your second half right next to the first half, select both shape layers and, with the Pen tool activated, right click on one of the shapes and select Unite Shapes. You now have one single shape.

step6

Step 7

Choose a different color and repeat the steps for the top and bottom sections of the can. Make sure the Top and Bottom shape layers are on top of the red shape layer.

step7

Step 8

Duplicate the red shape layer, position your cursor between the two red shape layers, hold down the Alt / Option key and click to create a clipping mask. Name the layers according to the image below.

step8

Step 9

Welcome to the fun part! We now have a shape for our can so we are going to start giving it a realistic look. Select the Main Shape layer, open the Blending options panel (right click on the Layer > Blending options) and apply a Gradient Overlay with the following settings:

step9

Step 10

With the Pen tool (P), create a new black shape and place it like in the image below.

step10

Step 11

Right click on the new shape layer, convert it to smart object and then go to Filter > Blur > Gaussian Blur and enter a value of 14. Finally, make the new shape layer a Clipping Mask like you did in step 8 and change Fill of the new black shape to 70%.

step11

Step 12

Using the Pen tool, create a new shape like in the image below.

step12

Step 13

Convert it to Smart Object, give it a Gaussian Blur of 2 and change Fill to 40%. Set it as Clipping Mask like in previous steps and set the blending mode to Overlay.

step13

Step 14

Create a new shape and place it like in the image below. Name this layer ‘Horizontal div1‘.

step14

Step 15

Convert it to Smart Object and set it as clipping mask like in previous steps. Set the blending mode to Soft Light and apply a Gaussian Blur with a value of 4.

step15

Step 16

Cmd/Ctrl + click on the Main Shape layer to select its form, then create a new layer and with a soft edge brush with size of 24px draw a straight line in the same area.

step16

Step 17

Set the layer you have just created to Soft Light and add a layer mask to it. Select black as your foreground color and a brush size of 60px. With the layer mask selected, paint gently on the top and bottom of the black area leaving just the middle section intact. Name this layer ‘Horizontal div2′.

step17

Step 18

Cmd/Ctrl click on the red shape to make it selected, create a new layer, select #eeb946 as your foreground color, select a soft edge brush with a size of 100px and draw a straight line from the top to almost the bottom of the can.

step18

Step 19

With the newly created layer selected, set blending mode to Soft Light and Opacity to 70%. Then add a layer mask, select black as your foreground color, change brush size to 65px and flow to 30%. Start painting the right side a light yellow in order to make it slightly less visible than the left side, without removing it completely.

step19

Step 20

With the Pen tool activated, make a new shape similar to the one below.

step20

Step 21

Convert it to Smart Object and apply a Gaussian Blur with a value of 15. Set blending mode to Overlay.

step21

Step 22

Create a new shape layer and place it in a position similar to the one below. Name this layer “Middle dark”.

step22

Step 23

As usual, let’s convert our latest shape layer to a Smart Object, set the blending mode to Soft light and apply a Gaussian Blur with a value of 10. Press Ctrl/Cmd+J to duplicate the layer and set the Opacity of the new layer to 40%.

step23

Step 24

Create two new shape layers and place them like in the image below.

step24

Step 25

Convert each shape to Smart Object, set blending mode to Soft light and apply a Gaussian Blur with a value of 10. Do this for both shape layers.

step25

Step 26

Create a new shape like the one below.

step26

Step 27

Convert the shape to Smart Object, set blending mode to Overlay and apply a Gaussian Blur with a value of 7.

step27

Step 28

Now let’s focus on the top section of the red shape. Locate the two layers responsible for the horizontal dark line at the top (we named them ‘Horizontal div1′ and ‘Horizontal div2′). With black as your foreground color, select the layer mask and using a soft round edge brush with size of 45px and flow at 30%, delete the area where the light goes through. Do this for each of the two layers.

step28

Step 29

Create a new layer and select a soft edge round brush with a size of 48px and flow 100%. Click once to make a circle at the top (slightly above the line). Set blending mode to Overlay and duplicate the layer.

step29

Step 30

Edges are still a little bright so let’s take care of that. Locate the Main Shape layer and apply an Inner Shadow with the following settings:

step30

Step 31

Let’s darken the bottom section of our red shape a little bit as well. This time, Cmd/Ctrl + click on the Main Shape to make its form selected and create a new layer. Select a soft round edge brush with size of 48px and flow at 30%. Make a straight line at the bottom and set the blending mode to Soft light.

step31

Step 32

In order to increase the realism of the can, we are going to add a window reflection to the can itself. Using the Rectangle Tool (U), create two shapes like in the image below. Then, using the Pen tool (P), unite both shapes like we did in Step 6.

step32

Step 33

We now have both shapes in one unique layer. Duplicate this layer twice and position the shapes like in the image below.

step33

Step 34

Add a Layer Mask to one of the three layers, set black your foreground color, select the Gradient Tool (G) and choose the black to transparent gradient by either selecting directly at the top (1st image) or clicking inside the gradient bar and selecting the second gradient (2nd image).

step34

Step 35

With the layer mask selected, hold shift and drag the mouse from the left side of the shape until you reach the middle of it making the left side transparent.

step35

Step 36

Hold the Alt/Option key and drag the layer mask to the other shape layers in order to copy and apply the same layer mask. Then set the blending mode of all three layers to Overlay and Opacity to 18%.

step36

Step 37

Select #eeb946 as your foreground color, make a new shape layer and place it like in the image below.

step37

Step 38

Convert the shape layer to Smart Object, set blending mode to Overlay, apply a Gaussian Blur with a value of 4 and set Opacity to 70%.

step38

Step 39

Let’s fix the light in the top section of the red shape. Ctrl/Cmd + Click the Main Shape and, with the Brush tool using a soft round edge with size 30px and flow at 30%, darken the top right and left areas a little bit more, similar to the image below.

step39

Step 40

Lets intensify the dark areas in the middle of the can. Locate the shape you have created in step 22 (named ‘Middle dark‘) and duplicate it. Set Opacity of the new layer to 25%.

step40

Step 41

Let’s proceed to the top of the can. Select the layer with the top shape and apply the following settings in the Blending Options panel:

step41

Step 42

Make white your foreground color and select a soft round brush with 100% Flow and size 30px. Cmd/Ctrl + Click the top shape layer to make its form selected, create a new layer, start drawing very gently 3 straight lines with a gap between them and place horizontally centered. Set blending mode to Overlay. Try to mimic the image below.

step42

Step 43

Do the same thing as in the previous step, however, this time make a line with no gaps and covering the top portion of the shape.

step43

Step 44

Time for shadows. Use the same technique but make small spots along the top shape. Intensify the darkness in the right and left edges.

step44

Step 45

Finally, make a thin line to give our top shape a 3D look and feel. Place it vertically and horizontally centered.

step45

Step 46

Let’s now take care of the bottom part of the can. Apply the following settings in the Blending Options panel:

step46

Step 47

The technique will be the same we used on the top part of the can. Cmd/Ctrl + click on the bottom shape layer and create a new layer. With a soft round edge brush with size 21px and flow at 100%, highlight the top part of the shape. Set blending mode to Overlay. Then, create another layer and do the same thing but this time make a vertical line covering the entire height of the shape, following the light of the red shape. Change the blending mode of the latest layer to Soft Light.

step47

Step 48

Apply the same method to darken the left and right edges of the bottom shape. Set blending mode to Overlay and Opacity to 70%.

step48

Step 49

Let’s darken the middle a little bit more. Do the same thing as in previous steps and make something like the image below. Set blending mode to Soft Light and Opacity to 60%.

step49

Step 50

Create a new layer and draw a shape similar to the one in the image below. Give it a color of #311010.

step50

Step 51

Convert the shape to Smart Object, apply a Gaussian Blur with a value of 5. Set the layer’s blending mode to Overlay and set Opacity to 20%.

step51

Step 52

Create a new shape to act like the image below. Add a layer mask and, using the Gradient Tool (G), remove the top and bottom areas of that shape exactly like we did in Steps 34 and 35.

step52

Step 53

Set Opacity to 20% and blending mode to Overlay.

step53

Step 54

Looking good. Grab the Coca-Cola logo that’s below this sentence, press Cmd/Ctrl + T to open the Transform panel and rotate in order to adjust it to the correct position.

coca_cola_logo

step54

Step 55

Let’s add some water drops. Using the Elipse Tool (U), create a circle shape and apply the following settings:

step55

Step 56

Copy the previous layer style, then create several shapes using the Pen tool and Elipse tool and past the same layer style to each shape. Organize the layers into a folder and duplicate your drops across the can.

step56

Hope you have found this tutorial useful for your future projects. Any questions you may have, please use the comment section below.

August 12 2012

13:00

40 Creative and Versatile Adobe Illustrator Tutorials From 2012

Adobe Illustrator is the designer’s best friend (and together with Photoshop, they’re like Starsky & Hutch). Illustrator offers unlimited opportunities, but you need to know how to use them. That’s where neat tutorials come handy.

Tutorials are not going to make you a better or more talented designer, yet the techniques and tricks they cover will come to assist you for a long time.

For this roundup, we’ve prepared 40 fresh (2012 only), creative and comprehensive Adobe Illustrator tutorials. By going through these tutorials, you will learn many things, such as how to create cute little characters, get to know the basic shapes and find out why it is a good choice to use Illustrator for designing user interfaces. 

Learn Illustrator CS6

Learn-cs6-adobe-illustrator-tutorials

As you may know, Creative Suite was released recently but what does it mean for Illustrator grinders? You can check out these video series by Adobe on the basics of Illustrator CS6, getting started, new features, tutorials etc. created by product experts.

1. Creating a Day of the Dead Inspired Portrait

Day-dead-adobe-illustrator-tutorials

This tutorial is going to show you how to create a Day of the Dead inspired portrait with Adobe Illustrator CS5. Along the way you’ll be using a variety of different sources to obtain color palettes, using a selection of brushes and many other quick tips you can use in future projects.

2. Create a Detailed Lifebuoy Illustration

Lifebuoy-adobe-illustrator-tutorials

In this Adobe Illustrator tutorial you will learn how to create a semi-realistic lifebuoy graphic. Once you are done with the basic shapes you’ll continue with some Pathfinder options, several Warp and Gaussian Blur effects plus some basic masking techniques.

3. Create a Detailed Scanner Illustration

Scanner-adobe-illustrator-tutorials

In this Adobe Illustrator tutorial you will learn how to create a detailed scanner illustration. You’ll be starting with a bunch of simple shapes and some basic vector shape building techniques. Once you have the starting shapes you’ll continue with some Pathfinder options, several new effects plus some basic masking techniques.

4. Create a Printer Illustration

Printer-adobe-illustrator-tutorials

In this Adobe Illustrator tutorial you will learn how to create a detailed printer illustration. You’ll start with two simple rectangles and some basic vector shape building techniques. Once you have the starting shapes you’ll continue with some Pathfinder options, a bunch of complex linear gradients and some simple effects. For the highlights you’ll use some simple blending techniques.

5. Create a Simple Map Illustration

Map-adobe-illustrator-tutorials

In this Adobe Illustrator tutorial you will learn how to create your very own simple vector map illustration. Some basic vector shape building techniques along with a bunch of warp effects is covered.

6. Create a Detailed Restaurant Chalkboard

Chalkboard-adobe-illustrator-tutorials

In this new Adobe Illustrator tutorial you will learn how to create a detailed restaurant specials style chalkboard. This is a pretty challenging tutorial, but with patience and some basic Illustrator knowledge you will make it through, and have a new illustration to play with.

7. How to Create Hand-Painted Sign in Adobe Illustrator

Sign-adobe-illustrator-tutorials

In this tutorial you will learn how to create an inscription in a retro style based on the free font — the Agency FB. In the process of the font-change you will learn something about letter anatomy. The techniques described here will be useful not only for the work with typography but also for the work with any vector objects.

8. Creating the Sole of a Sports Shoe with the Appearance Panel

Sports-shoe-adobe-illustrator-tutorials

This tutorial is going to show you how to use the Appearance panel to create a stylized version of the bottom of a sneaker. It’s a great exercise for those who are just getting to grips with the Appearance panel.

9. How to Create a Detailed Button and Needle Illustration

Button-needle-adobe-illustrator-tutorials

In this tutorial you will learn how to create a detailed button and needle illustration. This tutorial uses many different vector techniques including the Appearance Panel, Transparency Settings, Patterns and more.

10. How to Create a Promotional Website Infographic in Adobe Illustrator

Infographic-adobe-illustrator-tutorials

In this tutorial you will learn how to collect and process statistical data, then visualize it using Adobe Illustrator. You will also learn how the various vector elements of this project were created, as well as how to save the project in PDF format, edit it, add hyperlinks, and place navigation between pages.

11. Quick Tip: How to Create Subtle Patterns for Web Projects in Adobe Illustrator CS6

Subtle-patterns-adobe-illustrator-tutorials

Recently, the subtle pattern has been used more often in the design of websites. This tutorial will show how to create several types of these fillings. The whole process should take you only a few minutes if you use the Pattern Creation feature in Adobe Illustrator CS6.

12. Create a Detailed Syringe Illustration

Syringe-adobe-illustrator-tutorials

In this tutorial you will learn how to create a detailed syringe illustration. You’ll use basic illustrator shape creation tools and Illustrator’s Pathfinder tool to cut the shapes you need. Then you’ll color in details using gradients. You’ll use additional Illustrator tools along the way and work to pixel precision.

13. Create a Stylish, Vector Hair Typography Illustration

Hair-adobe-illustrator-tutorials

This tutorial is going to show you how to create this stylish piece of hair typography in Adobe Illustrator CS5. You’ll also finish it off with a quick aged coloring giving it a vintage design feel.

14. Creating a Detailed Eye from Stock in Adobe Illustrator

Eye-adobe-illustrator-tutorials

This tutorial is going to show you how to create a detailed eye from a stock image in Adobe Illustrator. You’ll work from some basic skin shading around the eye, to eyelashes, then a detailed iris and even eyebrows in this vector workflow.

15. How to Create a Line Art Vintage Vector Scooter in Illustrator

Scooter-adobe-illustrator-tutorials

This tutorial is going to show you how to create a vintage vector scooter illustration. It’ll show you how to create simplified line art without over-complicating the image. You’ll learn how to create a quick texture as a finishing touch from resources you have available to you within Adobe Illustrator.

16. Quick Tip: How to Easily Outline Curly Letters

Curly-letters-adobe-illustrator-tutorials

Making smooth looking curves and curls in vector can be tricky, especially if you’re working with hand drawn forms. This quick tip is going to show you the process of outlining some extremely curly letterforms that have been hand drawn and scanned into the computer.

17. Create a Skull & Crossbones Sticker Design in Illustrator

Skull-sticker-adobe-illustrator-tutorials

Follow this step by step guide to create a cool little skull and crossbones sticker design in Adobe Illustrator. This tutorial will hopefully be a great one for Illustrator beginners, as you’ll not only be creating the skull and crossbones design using all the important tools found in Illustrator, you’ll also be setting up the basic print document with bleeds and guides.

18. How To Create a Vector Sponge Art Effect in Illustrator

Sponge-art-adobe-illustrator-tutorials

Today designers and illustrators strive to add that retro/vintage style to their work with textures, so this tutorial covers the process of creating a cute kids style illustration complete with a vector sponge stamp effect.

19. Create a Retro Triangular Pattern Design in Illustrator

Triangular-pattern-adobe-illustrator-tutorials

Follow this step by step Illustrator tutorial to create the popular retro style pattern design made up of lots of colourful squares and triangles. The process is pretty simple, making this a good tutorial for newcomers to Adobe Illustrator.

20. How To Create a Cool Vector Yeti Character in Illustrator

Yeti-character-adobe-illustrator-tutorials

Follow this step by step Illustrator tutorial to create a cool vector Yeti character. You’ll use as many basic shapes as possible to achieve that quirky style of illustration, then bring the character to life with a palette of cold colours. Despite the use of basic shapes this tutorial includes a good spread of intermediate to advanced tools and techniques.

21. Happy Tree Friends in Illustrator

Tree-friends-adobe-illustrator-tutorials

Happy Tree Friends became classic because of the contrast between the cuteness of the characters and the violence and gore that they get into. That’s what you’ll try to depict following this tutorial. It’s a beginner tutorial, so no one should get any trouble on doing it.

22. Create Courage, The Cowardly Dog in Illustrator

Courage-dog-adobe-illustrator-tutorials

Courage, The Cowardly Dog was one of the awesome Cartoon Network series characters. Learn how to draw him in Illustrator. This is half a case-study and half a tutorial.

23. Create a Creamy Ice Cream Poster on Illustrator

Ice-cream-poster-adobe-illustrator-tutorials

A step by step tutorial, the idea is to incentive the idea of playing in Illustrator. It’s a simple tutorial and will deal with some pretty basic shapes, but a good knowledge of the softwares tool will make things quite easier for you, also if you are using a tablet for this tutorial.

24. Create a 3D custom map in Illustrator

3d-map-adobe-illustrator-tutorials

This tutorial explains how to create isometric icons in Illustrator using a grid and the 3D Extrude tool. Once you get the hang of drawing the simplest shapes in this isometric style, you can draw just about anything.

25. Video tutorial: Quick and easy pattern swatches in Illustrator CS6

Pattern-swatches-adobe-illustrator-tutorials

Becca Allen explains how to make complex and colourful pattern swatches using the Pattern Creation mode in Illustrator CS6.

26. Create retro graphics in Illustrator

Retro-adobe-illustrator-tutorials

This tutorial explains how to create a cool T-shirt graphic with a retro feel in just a few simple steps. Using Illustrator, you’ll form some simple vector shapes with the Pen tool and then add textures for a retro aesthetic.

27. Create a textured vector cityscape

Cityscape-adobe-illustrator-tutorials

This Masterclass shows how painter and graphic artist Phil Ashcroft created his urban cityscape newbuild (Creekside), which looks at new housing developments growing within areas that had previously fallen into decline. Phil explains how he combined traditional compositional, colour and layout skills, utilizing a background in painting to create a bold, clear yet atmospheric digital work.

28. Bring the happy to an illustration

Happy-adobe-illustrator-tutorials

With a carefully constructed composition that makes creative use of colour, it’s possible to create an image rich in magic and positivity without it being sickly sweet. The chance find that forms the basis of the artwork in this tutorial is a sacred tree-stump temple for tiny practitioners of a unique style of woodland-based martial arts.

29. Create Art Deco type art

Art-deco-adobe-illustrator-tutorials

This tutorial’s featured artwork began life when Adam Pointer was commissioned by design agency Zip to produce a piece promoting the Sunday night event at the now-defunct London West End club, The End. This Masterclass focuses on the process, which author says is about creating, selecting and positioning elements without resorting to any great wizardry.

30. Create promotional artwork that sells you to new clients

Self-promotional-adobe-illustrator-tutorials

Self-promotion is one of the most important areas of any freelancer’s business. Ben the Illustrator devotes some of his time to devising art purely to win over potential clients, and in this tutorial he takes you through the creation of a piece from what he calls his ‘seasonal billboard’: online self-promotional work depicting the four seasons.

31. How to Create Infographics in Adobe Illustrator

Infographic-2-adobe-illustrator-tutorials

In this tutorial you will learn how to create information graphics (infographics) using the standard tools of Adobe Illustrator. You will also get to know some ways to change graph appearance retaining its dynamic functions; i.e. you will be able to edit the data graphs after all transformations.

32. How to Create a Mail App Icon Using Adobe Illustrator

Mail-icon-adobe-illustrator-tutorials

This tutorial is going to show you how to create icons for iOS-applications, it will also cover the technical requirements that are applied to this kind of products. In the process you will be using unique techniques that will allow you to create light and shade and soft play of colors.

33. Sketch to vector Illustrator Tutorial

This tutorial will show you how to go from sketch to vector and maintain that hand-drawn look. You’ll start off with cleaning the image in Photoshop, then take it into Illustrator and use the automated live trace tool.

34. How to Create Vector Illustrations Using the Pen Tool in Adobe Illustrator

This tutorial shows you how to use the pen tool to trace out images and create vector illustrations.

35. Bezier Basics: Introduction to Pen Paths in Adobe Illustrator

This is a very basic introduction into how Pen paths (or Bezier Paths) work in Adobe illustrator. Later tutorials will show you how to do basic tracing and drawing work in Illustrator. You will also examine how other software, such as Photoshop, After Effects, Motion, Final Cut, and Cinema 4D all use bezier paths in their own way to do things like create shapes, control movement and generate 3D forms.

36. Illustrator: setting up a graph

Learn how to set up a graph and edit basic settings in Adobe Illustrator. Useful for creating infographics.

37. How to Create a Detailed Calendar Widget

Calendar-widget-adobe-illustrator-tutorials

In this Illustrator tutorial you will learn how to create a detailed calendar widget.

38. Creating a Slice of Cake Icon with Adobe Illustrator

Slice-cake-adobe-illustrator-tutorials

This tutorial is going to show you how to create a slice of cake icon in Illustrator. It’s going to take on a previously determined style to help become part of a baked goods icon set.

39. Why you should use Adobe Illustrator to create user interfaces

Interface-adobe-illustrator-tutorials

Novice designers always come up with a question about which application to use to create user interfaces. Most choose a bitmap editor such as Photoshop. However, some believe that vector editors are better suited for this purpose, especially when it comes to such a powerful application as Adobe Illustrator. Why? This article is an introduction to the series of tutorials that will be devoted to the creation of interface elements in Adobe Illustrator.

40. How to Create a Gift Card and Prepare Artwork for Printing Using Adobe Illustrator

Gift-card-adobe-illustrator-tutorials

This tutorial covers the issues concerning the creation and pre-press workflow of a vector file. When creating an artwork that you are going to print, you should take into consideration the design’s technical factors. Author uses some premium plugins but you can even manage without them.

What do you think of these tutorials? Do share your thoughts in the comments below!

March 19 2012

10:00

50 Fresh and High Quality Adobe Photoshop Tutorials

Waiting for the fresh collection of Adobe Photoshop tutorials? If yes, then your waiting has come to an end. Here we are featuring a good collection of some high quality Adobe Photoshop tutorials for you so that you can learn some new techniques and can polish your Photoshop skills.

Adobe Photoshop itself is quite easy to learn and with the help of tutorials the learning process becomes a fun activity. Enjoy looking into this collection and have more fun in using them for your works. Let us know what you think about this compilation or if we have missed out some cool tutorials, just drop us a line and we will try to include that in our next compilation.

1. Create a Baseball-Inspired Text Effect

Applying texture to a text effect can be a lot of fun. In this tutorial we will explain how to create a baseball-inspired text effect using layer styles, patterns, and brushes. Let’s get started!

Create a Baseball-Inspired Text Effect in Photoshop

2. How to Create a Psychedelic Tiger Illustration

Learn how to create this super cool neon tiger poster in Photoshop! You’ll learn how to get neon colors using Gradient maps and learn some over-painting techniques to bring the whole image to life.

How to Create a Psychedelic Tiger Illustration in Photoshop

3. Create a Semi-Realistic MacBook Pro from Scratch

In the following Photoshop tutorial you will learn how to create a semi-realistic MacBook Pro from scratch. First, you will learn how to use the grid and the snap to grid for an easier workflow.

Create a Semi-Realistic MacBook Pro from Scratch

4. Create a Festive Cocktail Using Photoshop’s 3D Capabilities

In this tutorial, we will explain how to create a festive cocktail using Photoshop’s 3D capabilities just in time for your New Year’s celebrations. Let’s get started!

Create a Festive Cocktail Using Photoshop’s 3D Capabilities

5. Create a Cartoon-Style Graffiti Text Effect

Learn how to create graffiti text from scratch in Photoshop! This tutorial will show you how to use layer styles and finish the effect with a vector-style brick background.

The Avengers Poster in Photoshop

6. Create a Royal Gold Text Effect in Photoshop Using Layer Styles

In this quick tutorial we will show you how to create a royal gold text effect using layer styles in Photoshop. Let’s get started!

The Avengers Poster in Photoshop

7. Create a “Real Steel” Film Poster Inspired Text Effect

In this tutorial, artist will show you the steps he took to Create a “Real Steel” Film Poster Inspired Text Effect in Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try :)

Create a “Real Steel” Film Poster Inspired Text Effect in Photoshop

8. Create Realistic Shoelaces From Scratch

In this tutorial we will explain how to create realistic shoelaces from scratch in Photoshop. Let’s get started!

Create Realistic Shoelaces From Scratch in Photoshop

9. Create a Magical Photo Manipulation with Flowery Effect

In this tutorial, you will learn how to create a Magical Photo Manipulation with Flowery Effect in Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try :)

Create a Magical Photo Manipulation with Flowery Effect in Photoshop

10. How to Make a Car Advertisement Poster Design

In this graphic design tutorial, we’ll cover the essential advertising workflow. By following along with this Photoshop ad tutorial, you’ll see how to take just a simple stock image and build a pixel perfect artwork around it, while also communicating valuable information about the brand to viewers.

How to Make a Car Advertisement Poster Design

11. Create an “Action” Text Effect

In this quick tip tutorial we will demonstrate how to create a cinematic “Action” Text Effect in Photoshop using layer styles. Let’s get started!

Quick Tip: Create an “Action” Text Effect in Photoshop

12. Create a Mini Planet Using Photoshop’s 3D Capabilities

When most people think about Photoshop, they probably don’t think about 3D. What most people don’t realize, however, is that Photoshop CS5 Extended includes some powerful tools to help you render your artwork in 3D. In this tutorial we will demonstrate how to create a mini planet using Photoshop’s 3D capabilities. Let’s get started!

Create a Mini Planet Using Photoshop’s 3D Capabilities

13. Create a Dramatic Building Explosion Scene

In this tutorial we will learn how to create a Dramatic Building Explosion Scene.

Create a Dramatic Building Explosion Scene

14. Create an Action Packed Movie Poster in Photoshop

In this tutorial we will explain how to create a character-centered movie poster using photo manipulation techniques. We will also explain how add text to give our poster a cinematic feel. Let’s get started!

Create an Action Packed Movie Poster in Photoshop

15. Create a “Transformers” Text Effect Using Layer Styles

In today’s quick tip tutorial we will demonstrate how to create a cinematic “Transfarmers” Text Effect using the layer styles. Let’s get started!

Quick Tip: Create a “Transfarmers” Text Effect Using Layer Styles in Photoshop

16. The Avengers Poster in Photoshop

In this tutorial we will show you how to create the shine effect of The Avengers poster using only Photoshop. We will pretty much play only with Layer Styles and the Brush Tool.

The Avengers Poster in Photoshop

17. Create a Rusty and Worn Metallic Textured Skull Using 3D Renders

Photoshop is a fantastic tool to help 3D artists save time and improve the look of their renders. In this tutorial we will demonstrate how to combine ZBrush materials and lighting render passes to create a stunning metallic textured skull. Let’s get started!

Create a Rusty and Worn Metallic Textured Skull Using 3D Renders

18. Create the Emotional Photo Manipulation Flaming Heart

In this tutorial we will show you how to create a photo manipulation with firing effect. You will learn how to manipulate stocks images together, use brush, masking, work on fire, do some special extracting and retouching techniques as well as adjust colors and lighting to create a beautiful and emotional scene.

Create the Emotional Photo Manipulation Firing Heart

19. How to Create High Quality Metal 3D Text in Photoshop

Most of you probably know those awesome letters that were generated with 3D programs. But what about when you don’t have any particular program and you need to make 3D typography? This tutorial will show you how to create the 3D text shape and give it a high quality metal look using pure Photoshop. Check it out!

How to Create High Quality Metal 3D Text in Photoshop

20. Learn How To Create A Stubby Pencil In Photoshop

In this tutorial we will be showing you how to create a neat stubby pencil from scratch using adobe photoshop.

Learn How To Create A Stubby Pencil In Photoshop

21. Create a Medieval Battle Axe in Photoshop

In this tutorial we will demonstrate how to construct a medieval battle axe in Photoshop. This tutorial will cover several techniques but don’t worry, it won’t be too difficult to follow. Let’s get started!

Create a Medieval Battle Axe in Photoshop

22. Learn How To Create A Photoshop Style Pen Tool Icon

In this tutorial we will be showing you how to make your very own photoshop pen tool icon from scratch, using photoshop CS5. Lets get started…

Learn How To Create A Photoshop Style Pen Tool Icon

23. Create a Mobile App Icon in Photoshop

In this tutorial, we will explain how to design an icon for your mobile device’s home screen. Let’s get started!

Create a Mobile App Icon in Photoshop

24. How to Create a Fan Illustration From Scratching

In this detailed tutorial your will learn how to create a fan illustration.

How to Create a Fan Illustration From Scratching Using Photoshop

25. Create an Elephant Sundae Using Photo Manipulation Techniques

Photoshop is great at seamlessly combing photos to create an entirely new scene. In this tutorial we will create an elephant sundae using several stock photos. Let’s get started!

Create an Elephant Sundae Using Photo Manipulation Techniques

26. Create a Surreal Floating Stone Structure Scene

In this tutorial we will learn how to create a Surreal Floating Stone Structure Scene.

Create a Surreal Floating Stone Structure Scene

27. Draw a Character Concept Using Drapery in Photoshop

In this tutorial we will learn how to draw a character concept using drapery in Photoshop.

Draw a Character Concept Using Drapery in Photoshop

28. Create a Dark, Conceptual Photo Manipulation

In this tutorial we will be teaching how to integrate elements from different sources to create a realistic photo manipulation with dark and conceptual elements. You will learn some lighting and blending techniques as well as some interesting post-production tips. Let’s get started!

Create a Dark, Conceptual Photo Manipulation With Stock Photography

29. Learn How To Create An Open Book In Photoshop

In this tutorial we will be showing you how to create a sleek book with a nice leather textured background. Lets get started.

Learn How To Create An Open Book In Photoshop

30. Create a Dynamic Portrait with Flashy Light Effects

Learn how to create your own futuristic portraits with swirling ribbons of light. This Photoshop tutorial will show you how to create light streaks and other high-tech elements that you can incorporate into your own photos!

Create a Dynamic Portrait with Flashy Light Effects

31. Design a Detailed Audio Receiver Icon in Photoshop

In this tutorial we will show you how to create a detailed audio receiver icon using Photoshop’s vector editing capabilities. Let’s get started!

Design a Detailed Audio Receiver Icon in Photoshop

32. Design an Interesting Human Face Manipulation with Tree Roots Texture

In this tutorial, artist will show you the steps he took to Design an Interesting Facial Manipulation with Tree Roots Texture in Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try :)

Design an Interesting Human Face Manipulation with Tree Roots Texture in Photoshop

33. Easy Hulk Logo on Illustrator and Photoshop

In this tutorial you will learn how to create Hulk Logo on Illustrator and Photoshop, this is a intermediary tutorial, so it’s not as long and it’s not as hard.

Easy Hulk Logo on Illustrator and Photoshop

34. Make a Colorful Gooey Typographic Design

In this design tutorial, we’re going to create a colorful and liquid-like typographic piece in Photoshop. We will be using the Pen Tool (P) quite a bit, as well as covering some useful digital airbrushing techniques to achieve the final result. Let’s fire up Photoshop and get started!

Make a Colorful Gooey Typographic Design in Photoshop

35. Create a Glamorous Vintage-Style Poster in Photoshop

In this Photoshop tutorial, designer will walk you through a process of creating digital work inspired by older magazine fashion ads. You will learn how to use basic shapes and brushes to create an abstract background, see how layers react to one another with Blend Modes, how to create trendy abstract shapes, how Gradient Maps can be used to influence the overall design and more.

Create a Glamorous Vintage-Style Poster in Photoshop

36. How To Create a Dirty Typographic Blackletter Design

In this tutorial we’re going to create a typographic blackletter layout full of character with dirty textures. We’ll begin by creating the layout in Illustrator before importing everything into Photoshop to bring the design to life with colour, tone and weathered textures.

How To Create a Dirty Typographic Blackletter Design

37. Create a Mythical Fantasy Female Photo Manipulation

In this photo manipulation tutorial, we will use many effects and blending and toning techniques, We are sure you’ll learn something out of it even if you already are a professional.

Create a Mythical Fantasy Female Photo Manipulation

38. Create a Realistic Vault Icon in Photoshop

Learn how to create a realistic Vault/Safe using Adobe Photoshop. We’ll be creating this vault using shapes, blending options and various techniques.

Create a Realistic Vault Icon in Photoshop

39. Realistic smoke effects in your digital print design through Photoshop

In this tutorial we will learn how to create a realistic smoke effects in your digital print design through Photoshop.

Realistic smoke effects in your digital print design through photoshop

Tutorials for Creating Website Layouts

40. Design a Professional Blog Layout in Photoshop

In this tutorial we’re going to walk through designing a professional blog magazine theme in Photoshop. This is an exercise in aesthetics and you’ll learn a bunch of techniques which will improve your skills in Photoshop. Grab a coffee, sit tight and let’s get started!

Design a Professional Blog Layout in Photoshop

41. Create a Classic-Styled Portfolio Design in Adobe Photoshop

In this tutorial we will be creating a nice design for your online portfolio. What we will learn here is how you can use a combination of textures and patterns to create a nice old-school look and how to use guides in a smart way.

Create a Classic-Styled Portfolio Design in Adobe Photoshop

42. Create A Dark, Clean Website Design In Adobe Photoshop

In this tutorial we’re about to learn how to design a dark, clean website in Adobe Photoshop. As we go through this tutorial, we’ll work with: simple shapes (rectangles, lines, arrows, etc), layer styles, patterns, importation, and paragraph styles, and many other Photoshop design techniques that you can adapt to your Website interface design workflow.

Create A Dark, Clean Website Design In Adobe Photoshop

43. Design a Drupal Business Theme in Photoshop

We are going to walk you through designing a simple website which can be converted into a functional Drupal theme. In this, the first part, we’ll cover basic photoshop techniques, such as styles, slicing, guides, layer structure and much more.

Design a Drupal Business Theme in Photoshop

44. Design a Clean e-Commerce Website Interface in Photoshop

Here we will show you how to create this clean e-commerce website interface in Adobe Photoshop. This tutorial isn’t only filled with many Photoshop techniques but also design concepts that go beyond the how-to part, which I’m sure you don’t want to miss. So let’s get started!

Design a Clean e-Commerce Website Interface in Photoshop

45. Design a Food/Cafe Website Template in Photoshop

Learn how to design a professional and fun website template for a Cafe, Restaurant or Food related website. We’ll be using simple yet effective methods and various photoshop tools to create this beautiful layout from scratch!

Design a Food/Cafe Website Template in Photoshop (+Free PSD)

46. How to create a Business Web Layout in Photoshop

In this tutorial we will learn how to create a Business Web Layout in Photoshop.

How to create a Business Web Layout in Photoshop

47. Designing a Jeweler’s Website in Photoshop

In this tutorial we will be designing a Jeweler’s Website in Photoshop.

Designing a Jeweler’s Website in Photoshop

48. How to Design an Elegant Hotel Website in Photoshop

Here we are sharing a tutorial to design a Hotel/Motel business web layout in Photoshop. This is an easy tutorial and even beginners should be able to follow it.

How to Design an Elegant Hotel Website in Photoshop

49. Design a Textured Email Template in Photoshop

In this tutorial we’ll be learning how to make a Textured Email Template using Adobe Photoshop. To make this template, we’ll be creating a textured pattern from scratch, using various shapes, a wooden texture, blending options and helpful tips and techniques.

Design a Textured Email Template in Photoshop

50. Create a Clean Twitter App Interface in Photoshop

In this tutorial we will create a clean Twitter app interface in Photoshop using layer styles and basic vector shapes. Let’s get started!

Create a Clean Twitter App Interface in Photoshop

December 28 2011

21:00

40+ Fresh jQuery Image and Content Sliders Plugins

In this round-up, you will find the best of the freshest jQuery Image and Content Sliders Plugins so that you can take advantage of them and produce startling image and content sliders. You may find it quite difficult to figure out which plugin is best for you because all these plugins have different functionality. Keeping this in mind, we compiled this post. Let’s have a closer look!

1. FlexSlider

( Demo | Download )

FlexSlider is an amazing, totally responsive jQuery slider plugin. It bears uncomplicated, semantic markup, slide and fade animations, and is supported in all major browsers, therefore you won’t have any compatibility issues. Flexslider is built for novices and pros in a similar way.

FlexSlider

2. Bubble Slideshow Effect with jQuery

( Demo | Download )

In this tutorial we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as an interesting slideshow, and as the code will be completely modular, you will be able to easily use it and modify it.

Bubble Slideshow Effect with jQuery

3. Responsive Image Gallery with Thumbnail Carousel

( Demo | Download )

With this plugin you can create a responsive image gallery with a thumbnail carousel using Elastislide. The gallery will have a view switch that allows people to view it with or without the thumbnail carousel. We’ll also add the possibility to navigate with the keyboard.

Responsive Image Gallery with Thumbnail Carousel

4. Circular Content Carousel with jQuery

( Demo | Download )

With this circular content carousel, you can have some content boxes that can slide substantially (circular). Clicking the “More” link will move the respective item to the left and slide out the content area, so that you can navigate through the carousel where every step will disclose the next or previous content box with its extended content.

Circular Content Carousel with jQuery

5. Lateral On-Scroll Sliding with jQuery

( Demo | Download )

In this tutorial we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport.

Lateral On-Scroll Sliding with jQuery

6. Scrollbar Visibility with jScrollPane

( Demo | Download )

Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. In this tutorial we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.

Scrollbar Visibility with jScrollPane

7. Timelinr

( Demo | Download )

This simple jQuery plugin will assist you in providing more life to otherwise your lifeless timelines. With this plugin, you can easily parameterize the majority of attributes: speed, transparency, etc. It also supports horizontal and vertical layouts.

Timelinr

8. SmartGallery

( Demo | Download )

SmartGallery is a lightweight, lightening up fast and completely customizable image gallery that has been exclusively designed to support huge data. SmartGallery comes with 12 different transition effects together with some inimitable transition effect and thumbnail navigation.

SmartGallery

9. Xml Driven Vertical News Scroller Script

( Demo | Download )

vScroller demonstrates classified and color-code content is an upright or vertical scroll. Feeds originate from regular XML file and styled with plain CSS3 for a fresh and good-looking interface.

Xml Driven Vertical News Scroller Script Using html and jQuery vScroller

10. jQuery Sliding Content Bar Plugin: PushUp Content

( Demo | Download )

This smart and fast content bar is easy to integrate in any web design or web based application. You can seamlessly integrate this in your website and it will pop up whenever needed. Apart from this, it is highly easy to customize this plugin. You can add your contact details, location map by means of Google Maps, and a plain contact form that visitors can use to make contact with you.

jQuery Sliding Content Bar Plugin: PushUp Content

11. Skitter

( Demo | Download )

Skitter is a plugin for producing good-looking slideshows. You can modify every aspect of your slideshow.

Skitter

12. Diapo

( Demo | Download )

Diapo is a free of charge and open source jQuery slideshow plugin. Most interestingly, you can also use it in your projects and sell it as part of a bigger work (donations are not required, but asked to be considered in this case).

Diapo

13. Craftyslide

( Demo | Download )

Craftyslide is a small slideshow that is built on jQuery with the intention to be unique by furnishing a simple, no-frills process of displaying images packaged into a small, clean and competent plugin.

Craftyslide

14. Responsly.js

( Demo | Download )

Responsly.js is a band of simple responsive widgets, written by means of CSS3 transformations and accessible as a jQuery plugin.

Responsly.js

15. Elastislide

( Demo | Download )

This is another very responsive jQuery carrousel that will adjust its size and its performance so as to work on any screen size. Putting in the carousel’s structure into a container with a fluid width will make the carousel fluid as well.

Elastislide

16. Blueberry

( Demo | Download )

This one is an experimental open source jQuery image slider plugin that has been designed with the aim to work with fluid/responsive web layouts.

Blueberry

17. Slidorion

( Demo | Download )

Slidorion is an amalgamation of an image slider and an accordion; and therefore, it demonstrates attractive images together with a changeable length description. Slidorion is a great alternative to the traditional jQuery slider seeing that images are linked to each tab and accompanied by a large array of effects.

Slidorion

18. bxSlider

( Demo | Download )

bxSlider is a jQuery HTML content slider and image slideshow.

bxSlider

19. Minimit

( Demo | Download )

Minimit Gallery is an exceedingly customizable jQuery plugin that does practically everything: galleries and slideshows to carousels and slides and any other thing that has multiple states.

20. Galleria

( Demo | Download )

Galleria is a JavaScript image gallery framework that has been built on the jQuery library. The aim is to make the process of creating professional image galleries easier for the web and mobile devices.

Galleria

21. jQuery Image Gallery

( Demo | Download )

This is an effortless jQuery image gallery plugin.

jQuery Image Gallery

22. rlightbox

( Demo | Download )

rlightbox is antoher jQuery UI media box that can put on view several kinds of content for instance images, YouTube and Vimeo videos. It bears several matchless features like Panorama and Live Re-size. Like other jQuery UI widgets, it is ThemeRoller ready.

rlightbox

23. jQuery MB Bgnd Gallery

( Demo | Download )

With this jQuery plugin you can make a suggestive slide show of images as the background of your page; the images will adapt their size to the window size. You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.

jQuery MB Bgnd Gallery

24. PikaChoose

( Demo | Download )

PikaChoose is a lightweight jQuery Slideshow plugin that make allowances for unproblematic presentation of photos with carousels and lightboxes! Pikachoose is created to be effortlessly installed, trouble-free to setup.

PikaChoose

25. Fluid Thumbnail Bar with jQuery

( Demo | Download )

With this plugin you can make a fluid thumbnail bar that pages through the images it contains.

Fluid Thumbnail Bar with jQuery

27. Elastic Image Slideshow with Thumbnail Preview

( Demo | Download )

Here we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

Elastic Image Slideshow with Thumbnail Preview

28. Fullscreen Slideshow with HTML5 Audio and jQuery

( Demo | Download )

In this jQuery tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sound with the HTML5 audio element in order to give life to the gallery and try to recreate the ambiance of this vibrant city.

Fullscreen Slideshow with HTML5 Audio and jQuery

29. Image Wall with jQuery

( Demo | Download )

With this plugin you can create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

Image Wall with jQuery

30. Rotating Image Slider with jQuery

( Demo | Download )

Rotating Image Slider with jQuery

31. Moving Boxes Content with jQuery

( Demo | Download )

With this plugin you can create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area.

Moving Boxes Content with jQuery

32. Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

( Demo | Download )

With this jQuery plugin you can create a beautiful full-screen slideshow.

Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

33. Flip Box

( Demo | Download )

Flip is a jQuery plugin that will easily flip your elements in four directions.

Flip Box

34. Innovation Slide – Slide jquery plugin

( Demo | Download )

With this plugin you can create a simple, lightweight, effects-laden and very versatile photo slide. It will allow us to flow in a “different” our content: images, text, etc.

Innovation Slide - Slide jquery plugin

35. TN3 Gallery

( Demo | Download )

With TN3 Gallery you can easily create amazing photo galleries and slideshows with slick transition effects, as well as multiple albums, CSS skinning, XML and Flickr support with a host of additional features. No browser plugins required.

TN3 Gallery

36. Shutter Effect Portfolio with jQuery and Canvas

( Demo | Download )

In this jQuery tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

Shutter Effect Portfolio with jQuery and Canvas

37. Photobooth with PHP, jQuery and CSS3

( Demo | Download )

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

Photobooth with PHP, jQuery and CSS3

38. Making a Flickr-powered Slideshow

( Demo | Download )

In this tutorial we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events.

Making a Flickr-powered Slideshow

39. How to Make Auto-Advancing Slideshows

( Demo | Download )

With this plugin we can create HTML5 Slideshow auto advance with a few lines of jQuery.

How to Make Auto-Advancing Slideshows

40. Sliding Contents With JQuery

( Demo | Download )

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

Sliding Contents With JQuery

41. Slides

( Demo | Download )

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

Slides

42. Slidy

( Demo | Download )

jQuery Slidy is a plugin that generates a customizable transitions automatically.

Slidy

December 21 2011

21:00

4 Simple Steps To Make Silhouettes Using Photoshop

Silhouettes as an art form originates back to as early as 18th century drawing its name from a French minister Étienne de Silhouette who imposed heavy economic cuts on French people. Quite symbolically austere outline portraits which became popular in the same time period started to be referred as Silhouettes.

Silhouettes art had tremendous popularity which has grown over years and is now associated more with images depicting fashion and fitness. Traditional ways of making Silhouettes are somewhat complex which involve cardboard and paints, but thanks to two wonderful inventions of mankind – Photoshop and Wacom things are much simpler now.

In this tutorial I will take you through some beautiful examples for inspiration and then we will proceed to make a silhouette from scratch.

Step 1: Inspiration


Silhouettes in movies
silhouettes in movies

The famous silhouetted image of Elliot and E.T. encircled by the moon depicted in Steven Spielberg’s E.T. It is now a part of the logo of his film and television company Amblin Entertainment.

The second one is of Alfred Hitchcock in American television series Alfred Hitchcock Presents in which he himself appears in a silhouette form in the opening screen and in a number of scenes as well.

Silhouettes as traffic symbols
silhouettes as traffic symbols

The first one is a Japanese railroad crossing signal which uses a silhouette of a steam engine. The second one is from Canada which warns drivers for speeding cameras. The third one is a Swedish moose warning signal, portraying silhouette of a moose, a typical encounter you might experience while driving in Sweden!

Silhouettes of public figures

Silhouettes of public figures
The first one is of English novelist Jane Austen, author of famous titles like Pride and Prejudice (1813) and Sense and Sensibility (1811) . Her silhouette is attributed to 19th century artist Mrs. Collins and is displayed at the National Portrait Gallery, London. The second one is of silhouette depiction of Queen Victoria used as decoration in the London Underground. The third one is artwork of designer Jonathan Mak depicting Steve Jobs on the apple logo, which went viral on the internet few days ago.

Step 2: Sketch


Grab a pencil and a sheet of paper and start sketching your ideas. No need to sketch in detail as we are going to use only the outline for making the silhouette, but make sure that the dimensions and/or anatomy is correct. In my case my client wanted something like a person using a phone. I made a few sketches, and drew a dark outline around them.
Silhouette sketch outline

The first idea depicts a lady walking a dog, looking at her phone. I imagined a background with neighborhood depiction like houses etc. which I can add to the silhouette later on. The second idea is of a guy standing and looking at his phone. In this case I imagined a park or similar setting with street lights etc. as background.

Step 3: Scan


Draw a thicker outline on your sketch and scan it. After scanning I found that the silhouette of the lady with dog appeared better on-screen, so I went ahead with it.

Scan

Step 4: Digitally Enhance


Open up the scanned image in Photoshop (or similar editor) and plug-in your Wacom (or similar device).

a. Outline

Create a new layer, select brush tool 2-3px, and set a contrasting foreground color (like red, so that it visible) and using the Wacom pen outline the image.

Scan

b. Fill the outline with the same color.

Fill silhouette

c. Duplicate the silhouette in a new layer, use the select tool to select the entire silhouette and fill it with #00000. In this step you can zoom into the image and edit minor flaws and smooth the outline with careful movements of the brush.

Select silhouette

Fill and save

If your silhouette consists of two or more elements, it’s easier if you handle them one by one. In my case I divided the task into three – the lady, the leash and the dog. So I repeated step a to c two more times and here is what the silhouette looks now.

So now the silhouette is done, you can save it as a vector and then proceed to using it in a banner or an image as required.

d. As I said before, I imagined the entire picture to be some sort of neighborhood, so created an apartment block and duplicated to make a couple of them for the background.

e. Now add the silhouette to the background

silhouette and background

f. Once the silhouettes and the background is ready, its time to work on the layout of the banner or the final image as required. Since this project was a banner for website I kept width as 900px and height as 357px. The elements that I added in this stage are speech bubbles which contains a specially designed Facebook button for the app and text.

silhouette on banner

The final banner looks like this. The banner depicts a Facebook enabled e-commerce app (www.dragdropshop.com), and will be a part of a sliding js carousel on client’s new homepage.

final banner with silhouette

September 09 2011

10:00

How to Achieve Lomography Effects Through Photoshop

Lomography is an interesting form of photography that’s on the rise today. It’s kind of like ‘backwards photography’–it’s a plastic toy camera that makes use of film. Because everything is made of plastic (yes, including the lens), the lomo camera does everything it’s not supposed to do: saturated colors, high contrast, off hues, vignettes, blurs, and more. It has developed into an art form because of these unique, ‘bad’ features.

However, lomography is expensive and time-consuming. A toy camera can be as cheap as $25 and more than $100. Plus you can’t see your pictures until the whole roll is over, and then you have to have it processed and scanned afterwards. Not to mention how disappointing it is when you found out that nothing from your roll came out. Even as a big fan of lomography myself, I also find it a bit too overpriced for a piece of plastic.

So whether you’re a cheapskate, you’re too impatient, or you simply find lomography too hard, there is a faster way to get those yummy lomo photos; thanks to the technology otherwise known as Adobe Photoshop.

Vignettes

Vignettes are a common feature in lomo photographs. Vignettes are characterized by a loss of clarity in the sides/corners of the image. It is often darker and blurry in the sides, but sharp and bright at the middle.

Do you know that creating a vignette in Photoshop is extremely easy? It can be done in less than five steps. The first thing to do is to open the image you want to add a vignette to. Copy the image and paste it in a new layer. Thus you have the same images in both layers.

On the top layer, select the elliptical marquee tool. Select and drag, making sure to include the whole image apart from the sides and corners. After you’ve made your final selection, right-click inside the selection and click on ‘Select Inverse’. This will swap the selected area, thus selection is now on the outer areas.

Now adjust the Brightness of the outer edges by selecting Image – Adjustments – Levels.  On Output Levels, drag the light arrow to the left to make it darker. Afterwards, go to Filter – Blur – Gaussian Blur to create soft edges. I adjusted my Gaussian Blur to 35, but you can adjust settings to where you are satisfied.

Of course, we are not yet done. Be sure though that only the topmost layer has been edited, leave the bottom layer of the same image untouched. To smoothly blend the vignette to the image, select the erase tool, set the brush tool to a big brush at 0% Hardness.

The final output should look more or less like the image below. You can also adjust the Brightness/Contrast of the image so that it can simulate the image more.

Cross-processed Photos

Lomography photographers often cross process their film, giving their photos weird colors and saturation. Cross processing is an old darkroom technique, the process involves deliberately processing film  with a chemical solution intended for another kind of film. This method was maybe discovered by photographers who accidentally used the wrong chemicals by mistake; and found the results interesting.

Here’s how you can do cross-processing through Photoshop. Let’s start with this image:

Pretty photo, but not retro funky enough.

Adjust the contrast level of the image until you are satisfied. Next is to open Image – Adjustment – Curves. Basically you just increase the Red and Green Channels  in the Highlights, and drop the shadows. In the Blue Channel on the other hand, raise the Shadows and reduce Highlights.

You can experiment with the effects yourself to get the desired cross-process effect you have in mind–go crazy or be subtle, whatever you want.

Multiple Shots

Many lomo cameras feature multiple shots in one single image: the Action Sampler, the Super Sampler, the Oktomat, etc. These cameras are great toys, but one has to admit that the novelty tends to wear off quickly.

Super Sampler Shot

There’s no doubt it’s easy to create this effect with Photoshop. All you need is to take continuous shots of the same place and subject, juxtapose it together in the Action Sampler / Super Sampler / Oktomat layout and it will look just the same. You can even add the vignette, noise and contrasted effect to make it more lomo-ish.

Photo by Rachel Arandilla

Photo above is an Action Sampler effect I created through Photoshop, done in less than ten minutes.

Fisheye Effect

The Fisheye is a cool effect, which takes a 170 degree photo of your surroundings. SLR cameras also have fisheye lens to achieve this effect. If you don’t have a fisheye lens or a Fisheye camera, here’s a quick way to get it in your photos.

Choose the image you want to create the fisheye effect. Crop it into a square by holding down ‘Ctrl’ while dragging to the desired area.

Select the Elliptical Marquee Tool and hold down ‘Ctrl’. Hold down until you select the whole image. Right click and select inverse, and fill the inverse area with black or white.

To create the fisheye effect, Simply open Filters – Distort – Spherize. Choose 100% and click OK.

Fisheye Effect

How About a Lomo Action Set

If you’re too lazy to do the editing yourself, there are downloadable action sets where you can simply click on ‘Play’. The computer does the rest for you, lomo-izing your photos in one second.

There are plenty of action sets online, such as the Lomo PS Actions by photoshop-stock. It’s free to use and download, with 6 available lomo actions that you can try. Here is the original image I selected:

Original photo, untouched

And here are the 6 lomo actions I tried, with their different colors and effects:

Lomo Mobile Application?

Lomo shots are now really popular, and because of this, mobile application developers are now taking a piece of the pie. Applications are now available to simulate lomo effects of your digital photos for both the Android and iPhone.

One of the more popular lomo applications is Instagram, which gives lomo filters to your otherwise dull iPhone shots. Moreover, you can instantly share your images on Twitter, Facebook, Tumblr and more.

The rise of these popular iPhone applications gave rise to a new term: iPhoneography. Essentially, this means the art of taking photos with your iPhone. You can post-edit the photos or not, if you are one of those purist photographers.

Is Photoshop the Answer?

Thing is, it’s not the effects that make lomography so great: it’s the experience. It’s about not knowing what you get, it’s about the surprise and the suspense, being thrilled and sometimes being disappointed. It’s about clicking the shutter with the picture in your mind and finding out it looks very different in print. Finally, lomography is about practice and experimentation, knowing more about your camera and yourself.

September 08 2011

10:00

PS Tutorial:Learn How To Make A Mechanical Sunflower

In this tutorial you will learn how to make a flower made of mechanical components. You will learn how to embed a variety of images together to make it look quite realistic. By following this tutorial you will learn how to nicely adjust blending options and use Photoshop tools to make a grim atmosphere. This is my first tutorial and I hope that you enjoy it and learn something at the same time!

How to make a mechanical sunflower

Used resources :

1. Creating a new document

Open a new document 1000 pixels width, 1500 pixels height.

Document Size Photoshop Tutorial Sunflower

Step 2 Creating background

Open the Background stock and resize it (Image > Image size), then drag it into your document.

Image Size Photoshop Tutorial Sunflower

Go to Layer > New Adjustment Layer > Levels and put in these settings:

Levels Parametres Photoshop Tutorial Sunflower

Now the image should look like this.

Levels Outcome Photoshop Tutorial Sunflower

Step 3 Making the flower

Open up the Gears 1 stock and cut out the closest gear, then drag it in our document, resize it and name the layer Gear 1.

Gears Stock Cutout Photoshop Tutorial Sunflower

Gear Positioning Photoshop Tutorial Sunflower

Now, duplicate Gear 1, make it smaller using Edit > Transform > Scale or Ctrl+T and, holding shift, make it a little smaller and place on top of Gear 1. Continue doing so, and it should look like this (after you’re done, merge these duplicated layers to original layer pressing Ctrl+E).

Making Flower Photoshop Tutorial Sunflower

Use the Burn tool (O) and Dodge tool (O) to shadow it, highlight it, use Eraser tool (E) on the bottom, to make it feel like it’s really growing out of dirt.

Dodge Burn Tool Photoshop Tutorial Sunflower

Now, open the Gears 2 stock, cut it, paste it in the document, resize it and shadow/highlight it, place it here.

Positioning Gears Stock Photoshop Tutorial Sunflower

Keep adding Gears 2 stocks, change their position, rotate them (Ctrl+T), you don’t really have to give it a thought, just make the impression that it’s mechanized. Name the most frontal gears layers Front Gears left and Front Gears right accordingly.

Adding Gears Photoshop Tutorial Sunflower

Open the Cog wheel stock, cut it out and paste it in our document, resize it. Paste another one, make it slightly smaller. Put both these cog layers under the frontal gears layers.

Adding Objects Cogwheel Photoshop Tutorial Sunflower

Layer Management Photoshop Tutorial Sunflower

Step 4 Decorating the background

Now we would want to strengthen our idea, so open up Chains stock, copy it, paste it in our document, resize it and change this layer’s blending options to Darken.

Adding Chains Photoshop Tutorial Sunflower

Select Brush tool (B), select white color (#ffffff), and grab a cloud brush from the pack, which I included, create a new layer and brush the bottom of the chain.

Clouds Photoshop Tutorial Sunflower

Step 5 Adding features to flower

Open the Crane stock copy it and paste it in our document, put it behind the Cog layers and, once again, change the blending options to Darken.

Adding Crane Photoshop Tutorial Sunflower

Now, open the Light bulb stock, position it here, then, create a new layer on top of Light bulb layer (Name it Light source), change its Blending options to Linear Dodge, pick a yellowish color (#bb9003), select a 100 px soft brush and brush it on the bulb.

Adding Light Source Photoshop Tutorial

Now, open the Valve stock, cut it out like this:

Valve Stock Cutout Photoshop Tutorial Sunflower

Put it in our document, resize it and position it there. Feel free to use Dodge/Burn tool.

Adding Second Cogwheel Photoshop Tutorial

Step 6 Atmosphere

Now this photo manipulation does not look that serious or grim. Time to change that. Go to Layer > New Adjustment Layer > Gradient map, choose black and white gradient map. Don’t change the settings.

Gradient Map Photoshop Tutorial Sunflower

Go to Layer > New Adjustment Layer > Photo filter and fill in these settings:

Photo Filter Photoshop Tutorial Sunflower

Now, open the Glass ball stock, cut out the ball and paste it in our document. Select Eraser tool (E), use 100 px soft brush to erase the edges of the ball and position it here:

Glass Ball Stock Photoshop Tutorial

Step 7 Final touch

Use Text tool (T) to strengthen your idea. That’s about it.

Finishing Touch Photoshop Tutorial Sunflower

Here you can download PSD file.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...