Mac OS X comes with great and powerful tools pre-installed. The scenario is simple: you have coded your app and designed a great logo for it. How you create the OS X icon for your app? The answer is: very easily.

• First of all open the logo in illustrator if it is .eps file or in photoshop if it is in psd format.
• Save the image as .png after resizing to around 512×512 pixels.

• Open Icon Composer (it is in your Developer>Applications>Utilities folder in your Macintosh HD drive. Drag and drop the png file you saved in Icon Composer window and select “copy to all smaller sizes”

• Save the image, giving it the name you want.

• Open IconDroplet (it is available for free here). Drop the icon in IconDroplet (or choose File>Choose File.

• The output icon is placed in the same folder with the image you dropped in IconDroplet.
• Double click the icon and see it in your Dock like a running app.

Mozilla Prism is a project created by the Mozilla Foundation (Firefox and Thunderbird creators). Prism is dedicated to bridge Web apps with desktop apps. The project is based on Webrunner which moved to Mozilla code repository and took the name Prism.

The first thing you may think is that “We have already Microsoft Silverlight and Adobe AIR for that kind of stuff”. Thats true, but first of all Prism is open-source, which means that developers around the world can add features or help to the development and fix security issues. Secondly Prism is not aimed to replace the Web. Its just acts like a bridge (like a mirror) between web apps and your desktop. Lets use an an example to understand how Prism works. Assuming that Gmail is your favorite web app. Prism lets you split Gmail out of your browser window and run it directly from your desktop on its own window.

Prism is built on Firefox, so it supports rich internet technologies like HTML, JavaScript, CSS, and runs on Windows, Mac OS X, and Linux. The Mozilla team works on adding more features to Prism, like support for 3D graphic cards and offline data storage. Up to now though Prism is available only for Windows as it is in beta mode.

When the final version will be released, Prism will probably be integrated with Firefox and you will not even have to download and install it. A button in Firefox that will let you with one-click to add the web app you like on your desktop is also in plans. You can download the current beta version of Prism (Microsoft Windows version only) from here.

If that project succeeds, it will be a great step on improving the web experience and bring the web “everywhere”. Its big advantage agains Silverlight and Adobe AIR is that it can bring any web app in your desktop and not only the apps that are created using specific frameworks. As the project is open-source, you can participate in the development. Most info on that, here.

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 4500x4000px 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.

Few days before, I wrote a tutorial on how you can build a web 2.0 logo with Adobe Photoshop. Here is another one for adding the reflection effect in a logo (like mine above) using Illustrator, which makes the reflection more flexible and easy to scale and manage. Open your logo in Adobe Illustrator and follow these steps:

1. Duplicate your image by pressing alt (command for Mac) and clicking it. Drag it down (pressing the “shift” key while dragging helps for keeping your image aligned) so it looks like the one below.

   

2. Select the original object and click object>lock>selection to lock it.
3. Select the duplicated object and click object>transfrom>reflect. Choose horizontal with 0 angle. Move the duplicated logo exaclty below the original one.
4. Select the rectangle tool and draw a rectagle that covers the reflected image like in the screenshot below (color does not matter).

   

5. Fill the rectagle with a white-to-black gradient, set angle to -90 and point color points like in the screenshot.

   

6. Select the gradient rectangle and the reflected image by pressing control+A (command+A for Mac) as the original object is locked and apply a transparency mask by clicking on the arrow in the upper right of the Transparency tab.

   

   

7. Drop down the transparency opacity to 40-50% to make the effect more realistic and your reflection is ready!

   

Note that making the reflection with Adobe Illustrator has nothing to do with the background color (like in Photoshop). Follow the same steps for applying it on dark backgrounds.

There are many cases that you have to include large fotos in your site, but you do not want others to download them and use them. The easy way to protect your work is to write your name in front of the photo, so it cannot be used, but it does not look nice, does it? The more professional and nice-looking option is to build a watermark in your photos. Your work will look like the card from our store above. Let’s see how you can build this watermark with Adobe Photoshop (7 or later).

1. Open the photo that you want to put the watermark on and choose the custom shape tool.
2. From the option panel, choose the shape thumbnail and choose the Copyright symbol.
3. Create a new layer on top from the others and press d to choose black as the foreground color.
4. Draw the Copyright Symbol on your photo (with the custom shape tool) and place it where you want.
5. From Filter menu choose, Stylize>Emboss and apply the filter with Angle=135, Height=3 or 5 pixels and Amount=100% .
6. Click the lock transparent pixels in the layer palette.
7. Go to Filter>Blur>Gaussian Blur choose radius=3pixels and click ok to apply it.
8. Now choose the layer with the copyright symbol from the layer pallete and change the blending option from Normal to Hard light to make the watermark transparent (like above). Play with the opacity, so the watermark looks nice to your eyes.
9. Choose the Type tool, write what you want under the copyright logo and right click on the text layer>rasterize type.
10. Apply the same effects to the text layer (step 5 to 8)!

It is time to tell you something about what we use to create our products (like the cards from our Pet Shop Cards collection above). Our equipment consists of:

• Two Dell workstations powered with Intel Pentium D 3Ghz processors, 2GB RAM, running Windows XP Pro
• One Intel Core 2 Duo MacPro running Mac OS X with 8GB RAM
• One workstation equiped with a Pentium 4 Extreme Edition processor and 2GB of RAM running Windows XP Pro
• One G3 Mac with 512RAM running MacOS 8.1
• Our server which features a Pentium 4 processor, 2GB RAM, running SuSe Linux 10.2
• 2TB of total storage (multiple internal and external hard drives plugged to our systems).
• For printing we use an Epson Stylus Photo 800 inkjet printer, an HP Laserjet Plus laser printer, a Roland HifiJet 52 for quality CMYK printing (we use Light Magenta and Light Cyan colors as extra colors instead of the Orange and Green which are plotter’s selection). For digital printing, we use Xante Illumina.
• For scanning we use a Linotype Hell Topaz scanner, driven by Linocolor Software, running on the G3 Mac.
• For photocopier we use an Infotec which prints on any type of paper (A4, B3, A3 etc).
• All of our stuff is connected to an 100Mbit LAN via a 3com router and to the broadband Internet (we use a 2Mbit connection) via a Speedtouch 585.
• We also own a Wacom Intuos3 A4 Tablet.
• Our workstations have Eizo ColorEdge CE210W displays.
• For monitor callibration we use Pantone Huey.
• For color control we use Pantone Color Que 2.
• The software we run mainly is Adobe Photoshop, Adobe Illustrator, Corel Draw, Macromedia Dreamweaver, Macromedia Flash, Macromedia Fireworks, Quark Xpress, Adobe Acrobat and since January Adobe Indesign.