Reply to thread

Message: <blockquote data-quote="creativeN" data-source="post: 8523233" data-attributes="member: 224119">9.The Apple iPhone was one of the revolutionary devices of the new  millennium.  Apple’s overall brand recovery and rebuilding process has  been stunning, charging back onto the market after losing significant  market share to Microsoft, IBM and other technology giants during the  1990′s.  Part of the reason for Apple’s success has been excellent  advertising and branding. In this tutorial, you’ll learn how to design a tropical underwater  iPhone advertisement, complete with clownfish, starfish, and bubbles.   You’ll learn how to isolate a variety of stock images, using custom  brushes, extraction methods, and image manipulations.  You’ll also see  how to visually compose an image for maximum effect. Hopefully you enjoy the tutorial, and please, leave feedback so we can provide tutorials that you want to see.  Tools used: <ul> <li data-xf-list-type="ul">Photoshop</li> <li data-xf-list-type="ul">Stock Images</li> </ul>Final Image Preview: <a href="http://design.creativefan.com/files/2010/03/Final1.jpg" target="_blank"><img src="http://design.creativefan.com/files/2010/03/Final1-500x760.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a> Step 1: Document Setup and Background To start off this tutorial we will start by creating a new Photoshop  document; If you have Photoshop open already you can press ‘CTRL N’ on  the keyboard to do this. We will set our document at 2000*3000 with the  settings I have below. If your system is a tad slow you can obviously  change the resolution to something that would work better for you.  However you will want to keep it in the same height and width ratio. <img src="http://design.creativefan.com/files/2010/03/1.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Now that we have our document set up we can go ahead and start on the  background. To start off we will change the white background layer to a  darker color, black will work fine but you can play with it and choose a  dark blue or violet if you want. So once you have your color selected  we will press ‘G’ on the keyboard to bring up our fill tool and fill  this layer. Once the layer has been filled we can head over to Sxc to  grab a nice stock image which will become our background. The stock  image we will use is a underwater shot with some fish swimming around,  it can be found here: <a href="http://www.sxc.hu/browse.phtml?f=download&id=1214466" target="_blank">http://www.sxc.hu/browse.phtml?f=download&id=1214466</a> Once you have the stock we can grab it and drop it into our document. <img src="http://design.creativefan.com/files/2010/03/1-2.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Now we need to apply a Gaussian blur, this will help out by creating a  sense of depth in the image as well as just make it look better then  the dark fill layer from before or a phone pasted atop of a bland stock.  So to apply a Gaussian blur we will go to the filter drop down menu and  choose ‘Blur’ > ‘Gaussian blur’. Once you have done this a new  dialog box should appear showing your settings for the Gaussian blur. We  will use a semi small radius, something around 20-30 pixels; we are  using a smaller blur so we can retain some sense of the forms in the  stock, that way we will be able to see the shadows or blurs that look  like fish and such. <img src="http://design.creativefan.com/files/2010/03/1-3.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> One you have applied the blur and set the blending mode for the stock  image to screen your document should look similar to mine in the below  screen shot. <img src="http://design.creativefan.com/files/2010/03/1-4.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Now we need to darken our stock because it seems too bright for out  water stocks to stand out. We can do this by selecting a dark violet and  filling it the same way we did in the previous steps. So go to your  color platelet and choose the color I have selected in the below  screenshot. However this is another area you can play with, you can  change the color to a dark blur or a dark green for instance; just keep  in mind to keep it dark! <img src="http://design.creativefan.com/files/2010/03/1-5.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Once we have selected the dark color we can create a new layer above  the stock image; to create a new layer we will press ‘CTRL SHIFT N’.  Once we have a new layer created we can press ‘G’ on our keyboard to  grab the fill tool and just click anywhere on our document to fill this  layer. Once the layer has been filled we will set the opacity of our  layer to around 45-50% and set the blending mode to overlay. <img src="http://design.creativefan.com/files/2010/03/1-6.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Our document should now look something like the below screenshot, but  remember if you changed the colors around or the opacity your result  may look slightly different. That’s okay though just as long as you like  where you are at up until this point. <img src="http://design.creativefan.com/files/2010/03/1-7.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Step 2: Phone Isolation and Placement Now that we have created the background for our piece we can start to  fill the canvas up with various stock images, the first and most  important stock image is of course our stock of the Iphone.  So we will  go to <a href="http://www.brosscar.com/wp-content/uploads/2008/12/iphone.jpg" target="_blank">http://www.brosscar.com/wp-content/uploads/2008/12/iphone.jpg</a> and  get the stock of the phone, once you have it just paste it into your  document as we did with the background stock image. <img src="http://design.creativefan.com/files/2010/03/2.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Alright so now that we have our phone we need to begin the isolation  process. Since our phone is essentially just a rectangle the isolation  should be for the most part extremely simple. So to start off we will  press ‘W’ on our keyboard to grab the magic wand tool;  set your  tolerance to 25% and then just click the white that surrounds the phone <img src="http://design.creativefan.com/files/2010/03/2-1.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Once you have created a selection around the phone we can now apply a  layer mask, go to your layer toolbar and click the icon that looks like  a square with a circle in it, this is the “Layer Mask” tool.  It will  remove the selection but unlike deleting it, it will allow you to add it  back as you wish.  Once you have clicked that you will notice a  duplicate view of your layer in the layer toolbar, this one being in  black and white.  The white represents what you can see and the black  what will remain invisible.  We will be working on this layer for the  majority of the isolation process. Once you have clicked the layer mask  our phone should disappear leaving the white around it, we can fix this  by pressing ‘CTRL I’ on our keyboards to invert the current selection;  inverting the current selection will cause all of our black to become  white and vice versa. Your document should look similar to mine in the  below screenshot. <img src="http://design.creativefan.com/files/2010/03/2-2.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> You will notice that the shadow at the bottom of our phone has stayed  with the phone. Since we have a layer mask we can fix this pretty  easily. We will start off by pressing ‘E’  on the keyboard; this will  grab the eraser tool.  Once you have grabbed the eraser tool we can  right click on our document to setup the brush. We want to use a small  hard brush so we don’t erase anything we don’t mean to, however if you  do erase something by mistake don’t worry you can press ‘X’ on the  keyboard and repaint the section that was previously removed. Once the  brush dialog comes up just set your brush up as mine is in the below  screenshot, but remember if you changed the resolution in the beginning  you may want to go with a smaller brush. <img src="http://design.creativefan.com/files/2010/03/2-3.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Once your brush is setup just zoom in and clear all the ugly white stuff out at the bottom. <img src="http://design.creativefan.com/files/2010/03/2-3-1.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Now that the ugly white section is gone at the bottom we can clean up  the rest of our edges. To do this we will start off by pressing ‘M’ on  the keyboard; this will enable the marquee tool. Make sure your marquee  tool is set up to rectangle and has no feather before continuing. With  the marquee tool selected we can now make a rectangular selection going  down one side of the phone, once you have made that selection hold  ‘CTRL’ on the keyboard and make selections around the rest of the sides.  Keep in mind that our edges are smooth and not hard edges so we do not  want these selected. Also try and make sure your marquee selection just  barley goes inside the phone, we are just trying to create straight  edges and remove any odd things that might be there from the previous  steps. <img src="http://design.creativefan.com/files/2010/03/2-4.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Once you have a selection going all the way around the phone we can  press ‘DEL’ on the keyboard to delete everything we have selected. Your  phone should look similar to mine in the below screenshot. <img src="http://design.creativefan.com/files/2010/03/2-5.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Now that we have our phone isolated it’s time to place it, but it  seems way too big for our document so we will be free transforming it.  To enable the free transform tool we will press ‘CTRL SHIFT T’ on the  keyboard. Once you have pressed ‘CTRL SHIFT T’ a box should appear  around our phone, you will notice that this box has smaller boxes on  each of the sides as well as the corner. We will ignore all of this and  use the free transform toolbar at the top which has a space for us to  input the width and height as well as the angle. Set your height, width  and angle the same as mine in the below screenshot, but keep in mind  this is only if you have kept the original document size of 2000*3000. <img src="http://design.creativefan.com/files/2010/03/2-6.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Once we have free transformed our phone we are going to need to move  it and place it around the center of our document. To do this we will  press ‘V’ on the keyboard to grab the move tool and then just simply  move the phone until it appears as if it is in the middle of the  document. <img src="http://design.creativefan.com/files/2010/03/2-7.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Step 3:  Water Stock Manipulation So now that we have a phone isolated atop our underwater background  we need to place some water stocks around the phone to give the illusion  that the phone is underwater. So to start off this process e will head  back over to Sxc to grab a nice splash shot. The splash stock can be  found at <a href="http://www.sxc.hu/pic/l/2/26/26081992/1180590_78315975.jpg" target="_blank">http://www.sxc.hu/pic/l/2/26/26081992/1180590_78315975.jpg</a> Once we have the stock we will just paste it into our document below  the phone layer. But it looks strange since it’s at a different angle  than the phone. To fix this we will free transform our splash the same  way we did the phone in the previous step, however this time we will  just be adjusting the angle of the splash and not the size. So press  ‘CTRL SHIFT T’ on your keyboard and change the angle from 0% to   -13%.  Once you changed the angle you can press ‘ENTER’ on the keyboard to  apply the transformation; your document should look similar to mine  below. <img src="http://design.creativefan.com/files/2010/03/3.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Now we have a few options with how to deal with our water stock as  far as its isolation goes. We will be choosing to apply this layer as a  screen since the effect will be identical to if you meticulously  isolated it with a layer mask. So we will start off by pressing ‘CTRL  SHIFT U’ followed by ‘CTRL SHIFT L’; this will desaturate our image and  also auto level it. Once that is done we will change the blending mode  to screen, this will cause only the whites of our image to show. <img src="http://design.creativefan.com/files/2010/03/3-2.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> This looks good but we can still see parts of the glass. To remove  the glass we will press ‘E’ on the keyboard to grab the eraser tool;  with the eraser tool enabled you need to right click on the document and  set your brush up as I have mine in the below screenshot. <img src="http://design.creativefan.com/files/2010/03/3-3.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Now that we have our eraser set up we will start removing all the  visible pieces of the glass. All we are trying to keep is the splash at  the top as well as the water on the right hand side. So with our new  eraser selected we will just clear up all of the stock on the left hand  side and any that may have gotten down to the bottom. Your splash stock  should look similar to mine in the below screenshot. <img src="http://design.creativefan.com/files/2010/03/3-4.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> To continue our splash look we will head back over to Sxc and grab this stock <a href="http://www.sxc.hu/pic/l/d/dj/djeyewater/884260_47915322.jpg" target="_blank">http://www.sxc.hu/pic/l/d/dj/djeyewater/884260_47915322.jpg</a> This time we will keep the splash atop the phone layer and position  it so the tallest point of the splash is moving up the left side of the  phone. We will not free transform this stock but you will need to just  move it around so it looks like mine does in the below screenshot. To  move the splash around just press ‘V’  on the keyboard to grab the move  tool and click and drag the layer. <img src="http://design.creativefan.com/files/2010/03/3-5.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Despite the fact that our stock is primarily black and white its till  best to play it safe, so we will press ‘CTRL SHIFT U’ followed by ‘CTRL  SHIFT L’  on the keyboard once again as we have done with the previous  water stock. Now we can set the blending layer for this stock as a  screen just as before. Once you have done all of this your splash should  look similar to mine in the below screenshot. <img src="http://design.creativefan.com/files/2010/03/3-6.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Now we need to remove all the glass and splashes aside from the  splash that is moving up the left hand side and any of the tiny water  droplets that are flying off the glass, these will become our ‘Bubbles’.  To do this we will press ‘E’ on the keyboard as we have done before and  then right click on the document to set up our brush. This time since  there is so much of the stock that needs to be removed we will use a  larger softer brush rather than in previous steps. <img src="http://design.creativefan.com/files/2010/03/3-8.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Once you have erased everything but the tall splash on the side of  the phone your image should look similar to mine in the below  screenshot. However If you want you can leave some of the little bubble  shaped splashes that seem to be flying around on this stock, just be  sure you have erased all of the glass and the other main splashes that  cover the phone. <img src="http://design.creativefan.com/files/2010/03/3-9.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></blockquote>

Verification: Dawasata paya keeyak thibeda?

Top Bottom