Aug 16

Tagged in: , Comments:Add

Mac Style PhotoFlip Gallery

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.

Delicious Stumbleupon Digg

Talented People PhotoFlow Component Giveaways

Comments

Pages: 19 18 17 16 15 14 13 12 11 10 91 » Show All

There are 182 comments (+Add)

  • 182 se-ya

    I want photoflow.

  • 181 liseli kizlar http://www.yandim.org

    thanks all photoshop good

  • 180 Ashely Adams : Sticker Printing http://www.psprint.com/

    If PhotoFlow is cool, your post was even cooler! Thanks. This is really useful and will please most of us who can’t seem to get enough of Mac’s PhotoFlow.

  • 179 Peter

    Hello,

    i found a fantastic Website for really cool Flash Mac Style Gallerys!!! On http://www.flashdevelopment.de you will see more, most of them are made in Papervision3D :)

    Greetings^^

  • 178 kpss http://www.kpsskaynak.com

    Great tutorial, perfect match for my current project…Thank You Buddy…:)

  • 177 tarım bağkuru http://sakizimu.blogspot.com

    really so pretty blog

  • 176 ales http://sakizimu.blogspot.com

    woow so good mannn

  • 175 kpss http://sakizimu.blogspot.com

    Excellent item. Really gives me something to think about…

  • 174 kpss http://www.kpsskaynak.com

    Excellent item. Really gives me something to think about.

  • 173 Nitin

    I love photo flow and want to use it. Is it free to use for our website and if yes can I get it

Pages: 19 18 17 16 15 14 13 12 11 10 91 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

advertisement

Back to top