This Photoshop + Flash tutorial will show you how to design a cool photo gallery as seen on AppleTV website and in many Mac application (ie. iTune, iPhone). In fact, this tutorial is very easy to follow, all you need is some basic Photoshop and Flash skills. To complete this tutorial, you need Photoshop CS2+, Flash 8+, and a photoFlow component from Flashloaded.

View Demo PhotoFlip Gallery

Download Zip package

1. Gradient background

In Photoshop, create a new document, 950 x 620px. Select black foreground color and dark grey (#384b55) background. Use Gradient tool and drag from lower-middle to the bottom of the document.

step image 1

2. Thumbnail grid

Collect some sample photos and create a thumbnail grid as shown below:

step image 2

Then duplicate the thumbnail grid and apply flip vertical transform (Edit > Transform > Flip Vertical). We will need this duplicated grid to create the reflection effect.

step image 3

3. Warp transform

Select the top layer grid and go to Edit > Transform > Warp. Now you should see the Warp transform grid:

step image 4

Drag the four corner anchor points and the two middle vertical lines slight upward to create the bent effect.

step image 5

Repeat previous step for the reflected grid. While you are dragging the anchor points, try to keep the reflected grid align to the top layer.

step image 6

Set the top layer opacity to 30% and bottom layer to 50%. Then apply a gradient layer mask to the bottom layer.

step image 7

4. Glow

Make a oval selection and fill it with a sky blue color. Apply 50px Gaussian Blur (Filter > Blur > Gaussian Blur). Condense it a little so it looks like a spot light.

step image 8

5. Flash

In Flash, create a new document exact same size as the Photoshop image. Copy & paste entire image in the first layer.

step image 9

6. Flash component

If you have the photoFlow component installed, simply drag the component onto the stage. If you don’t have the component, get one from Flashloaded or enter our Free photoFlow Component Giveaways contest.

step image 10

Now open the Component Inspector palette and you will see all available parameters. Here you can customize the component setting such as: XML path, autoflip, image dimensions, reflection, zoom effects… For more information on how to use photoFlow, please read the user guide.

step image 11

6. Updating the gallery

Since the gallery is loaded from an external XML file, you can simply update the XML file to add or remove photos.

step image 12

PhotoFlow component used in this tutorial is provided by Flashloaded. To get a free copy for yourself, don’t forget to enter our Free photoFlow Component Giveaways contest.

263 Comments

1 11 12 13
  1. kilo aldirici
    Feb 17, 2011 @ 5:58 pm

    ignore weight

    Reply

  2. Daniel
    Feb 21, 2011 @ 1:07 pm

    That’s a great tutorial.
    Thanks for taking the time to share this.

    Reply

    • chard
      Mar 13, 2011 @ 1:22 am

      can u send the fla of that flash

      Reply

  3. Yared
    Feb 22, 2011 @ 4:14 pm

    Thanks..it´s very cool..really thanks

    Reply

  4. chard
    Mar 7, 2011 @ 11:55 pm

    hi…
    i see about this flash and it is really good.
    actually i need the FLA of this can u send it in my email atardskie_27@yahoo.com
    coz i want to insert it in my website

    Reply

  5. How To Put On A Condom | How To Get Taller
    Mar 17, 2011 @ 5:48 pm

    This Photoshop + Flash tutorial rocks!!!!

    Reply

  6. How To Get Taller | How To Put On A Condom
    Mar 17, 2011 @ 5:49 pm

    Always a pleasure reading your sophisticated-ly engineered articles.

    Reply

  7. Murlidhar
    Mar 30, 2011 @ 7:01 am

    can any body send me the source file

    Reply

  8. Foursseasonssvcs
    Apr 5, 2011 @ 4:42 am

    Make a bored visitor into a customer. Custom website we design will convey a strong image for your customers.

    Web Application Design

    Reply

  9. dexx
    Apr 17, 2011 @ 2:13 pm

    Another questionnaire, the participants’ problem identification and structuring, idea generation, problem elaboration and clarification, such as creativity, problem solving insertion sezkin idea which one’s preferred styles are evaluated. While participants preferred the style of non-disclosure and intellectual development of ADHD, with ADHD, participants chose to produce ideas.

    Reply

  10. buliu
    May 10, 2011 @ 6:40 am

    OH,it’s so helpful to me,and your blog is very good,I just couldnt leave your web site prior to saying that I definitely loved the quality facts you.You all do this kind of a great job at these Concepts… cannot tell you how significantly I, for one particular appreciate all you do!

    Reply

  11. Rudy James
    May 10, 2011 @ 12:41 pm

    Magnificent goods from you, man. I have understand your stuff previous to and you are just extremely fantastic. I really like what you’ve acquired here, certainly like what you’re stating and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I cant wait to read much more from you. This is actually a wonderful website. Kind regards, Rudy James

    Reply

    • Amit Sukapure
      Dec 21, 2011 @ 11:50 pm

      Hi,
      I understands the tutorial but upto photoshop part. I have added component as well in flash but now how to write xml for this? please help me.

      Reply

  12. Lino Harriman
    May 16, 2011 @ 4:04 am

    With havin so much written content do you ever run into any problems of plagorism or copyright violation? My site has a lot of exclusive content I’ve either created myself or outsourced but it appears a lot of it is popping it up all over the internet without my permission. Do you know any solutions to help prevent content from being stolen? I’d genuinely appreciate it.

    Reply

  13. Tina
    May 17, 2011 @ 4:13 am

    Hi, very nice design and still up to date !!

    I would like to use your gallery for my private website. can u send me the fash files (fla) pls, if u still have it.

    to tina030781@web.de

    have a nice day :)

    Reply

  14. Rock
    Jul 25, 2011 @ 2:34 pm

    WOW! I love this tutorial. I’m gonna go ahead and do this, can’t wait to see the final outcome.

    Reply

  15. Free Virtual World Games
    Sep 15, 2011 @ 1:42 am

    you may have an incredible blog here! would you prefer to make some invite posts on my weblog?

    Reply

  16. Raja
    Dec 30, 2011 @ 5:27 am

    hello, thanks alot for this tutorial !! Please i would like to know how did you create the thumbnail grid using multiple photos. did you use photoshop? I need to do the same type of grid. Id appreciate any advise. Thanks alot

    rajakhoury@gmail.com

    Reply

  17. Dewayne Etheredge
    Apr 4, 2012 @ 3:03 pm

    Hey not to set off topic but can anyone give me overview of. New York Car Insurance Reform 295 Greenwich St, New York, NY 10007 (646) 351-0824 They are down the block with me. I was wondering if they were a good insurance company. I need to acquire coverage, it is the law you know, but I have to have a good price price plus I want friendly service.

    Reply

  18. zayıflama
    May 2, 2012 @ 11:40 am

    These are very nice samples of designs. Your designs are very neat, clean and attractive. Great job done.

    Reply

  19. Mike
    Jul 21, 2012 @ 6:12 pm

    Wow – this is a great step-by-step. You really know how to use the products for great effect *sigh*. I love how you warp the image then apply the spotlight effect. I would never have come up with something like that. Any chance of getting hold of a few stem cells to give myself a cerebal upgrade? I’m only a man anyway so I have a decent excuse :) Well done and great work.

    Reply

  20. Alquiler yates Ibiza
    Aug 2, 2012 @ 2:03 pm

    My site has a lot of exclusive content I’ve either created myself or outsourced but it appears a lot of it is popping it up all over the internet without my permission. Do you know any solutions to help prevent content from being stolen?

    Reply

1 11 12 13

Leave a Reply