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: « 23 22 21 20 19 18 17 16 15 14 13 … 1 » Show All
There are 224 comments (+Add)
Pages: « 23 22 21 20 19 18 17 16 15 14 13 … 1 » Show All
Loading ...
174 kpss http://www.kpsskaynak.com
April 24th, 2009 at 6:00 am
Excellent item. Really gives me something to think about.
173 Nitin
April 22nd, 2009 at 1:46 am
I love photo flow and want to use it. Is it free to use for our website and if yes can I get it
172 Shopin
April 19th, 2009 at 1:32 am
I want PhotoFlow.
Thank you!
171 Jon Boyd Ann Arbor real estate buyer agent http://buyersagentannarbor.com/jonboyd
April 8th, 2009 at 2:15 pm
Very nice.
I wouldn’t have thought to do it this way but that looks perfect.
Thanks!
170 Albert
March 26th, 2009 at 10:16 am
saquen el photoflow !!!!! plz
169 ozan aydın http://www.touristbook.net
March 21st, 2009 at 1:44 pm
it’s perfect.good job.
168 papitoplay
March 21st, 2009 at 11:44 am
eso chulo
167 rahul
March 3rd, 2009 at 3:31 am
All I can say is overexposure to pure Awesomeness….!!! great tutorial…keep up the good work.
166 designcharmer
February 28th, 2009 at 12:06 am
Hey!! Man, WOW!! that’s a great tut there. You are a GOD of designing. I tried this ,got the component dragged it , modified the properties as you’ve showed here in the tut, but…… after publishing the images are not displyed. I can only see white , blank squares, I can flip them, though.
What the prob could be? I’m using Flash 8 version. Please reply on my e-mail id designcharmer@gmail.com .I need it very badly!!.
Thanks.
165 Marissa
February 18th, 2009 at 2:05 pm
I want PhotoFlow