On this guide you will learn how to create a Web Photo gallery (Flash or pure HTML) in 5 minutes using Adobe Bridge and Adobe Photoshop. No Flash knowledge is needed!

1. Create a folder on your computer and name it as you like (here you will store your final files that need to be uploaded to your web site).
2. Open Adobe Bridge and navigate to the folder that contains the pics you are going to use. Using control (for PCs) or command (for Macs) select the images you want.

   

3. Click on tools -> Create Metadata Template. Fill in the fields you want and click save.
4. After the Metadata info is saved, click on tools -> Photoshop -> Web Photo Gallery.
5. When Photoshop loads, an option window opens. Choose in the first field any style you like (in the demo I used Flash-Gallery 2), but there are many. Previews are shown on the right.
6. On the “use” field in source images select “Selected Images From Bridge”. Select “include all subfolders” if your photos are placed in many folders.
7. Fill the”destination” field with the folder you created in step 1.
8. In options tab, modify banner, colors and image sizes as you like.

   

9. In the security option tab you can write something that will appear over your pics, to inform visitors that they are copyrighted and to ensure that they will not be usable in case of copy.
10. After filling the option tabs click OK to create your Photo Gallery. If you want a soundtrack to play on the background, choose a .mp3 file, rename it as “useraudio”.mp3 and place it in the folder you created in step 1.
11. Upload the folder (yes the one you created in step 1 ) to your server, navigate there and enjoy!
12. If you want to check your gallery locally, open the index.html file.

Note that if you use audio soundtrack, it is preferable that the audio file will be small to ensure fast loading times. Click here to see the demo galley in action.

Here is a video edition of our Web 2.0 logo creation tutorial that you loved. Video is streamed via youtube as it is 8 mins long and would be hard for our bandwitch to have it stored in our host. The quality is not the best, but it will help you alongside with the original detailed post. Remeber to use XHTML validated code when embedding youtube videos in your site

Here is a second tutorial (here is the first one) for creating a Web 2.0 logo like the one above using Adobe Photoshop. Create a new Photoshop file (File>New). I made it in a 4500×4000px file with RGB color and 300dpi resolution, but you can do it in a smaller one.

1. Create the talk bubble shape using the custom shape tool (if you cannot see the shape in the dropdown menu from shape tool, click the arrow and choose talk bubble shapes). Double click your shape layer and apply Drop Shadow, Inner Shadow, Bevel and Emboss, Gradient Overlay and Stroke effects as shown in the screenshots below.

   

   

   

   

   

   

2. After applying the effects, right click on the shape layer and select duplicate layer. Click on the duplicated layer and click edit>transform>flip vertical. Place the flipped shape exaclty below the original one. This shape will be used as the reflection. Double click on the duplicated layer and disable drop shadow and bevel, emboss effect and stroke. Leave Inner Shadow effect as it is and choose the Gradient Overlay effect tab and apply the following settings in the gradient. Set the duplicated shape layer opacity to 30%.

   

   

3. Choose Type tool and type anything you like in the original shape. Double click the type layer and apply Drop Shadow, Inner Shadow, Bevel and Emboss, Gradient Overlay and Stroke as shown in the screenshots below.

   

   

   

   

   

4. If you want to create an “i” like the one in my logo choose the custom shape tool, choose symbols from the shape meny selections and place the “i” on your logo. Then apply the same effects as in step 3.
5. Create a new layer above all the others and select the eliptical marquee tool. Create an eclipse that covers half the original shape logo and half the duplicated one. Fill the eclipse with white color using the paint bucket tool and drop down the layer opacity to 20%.

   

Color codes are printed on the screenshots. Your logo is now ready

It is much easier to create a skype-looking logo than you imagine. Create a new file in Photoshop (File>New) and type anything you want using the type tool. Apply Bevel and Emboss, Color overlay and Stroke as you see them in the screenshots below and your logo is ready. Note that stroke size depends on image size, so put any px you need to have a result like mine (or something similar). Color codes are written in the screenshots.

Here are five shiny gradients to use for your web 2.0 designs. Note that colors used in these gradient are in RGB mode. The color codes are written in the screenshots. We used Adobe Photoshop CS3 to make the gradients, so if you use a different program, colors may be a little bit different due to the algorithm used by each program. The yellow gradient is the one we used for the beta logo in this post.

After the web 2.0 logo creation guide, here is a simple tutorial for adding effects in type layers and make them looking like logos. Open Adobe Photoshop, create a new document in CMYK format, type anything you like, select the type layer and apply drop shadow, inner shadow, outer glow, bevel and emboss (with contour), gradient overlay and stroke.

If you want something like the one below, istead of gradient overlay effect, apply pattern overlay effect as you see it in the following screenshot (the pattern we used here is from nature patterns of Adobe Photoshop).

You can download the .psd file that we created for the tutorial (it includes both images in different layers). The colors we used are written on the screenshots.

Here is an extensive tutorial on how you can create a great looking web 2.0 logo (like the one above that I created for the tutorial). Open Adobe Photoshop and create a new file (file>new): 4500×4000 pixels at 300dpi is a nice resolution to choose if you want your logo to be printable. It will be nice to choose this resolution also for this tutorial to have the same output with stroke points and other blending options that are affected by image size.

1. Choose the type tool and type anything you want in uppercase (I typed Typpz as you see :)). Duplicate the layer (right click on the type layer you created>duplicate layer).
2. Choose the new Type Copy layer (in my case Typpz Copy as I typed Typpz) and right click>blending options.
3. Apply Drop Shadow, Inner Glow, Bevel and Emboss (with Contour), Gradient Overlay and Stroke with the setting you see in the screenshots below.

1. Select the eliptical Marquee Tool and draw an eclipse like the one below. Create a new layer and fill the eclipse with white color (#ffffff) using the paint bucket tool. Set the opacity for the white filled eclipse layer to 30%.
   
2. Choose the Type layer (not the copy one that you were working on in steps 2-3) and click edit>tranform>flip vertical.
3. Using the move tool or your keybord bring the fliped layer exactly below the type copy layer, so letter ends are touching each other like in my logo and then right click on type layer>blending options and apply the setting for gradient overlay and stroke as you see them in the screenshots below. Set the layer opacity to 40%.

1. Now lets create the beta drop. Choose the type tool and select the Windings font. Type shift+s and then right click on this layer (its name should be “S”)>blending options and apply drop shadow, gradient overlay and stroke as you see them below.

1. Choose type tool and type beta (or anything you want) and place the layer inside the drop as in my logo. Change the text color to white (#ffffff).
2. Select the Type layer (the typpz layer for my tutorial-not the copy one!) and select layer>arrange>bring to front.

Your logo is now ready. Here you can download the .psd source file (lower resolution than the one I used for the tutorial because the default file was huge) to see the result and help you build something similar. The colors I used for the logo are printed on the screenshots. Here is the second part of Web 2.0 logo creation tutorials.

UPDATE: Video guide for this tutorial is available.

Here is an easy tutorial on how you can build a round button for your web site using adobe photoshop. Create a new file (File>New) at 72dpi, RGB mode and create a circle using the eclipse tool. Apply the following effects on the circle layer and your button is ready. We iclude the .psd file below so you can build your button upon ours. The light blue we used for the gradients and stroke is #27cef8.

Download the source .psd file. Your button after the steps above should look like this below

Create a new document (file>new) with 72dpi resolution. Create a rounded rectangle using the rounded rectangle tool and apply the layer effects as you see them in the images below:

The light blue I used for the gradient is #37caef. The final result should look like the button in the image below. Write any text you like on it and it is ready for use!

Recently the new version of Adobe Photoshop was released. One month ago, I atended a presentation for the new Creative Suite 3, organised by Anodos (Adobe’s distributor and reseller in Greece). Greece is the first country in the world, where CS3 was presented (because of local time). What made me the biggest impression of all the new versions, is the new Adobe Photoshop CS3. Photoshop comes now in two version: Standard (which is cheaper) and Extended (with more professional features). The shortcut icon has changed (as for all Abode-ex-Macromedia programs). Now it is minimal and with two letters pointing the program (PS for Photoshop, DW for Dreamweaver and so on). Back to Photoshop now: Extended version offers 3D and motion support and it intergrates with MATLAB, which means that it is ideal for 3D artists and scientists. The interface is a little bit different in Adobe Photoshop CS3. The toolbar is vertical with one column now, which maximises the workspace, but you can switch to classic view (two columns) if you do not like it.

The big improvement though are smart filters. From filter>Smart Filter menu you apply a smart filter and then any filter you want. Your smart object remain re-editable. Using Masks you can change the filter parameters and you can toggle it on or off.

If you are a photographer and you like panoramic views, you will find Photoshop CS3 extremely usefull. In CS2 panoramic photos were bad-looking. In CS3 with the auto-bend and auto-align layers selection your photos blend well and it even recognises if an object appears in two photos and blend it in the right way, so it does not appear twice in your panoramic view. Photoshop CS3 fixes the color too.

For black&white photo lovers, there is a great addition: A new color mode. Black&white mode has great results and now it is a piece of cake to convert colored fotos to black&white. In CS2 you should convert them to greyscale mode and fix the curves to have a fine result.

Magic Wand tool is much better too. It takes very little time now to select objects, even if they have lot of edges and the colors are not clear.

Adobe Bridge has also improved with multiple additions, like zoom or effects. Photoshop CS3 intergrates well with Flash and Dreamweaver (yes web designers, Flash CS3 opens .psd files correctly). An example of what I mean with “intergrate”: You are building a web page in Dreamweaver CS3 that contains a photo, but you change something on that image in Photoshop CS3; it will automatically be updated in Dreamweaver too!