Aug 16
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.
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.
2. Thumbnail grid
Collect some sample photos and create a thumbnail grid as shown below:
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.
3. Warp transform
Select the top layer grid and go to Edit > Transform > Warp. Now you should see the Warp transform grid:
Drag the four corner anchor points and the two middle vertical lines slight upward to create the bent effect.
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.
Set the top layer opacity to 30% and bottom layer to 50%. Then apply a gradient layer mask to the bottom layer.
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.
5. Flash
In Flash, create a new document exact same size as the Photoshop image. Copy & paste entire image in the first layer.
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.
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.
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.
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.
Talented People PhotoFlow Component Giveaways
Comments
Pages: 20 19 18 17 16 15 14 13 12 11 10 … 1 » Show All
There are 194 comments (+Add)
Pages: 20 19 18 17 16 15 14 13 12 11 10 … 1 » Show All
Post Your Comments
Loading ...
194 Mike http://www.comastore.com
October 31st, 2009 at 4:20 am
Amazing things. I want to learn this effect for so long.
193 Karla
October 15th, 2009 at 8:28 pm
Can someone help me with this gallery, i designed my site in flash, now i want to finish it by adding the gallery, it’s a portfolio site, but I don’t know how to use this. COULD SOMEONE PLEASE HELP
karlasudduth@stfrancis.edu
192 Les http://www.venusmanchester.co.uk
October 14th, 2009 at 8:38 am
Wicked version on photoflow mate, well done. Is there any chance of grabbing the the .fla file off you to learn how its done… Understandable if you cant.
Thanks
Les
191 Meshack
October 12th, 2009 at 10:27 pm
Thanks for the tutorial.
To AMY can u send me the PhotoFlow.
Here is my email: ssmeshack@gmail.com
Thanks.
-Meshack
190 Amy http://www.missamiebgraphics.com
October 5th, 2009 at 2:34 pm
if anyone needs the photoFlow…i have it so just send me an email and i will send it to you.
189 Schumann
October 4th, 2009 at 1:07 pm
I want PhotoFlow. Thx
188 Cyrus
September 21st, 2009 at 12:23 pm
Great , Mac Style PhotoFlip Gallery
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
187 bagsin http://handbagsurf.com
September 10th, 2009 at 7:28 pm
Greetings^^
186 Sunil
August 27th, 2009 at 7:11 am
Download Zip package……… there is some problem in zip file
185 nifhel
August 21st, 2009 at 5:00 pm
Very pretty but is it possible to put a link on each photo?
i search to modify the xml but i didn’t found anything
thanks