Firefox will eventually let users turn web apps into desktop apps

via Download Squad by Brad Linder on 12/30/08
Prism for Firefox

Web based apps are the new desktop apps. There are web apps for playing games, watching videos, listening to music, creating and editing office documents, and the list goes on. While I still prefer editing audio, video, and images using dedicated desktop tools, there are even web apps for that.

But sometimes if all you want to do is access your email account or an online image editor like Picnik, you don’t really need to fire up a full fledged web browser. A while back Mozilla created a project called Prism that lets you create a desktop shortcut that will open just a single page at a time in a stripped down version of Firefox. Now it looks like Mozilla is planning on integrating that feature with a future version of Firefox.

Here’s how it would work. When you visit a web-based application, you’d be able to click a button to turn it into a desktop app. This would create a desktop shortcut to the application and users would be able to open a window showing just that app. For certain applications, like the Flickr Uploader or Zoho Docs, Firefox might allow you to drag and drop files to upload or create file associations in your operating system so that every time you click on a Word document, for example, Zoho Docs would be opened instead of Microsoft Word.

Right now these features are still in the planning stages. But we could see them in future versions of Firefox. Of course, Google Chrome already has a similar feature which lets you create an application shortcut out of any web page with a click of a button using Google Gears.

EveryBlock tells you what’s happening everywhere (in 3 cities)

via Download Squad by Brad Linder on 1/23/08
EveryBlock

If you live in New York, Chicago, or San Fancisco, you have to check out EveryBlock. No really, you have no choice. It’s too cool to pass up. While there are plenty of services out there that aim to give you all the latest news, restaurant reviews, and other information about your community, EveryBlock does an awesome job of pulling together information from disparate sources to give you an overview of what’s happening in your neighborhood.

Type in your address, zip code, or neighborhood and EveryBlock will let you read business reviews, news articles, lost and found listings, crime reports, and Flickr images from your community. You can even find graffiti reports, building code violations, and restaurant inspection reports. Actually, come to think of it, EveryBlock might almost provide a bit too much information. The last thing we want is to find an excellent review of a local restaurant only to read on the next page that roaches were found in the kitchen. But if you’re not the ignorance is bliss sort, you should definitely take EveryBlock for a spin.

[via Waxy]

Web 2.0 Design Kit

Web 2.0 is a term coined by O’Reilly describing the new trends in design and development appearing across a flood of innovative websites. This tutorial will show you how to create some of the more popular “Web 2.0” design effects using Photoshop.

[originally posted on photoshoplab.com]

Gradients

The reflective or glass effect was first popularized by Apple. There have been many tutorials about creating Apple’s “Aqua Buttons” and this is a similar effect.

After making your selection, create a new Gradient Fill Layer Layer > New Fill Layer > Gradient... or use the Fill Layer button at the bottom of your Layers palette.

web201

Click on the Gradient to bring up the Gradient Editor. Select the “Foreground to Background” preset from the list of presets. Click on the first Stop on the left and set the Location to 50%. Then set the color to something a little darker than your base color. I’m going to use greys because it leaves me some flexibility for changing the color later.

web202

Create another Stop to the left of the gradient and set the Location to 49%. Set the color to something slighter darker than the 50% Stop. Create another Stop at Location 0% and make it slightly darker than the Stop at 49%.

web203

Press OK and you now have your gradient.

web204

To add some color, create a new Solid Color Fill Layer Layer > New Fill Layer > Solid Color... or, again, use the button at the bottom of the Layers palette and select a color for the gradient. Press Ctrl + Alt + G or Layer > Create Clipping Mask to create a clipping mask of your new layer. Scroll through the Layer Modes Shift + - until you find one that you like.

web205

web206

Reflections

Reflections have become a huge trend for website design lately. We’ll first start by selectin the Type Tool T and entering the type we want to reflect.

web207

Duplicate that text layer by pressing Ctrl + J. Drag the duplicated layer below your original in the Layers Palette. Right click on the duplicate layer in the palette and choose Rasterize Type.

web208

With the duplicate layer chosen in the Layers Palette, press Ctrl + T to bring up the Free Transform. Right click in the transform binding box and choose Flip Vertical. Drag your flipped layer so that the bottoms match.

web209

Add a Layer Mask by click on the button at the bottom of the Layers Palette or by going Layer > Layer Mask > Reveal All.

web2010

Press D to reset your colors and then press G to select the Gradient Tool. With the layer mask selected in the Layers Palette, which it should be already, drag from top-to-bottom with the Gradient Tool until you get the fade you desire.

web2011

You now have your type reflection. You can use the same method for any object also.

web2012

Soft Shadows

Another popular effect is the soft shadow. It’s actually more of a glow than a shadow, so we will approach creating the effect this way.

Select the layer of the object you want to add the shadow to, in my case it’s the gradient layer I created before, and click on the Add New Layer Style button (at the bottom of the Layers Palette) and choose Outer Glow.

web2013

Set the Blend Mode to Normal;
Color to Black or 000000;
Size to something like 8, and
Opacity to 35-40%.

web2014

You will now have a soft shadow that should look similar to this:

web2015

Star Shapes (Violators)

Another trend popping up is the star shapes or violator (thanks comment-er) for getting attention.

Click and hold on the Shape Tool until the sub-menu opens and choose the Polygon Tool.

web2016

Create a new Solid Color Fill Layer and choose whatever color you want your shape to be. Press D then Ctrl + Backspace to fill the layer mask with black.

Up in the Options Bar, click on the down-facing arrow to bring up your Shape Options. For my shape I checked the Star checkbox on and set the Indent Sides By to 20%. In the Options Bar I checked Anti-alias on and set the Sides to 20.

web2017

Now I’m ready to draw out my star:

web2018

web2019

To style it a little more, I used a Gradient Fill Layer instead of a solid color and I added a tight Drop Shadow Layer Style, settings: Opacity 60%, Distance 1px and Size 2px.

web2020

In the next installment of this 2-part series, I will show you how to create diagonal line patterns, rounded corners and some other Web 2.0 effects.

You can now read Web 2.0 Design Kit Part 2.

MASTER FILE DOWNLOAD
I’ve decided to make my master .PSD file for these tutorials available for download.
Download the Web 2.0 Design Kit Master PSD file (82.5kb ZIP).