Astahost.com   Mar 21, 2010
Open Discussion & Free Web Hosting > Computers & Tech > Designing > Graphics Design

Tutorial: Popout Image Effect

free web hosting
Open Discussion & Free Web Hosting > Computers & Tech > Designing > Graphics Design

Tutorial: Popout Image Effect

hazemmostafa
Hello everyone ,


Here in this post I will show you how to pop out or in another name break through an image to create a cool advertising like the ones you may see in movie posters or in games .

Let us name this project pop out car ,

The pop out car is my example here so lets start ,

here is the origional image - I do not own this image I got it by searching google for :intitle:car race -


and this is the result after the whole steps are done by me using photoshop cs successfully


Step one
“Now lets open photoshop - cs or any other version you own the steps used here will work for any version I usually like to use basic steps - and get the image enhanced as it should be
please take care of color correction and brightness and contrast and levels too - this is a preparing step you should do for every image you are going to use in any design project , If you are a graphic designer you must have these steps as basic -

Step two

“select a part of the origional image that will pop out for this image I used a marquee selction tool shaped in square , the keyboard shortcut is the letter M , When you want to work with the marquee selection tool just hit "M" and the mouse will change to a plus sign "+" this means you can now select a square shape
Cool I selected the right half of the image to pop out , note that this is the front of the car so I did not have much choices in my selection , In other cases like a fruit or a glass or .. etc you have some more choice to select your popout part of it from up or down right left whatever you like .


“Now create a layer via copy of this part , to do that you will have to go to layer menu and select Layer via copy from it , or you can use the shortcut Ctrl+J , this way you will have a new layer -above the origional image named background- as shown in this image


Step THREE
We need to clear the selected part taken before in the new layer -via copy-from the origional image but Photoshop will not allow you to delete from the Backgroud Layer and you also see this small lock to the right of this background name So what we have to do now is to release this lock automatically made by photoshop and to do that you will have to double click the origional image layer and a popup will show asking you to name this layer , Just hit enter or the ok button in this popup the name does not matter in this example anyway .,
Now you see the lock is gone and this is the way to unloack the background layer so now you can delete the pop out part you already selected before . And to get the selection back you will have to hit Ctrl button and left click on the Layer via Copy and the selection will be back again , now highlight the background layer - the one we started with - or whatever you name it and hit delete button or go to Edit menu and select clear .


Step Four
ok now using path tool - to get this tool you will have to click it from the tools menu the one to the left in photoshop or you can hit the shortcut key "P" , this tools has more than a mode to work with, I usually use free path mod with no masks but this is my way you can have it work for you any mode you prefere. - select the pop out part of the image (car) as a pre step to clear the back view of the car , - also you can use any other selection tool lasso magic lasso whatever suite the image you are working on , the reason I used path tool is that it works for any image no matter how it looks or colored also the path tool is the most accurate one in selection.



Step Five
Here you just selected the popout part of the race car ., what you are going to do now is to reverse the selection so the selected part which will be cleared is the back view not the pop out part of the race car and to do that you will have to go to Select menu and select Inverse or you may use the shortcut key for this option Ctrl+I .
Now the selection is reversed Delete the background leaving the popout part of the car isolated


here is what you looking for


Step Six
Add a white - or any color - background and type your own words in this example I typed need for speed and position it at the buttom of the image.


Note You may enhance this image as you like ofcourse , your type font,size,weight,words ,place
also the selection of the popout part may change the whole image


Try other ideas

Thank You

 

 

 


Comment/Reply (w/o sign-up)

shwaggy
Ok... This is just a copy pasted tutorial that I can almost guarantee that you did not right so Im going to have to call it spam.. I think you are just copy/pasting to get your point count up.

Comment/Reply (w/o sign-up)

Team Destiny 07
Umm this is off topic but umm......shwaggy don't talk about spamming to get poost count b/c u have 6 posts.........anyways Good Tut but i think the Inverse Shortcut is Shift+Control+I.

Comment/Reply (w/o sign-up)

Laurence
That's a cool tutorial. I'm going to try that sometime, I was wondering how to do something pop out like that. It would look cooler if the text was popping out as well.


Comment/Reply (w/o sign-up)

Ali Athar
who cares if it was copy paste or not it helped me, look at what i got done from it.

Comment/Reply (w/o sign-up)


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : popout, image, effect

  1. My Background Image
    My BG Image (7)
  2. Image Editing Question
    (2)
    I found a pretty looking HTML table on some site and I would like to adopt it for all table-related
    content that I'm publishing at work. The table looks like this: and the site where I found
    it is: http://music.download.com/brianregan/3600-...DL_FA_sm_artist I have most of the stuff
    figured out, but my only remaining problem is that these two image files: and have the text
    embedded in them. Is there a well-written tutorial on the Internet that I can go read and figure
    out on my own how to get rid of those texts ("Play all songs" and "Play") while preserv....
  3. Logo Trouble
    Image just shows an "x" (5)
    I am trying to put a simple logo on my page, nothing to shout about. I saved the image in my images
    folder in the cpanel. So when I was doing my HTML, I simply put this: CODE My problem is
    that my image doesn't show up. It shows a box where the logo is supposed to be with an "x" and
    it says The Gamers Attic Logo. Is it just a problem of my computer not loading the image, or am I
    doing something wrong? To see the page it is The Gamers Attic . Do others see the image, or just
    not me?....
  4. A Particular Royalty Free Image Required
    splat! (17)
    I want to go about designing a template from scratch for my blog, Splat! But, for that, I would
    like to have some royalty free images having just that: Splat! Preferebly a single coloured splat,
    and more specifically a black or blue coloured splat on a uniform background. It need to be a
    photograph - now that I think about it, it would be good if I had a digitally created splat. I
    tried searching for the image in various royalty free website, but could not find. I woudl be
    grateful if someone could search for such a image. I have been talking about getting a royalt....
  5. Gimp: Free Image Editing/Making Program
    Free Image Editing/Making Program (4)
    Did you ever hear of GIMP. mspaint is a squashed flee when this great hippo came in. It's packed
    full of features. Besides the simple common tools such as shrinking, cropping, filling,
    drawing.....This thing comes with gradients from the color to another color, or color to
    transparent, or a whole big list of random ones. It comes with all kinds of rendering stuff. It
    makes waves, engravings, carvings, stone look, magnifyed warped pic changer, clouds...It comes with
    Script X-fu...IT'S FREE! It's great! There are the simple tools on the side window...and
    there ....
  6. What Do You Think About This Image?
    (2)
    I was designing some new rims in 3D Studio Max and when I rendered the rims out to see how the
    chrome material looked I got this image. I think it looks awasome in the black enviroment with only
    the reflection of one of my photoshop designs in itm but hey that`s just me, what I want to know is
    what do you all think of it. Do you think it looks good too or I`m I the only one who thinks so?!! ....
  7. Creat A Cool Image In Photshop
    Some tutorials form me =) (3)
    I have move it to how-to and tutorials section under subforum- photoshop... =) Sorry for the wrong
    post......
  8. My Online Portfolio (image Heavy)
    Any advice for maintaining a portfolio? (18)
    Hey everyone. I introduced myself in the lobby forum but in case you didn't see that, my name
    is Noel Hill and I'm a fine arts student at the University of Southern Maine. Anyway, I'm in
    the process of building an online portfolio and I could use all the help I can get. Like I said,
    I'm a fine arts major, but despite this, my school wouldn't really know where to start when
    it comes to instruction and advice regarding my genre and how to go about gaining exposure with it.
    I'm primarily a conceptual designer and illustrator, which basically means t....
  9. Image Distortion When Importing Picture
    (1)
    I need some help here. I'm currently working on a Macromedia Flash project and am having
    difficulty preserving the image quality when importing pictures from Macromedia Fireworks into
    Flash. The images have a TRANSPARENT background and every time I load them into Flash, the colors
    have a lighter shade around the images. I don't want to: * make the transparent background into
    a specific (matching) solid color because 'cropping' the image out with a drop-down shadow
    is a pain Is there some kind of feature that I have to configure so that the colors don....
  10. Decent Transparent Images With Photoshop/image Rea
    (2)
    hey, was wondering if anyone here knows how to create decent transparent images with Adobe PS or
    image ready. So far it looks like I can only make an image that is max. 256 colors and even if I
    choose that all the colors are changed in my image and it looks "washed out." Also anyone can
    answer me a question... Isn't it sort of a catch 22 that if you want a transparent image to look
    decent you have to add a color matte to make it blend into a solid background, so what's the
    point of it being transparent when it only blends with solid backgrounds anyways? No matte....
  11. Image gallery script
    Which is the best one? (7)
    I want to put some images on my site using some image gallery script. Cpanel comes with a few. I
    tried 4images, it works Ok, but it doesn't create thumbnails automaticallly. Well it does, but
    you got go to admin page to create the thumbnails. What I'm looking for is a simple php gallery
    script which can generate thumbnails on the fly. Any suggestion?....
  12. Adding glitter to an image
    (4)
    Does anyone know how to add glitter to a gif image without using PSP or Adobe (If you can't
    tell, I refuse to download or pay for these programs /biggrin.gif" style="vertical-align:middle"
    emoid=":D" border="0" alt="biggrin.gif" /> )?....
  13. You need to make a quick change to an image?
    GIMPLite Quickies! (0)
    So, you have The GIMP installed on your computer, you need to make a quick change to an image for
    some project, but don't want to learn about computer graphics right now in order to get the
    image changed. Totally understandable. The GIMP is a powerful image manipulator with many options
    and tools. However, it is quick and somewhat intuitive (after a time) for the small jobs as well.
    Hopefully, these quickies will help you with your quick problem and help you to stay friends with
    The GIMP and ready for its more complex tools and methods later, when you have the tim....
  14. How to make image selection fade to transparency
    (3)
    Hi, I have Photoshop CS and I want to know how to make an image selection fade to transparency.
    Example, I select part of a photo, say a persons face, with the lasso select tool. I want to make
    the boundries of the lasso selected area fade to transparent in a gradient style. It seems very easy
    but I can't figure it out. Please advise thanks.....

    1. Looking for popout, image, effect



See Also,

*SIMILAR VIDEOS*
Searching Video's for popout, image, effect
advertisement




Tutorial: Popout Image Effect

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com



Creative Commons License