1. Gather your photo and place it in a new document.

The document in this demo is 350×350px.

2. Create the frame

Select the Rectangle Tool (U) and draw a box over the image, this will be the starting outside edge of the photograph.

With your new rectangle layer selected, turn it’s fill opacity down to 0%. The rectangle will disappear, but that’s OK. We are going to add some layer effects to it, which are not affected by the fill opacity. Double-click the layer to open the Layer Effects.

What we want is a 27px stroke, inside. Then a bit of a inner shadow is a nice touch.

3. Position and Trim Away Excess Image

Now that you have a frame on top, position the image underneath how you’d like it inside the frame. Then command-click the frame again to make it the active selection. Then click back to the main image layer and create a layer mask over it. For good measure, unlink the layer mask, select the layer mask, and Free Transform it. Hold down shift and drag the mask smaller a bit. This will prevent any image from leaking out beyond the frame.

4. Create Background

Because our frame and background are both white right now, it’s a little hard to see. Let’s give the background layer some pattern to make the photo stand out. Double-click the background layer to bring up the Layer Style. Choose pattern overlay and choose a texture.

5. Create Dimension Through Shape and Shadow

Let’s start off by altering our perfect-square shape and giving it a little warpage. Select the frame layer and Free Transform. Then right-click to bring up the contexual menu and select warp. Pulling in some of the interior egde points and maybe pulling down one of the corners will give the photo a bit more of a 3D effect.

Now create a new layer, above the background, but below everything else. Command-click the frame layer making an active selection of your new warped frame, but while still on your new blank layer, fill with black. Then go to Filter > Blur > Gaussian Blur and apply a few pixels worth of blur.

This shadow is pretty flat though, as is. We can Free Transform this as well, for more of a 3D look. First squish the whole thing down vertically a bit from the top. Then bring up the warp again, and bring in those interior edge points. Pull down a corner for an unbalanced realistic shadow. Then play with the opacity to make sure the shadow isn’t too intense.

6. Stack them up

At this point it would be a good idea to grab the three layers that make up the photo and group them into a folder. Now if you need to move it around, it’s much easier. It also makes it easier to duplicate the entire set, just drag the folder down onto the New Layer button.

Duplicate the set a few times, and rotate each one to create that stack effect. You may want to give each photo a slightly different warp and adjust the shadow a bit so each photo has its own slightly unique look.

A push pin up top completes the look!

Designing for the iPhone is like a hybrid of print and web design.

The web we all know is rife with uncertainty. We don’t know the viewer’s screen size or resolution, we don’t know the gamma of someone’s screen, we don’t know if they’ve got a certain typeface and/or exactly how that face renders on in their browser, we don’t know the browser they’re going to use, etc.

But paper, on the other hand, is full of controls. Fixed size, fixed faces, fixed colors. What you print is exactly what someone sees (assuming you’ve done your homework on color and paper, etc).

So the iPhone is a weird mix. It’s the web, and things can scroll, and the data is pulled from remote servers, but it’s also a fixed width, a fixed browser, fixed typefaces, etc. It’s pretty cool and a really refreshing design exercise.

It’s very true. Getting to design for the iPhone is just FUN. No worries about cross-browser testing, no worries about having to cater to outdated technologies. What you design is what you get!

Here are some resources to get you going with your iPhone design project.

Photoshop files

Free iPhone PSD file for icons / snapshots / whatever

iPhone GUI PSD

iPhone Interface PSD File

iPhone Icon Style .psd Kit

Official Apple Resources

iPhone Dev Center
Video: Introduction to the iPhone SDK (free registration required)
Graphics & Animation Coding How-To’s

Tutorials

Learn How To Develop For The iPhone

Designing for the iPhone (when you’re not holding one)

Create a Slick iPhone/Mobile Interface from any RSS Feed

Designing for iPhone (list of several websites with iPhone interfaces)

Ask E.T.: iPhone interface design (video included)

Practical eCommerce: Website Design for the iPhone

iPhone Icons

Designing for the iPhone (part 1) (favicon)

How to create a custom Apple iPhone icon for your Web site

How to create a Webclip iPhone Icon using Photoshop

Evolution of the Delivery Status Icon (very cool animation of its progress)

Useful code snippets

Detecting the iPhone with JavaScript:

<script type="text/javascript">
  if (navigator.userAgent.indexOf('iPhone') != -1) {
    {
      // Do something iPhone Specific!
    }
</script>

Set the iPhone viewport size:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Put that in your web pages head section. If you want to force a static width, change “device-width” to a specific size. The iPhone’s screen dimensions are 320 x 480px.

Scroll down to hide the menu bar on page load:

<script type="application/x-javascript">
	addEventListener('load', function() { setTimeout(hideAddressBar, 0); }, false);
	function hideAddressBar() { window.scrollTo(0, 1); }
</script>

For more iPhone news and application reviews, check out AppCraver.

What is the purpose of this Photo Gallery?

Are you a professional photographer needing to display your work and hook new clients? Are you just an amateur having fun? Are you primarily interested in the social community around photography?

Maybe photography itself has nothing to do with it. Maybe you need a photo gallery for your site because you are trying to sell your car and want to show people many different pictures of it. Or you are building a website for a broadway show and want to display photos of the stage, show, and cast. On an even more personal level, perhaps you are just looking for a place to upload photos so you can send your in-laws a slideshow of photos from your last vacation.

Knowing WHY you need a photo gallery and WHAT needs you have is important in choosing the technology behind your photo gallery.

Does it need to be on your own website? Or not necessarily?

Perhaps you already have a website and you want to create a subpage for a photo gallery. The Rick Wilcox Magic Theater has a page just for photos from their show and lives. This works nicely for them, as the page just needs to show off their magic show and get people interested in what they do. They don’t need the social aspects necessarily, but they do need the gallery to be a part of their own page.

If you are primarily interested in the social aspects of photo galleries, or are looking for the quick-and-easiest way to build a gallery, perhaps hosting the gallery on your own website isn’t the way to go. Hosting it yourself can isolate you and not yet as many potential viewers as you might if you were part of an already existing photo community. Photo sharing sites are also generally pretty easy to use and you can be up and running in no time.

What kind of functionality does it need?

Do your photos need to be licensed or protected? How many photos are you looking to be showing? How often do you expect to be updating? Do you want advanced functionality like commenting, tagging, or rating of photos?

Do you want fancy animations? Will you be showing thumbnails that link to larger images? Or will just the larger images do? Will this be a “photoblog”?

Do you have a preference for the technology it uses?

You might not care at all, it might mean the world to you. These days JavaScript and CSS is pretty much ubiquitous, so that is a safe route. Flash is another option. Are you going to be wanting an RSS feed for your gallery? Does it need to read from XML?

Sometimes other technologies can be leveraged in photo gallery software. PHP is pretty common, as a back end language and to do fancy things like automatically read from directories or create thumbnails.

How important is accessibility to this?

Using something like a pure Flash gallery might not be as accessible as you’d like for all users. Then again, if your site is purely a photo gallery, you may not need to be as concerned about catering to the visually impaired as you won’t have much content for them anyway.

Let’s take a look at some options!

Social Photo Sharing Sites

Flickr
You may have noticed all the random photos from this article are links to Flickr photos. Flickr is one of the largest photo sharing sites on the web and certainly has the most active and involved community. Signing up for Flickr is free (the also have Pro accounts). You can be up and running and have your own Flickr page in hardly any time at all.

Flickr is so loaded with features that it really stands out from the herd. Creative commons licensing, commenting/favoriting, organization, editing, video, geotagging, the list goes on. If you looking for a nice way to share a slideshow, you can link directly to a slideshow with Flickr. And just because your using Flickr, doesn’t mean you can’t embed these photos on your own site. Flickr has an open API, meaning that third parties can build cool tools that interface with Flickr. Take a look at this band’s photo page, which utilizes their Flickr account but embeds the photos directly onto their website.

SmugMug
SmugMug has some interesting features that Flickr doesn’t have. A pro account with SmugMug will allow you to take full design control over your gallery page. Not only choose from their templates, but literally full CSS control. Other major features include heightened security and backup, unlimited storage, API access, and having your galleries be as public or private as you’d like.

Photo Bucket - Free uploading, groups

Webshots

Snapfish

Dropshots

Picasa - from Google

PHP Solutions

Gallery - “Your Photos on Your Website”
Gallery is open source software that you can install on your own website (think “WordPress”). It runs on PHP. Lots of features here: commenting, user accounts with uploading, rss feeds, multi-language support, auto rotating, and of course, full customization.

Automatically Generate a Photo Gallery from a Directory of Images
Tutorial and free download on creating your own gallery. PHP does some of the heavy lifting by looking through a directory for you and building the gallery from that.

phpAlbum

phpGraphy

PHP Gallery

Easy PHP Photo Gallery

Coppermine Photo Gallery

Zenphoto
Another self-hosted and free PHP software package. All the features you would want, but very cleanly put together. Not a bloated mess (like “Gallery” can feel like sometimes). Easy to customize.

Flash Solutions

As amazing of things that JavaScript and CSS can do these days, Flash is still unequaled as far as the incredible visual sizzle it can pull off. There are some very important considerations to take into account when looking at Flash solutions for photo galleries though. The good ones will load in photos and content from an external file, often an .XML file. XML is easy to understand and update, so maintaining your photo gallery will be easy. Even if you are proficient in Flash, you really don’t want to be having to fire up Flash and altering the core project just to add new Photos.

Flash Gallery

FlashDen - Check out the Image Viewers Category on FlashDen. None of these are free, but with hundreds to choose from, you can probably find one that is nearly perfect for you.

SimpleViewer

JavaScript Solutions

Tutorial Blog has previously done a post on 12 JavaScript Image Galleries. Check that out for lots of awesome options!

Some highlights:

jqGalViewIII

SmoothGallery

Photoblogging

Photoblog

Fotolog

Fotothing

Other

Apple’s iPhoto + MobileMe
If you use a Mac and already use something like Apple’s iPhoto to import and organize your photos, their MobileMe service makes it about the easiest thing in the world to create publically viewable photo galleries. Simply select your album and go to Share > MobileMe and it will upload and create an album for you. Here is one I made in all of 10 seconds.

JS-Kit - If you are looking to add the social feature of commenting to a website, but want to do it with as little work as possible, check out JS-Kit. Just one-line of JavaScript and you have comments going on that page. Pretty incredible.

NextGEN Gallery - If you already use something like WordPress, there are a number of plugins available for creating photo galleries right within WordPress. Like this one…

SitePoint: How to Code HTML Emails

SitePoint: The Principles of Beautiful HTML Email

Think Vitamin: Ensuring your HTML emails look great and get delivered

Think Vitamin: HTML Emails - Taming the Beast

CSS-Tricks: Using CSS in HTML Emails: The Real Story

Email Standards Project

Nielsan Norman Group: Email Newsletter Usability
544 page PDF Report the subject. Probably chock-full of good stuff but it’s $400 bucks (or $700 if you wanna make a copy)

Campaign Monitor: A Guide to Using CSS in HTML Emails

Wikipedia: CAN-SPAM (Set of laws passed in 2003 that govern some specifics about mass emails)

Mayhem Studios: HTML Newsletters on a Mac

Smashing Magazine: Best Practices for Bulletproof Email Delivery

Free Templates

Mail Chimp: Free HTML Email Templates

Campaign Monitor: 30 Free HTML Email Templates

Spark List: Free HTML Newsletter Templates for Email Marketing

Screencast Tutorial

CSS-Tricks: Creating and Sending HTML Emails
Step-by-step walkthrough of how to create an HTML email that will look good and have a very high chance of looking correct in all email clients. Tables and inline styling!

Arguments Against HTML Email

George Dillon: 7 Reasons Why HTML Email is a Bad Thing
Not everybody things HTML emails are so hot.

HTML Email Isn’t Rich

Testing Your Designs

Premailer: Preflight for HTML Email

Litmus: Email Testing

Campaign Monitor: How to test HTML emails

Mail Chimp: Stupid HTML Email Design Mistakes

Contactology: Test your Email’s Spam Score

Email Reach

Services

Mail Chimp
Mail Chimp is the only one on this list I have directly used and I can vouch for them 100%. Reasonable prices, awesome user interface, and loaded with the features you’ll want.

Constant Contact

Campaign Monitor

Cake Mail
Cake Mail’s tagline is “White Label Email Marketing” meaning that with their service, you can sort of “brand” the backend of the software. You are able to create and send campaigns like all the other services, but you can also set up clients to be able to do it themselves and in essence become a reseller.

Plick

Without any CSS applied to a page at all, most browsers have default styling applied to this element, to help set it apart from other blocks of text. Firefox uses the following styling by default:

blockquote {
  display: block;
  margin: 1em 40px;
}

This is not consistent between browsers however, so most “CSS Resets” include reset styling to remove all of this. You should definitely consider adding some styling back in though, for your blockquotes. I like simple design, so let me share with you one of my favorite stylings for blockquotes:

blockquote	 {
  border-left: 30px solid #d9d9d9;
  padding-left: 10px;
  font-family: georgia, serif;
  font-style: italic;
}

This style just makes a healthy indent with a light gray block to the left. Simple and elegant:

There are, of course, many many ways to style blockquotes. From simple to elaborate, from big to small, from intense to subdued. Lots of things to consider. “Pull quotes” are blockquotes brethren. There is no special HTML element for pull quotes, but they are used in much the same manner, to set apart a block of text. The difference is that the pull quote is text taken from the very article being presented. This brings about different challenges.

Here is a list of resources out there for styling, handling, and otherwise dealing with blockquotes and pull quotes.

THE BASICS & SPECIFICATIONS

HTML Dog: Blockquote
W3C: Blockquote specs(along with the “q” element, blockquotes inline little brother)
Wikipedia: Blockquote
W3 Schools: Blockquote

Not much to know about the blockquote element, other than the optional attribute “cite”, which is the URI that that the quote came from. The cite attribute has no affect on the style or functionality of the blockquote.

ROUNDUPS

Block Quotes and Pull Quotes: Examples and Good Practices

Pull Quotes (23 examples)

Pattern Tap: Pull Quotes (There isn’t hardly anything in here yet, but Pattern Tap is the perfect place to start a collection for this kind of thing.)

SPECIFIC STYLING TUTORIALS

Swooshy Curly Quotes Without Images

Fonts.com: Pull Quotes

Sitepoint: Pull quotes that really pull!

HTML Dog: Pull Quotes

CSS Pull Quotes

Using IMG elements rather than background images in blockquote.

Rounded corners pull-quote using CSS

Better Blockquotes with CSS

Simple CSS Blockquotes and Pullquotes

Quick tip: Styling blockquotes with CSS

Playing with BLOCKQUOTE and CSS

USING JAVASCRIPT TUTORIALS

Automatic pullquotes with JavaScript and CSS

Better Pull Quotes: Don’t Repeat Markup

Easy jQuery Pull Quotes

Automatic Pull-quotes with Behavior and CSS

BLOGGING SPECIFIC TUTORIALS

Snazzy Pullquotes for Your Blog

Making a WordPress Pull Quote

WordPress Plugin: JavaScript Pull-Quotes

WordPress Plugin: Fancy Pull-quotes (v0.85)

SIDENOTES / FOOTNOTES

Footnotes with CSS and Javascript - the final word

Design and Code Your Own Poll

Below are a few links to tutorials which will help you create a poll on your site from scratch, no help from outside services involved. Since polls need to store data, you will need a database and some way to interact with that. PHP is a popular choice, but any web language that can interact with a DB will ultimately work.

W3 Schools: PHP and AJAX Poll Tutorial

CSS-Tricks: How to Design and Create a PHP Powered Poll

NETTUTS: Creating a Dynamic Poll with jQuery and PHP

DBScripts.net: Free PHP Poll Script, DRBPoll

ASP Poll

Polls specifically for blogs

If you are putting a poll on a blog, you maybe be able to use the already existing administration panels and Database to work for you.

WordPress plugin: WP-Polls

AddPoll.com (Works for MySpace and Blogger)

Web 2.0 Poll Services

These services are like social networking sites. They are designed to make it easy for you to create new polls, focusing on the fun social aspects of polls instead of all the technicalities of creating them. Then you can participate in others polls and leave comments, as well as “share” the polls on your blogs or other social networking sites.

Poll Daddy

Sodahead

Quibblo

Polls Boutique

Poll Authority

Have fun creating polls!