Tutorial Blog » chriscoyier

Photoshop a Simple Stack of Photos

chriscoyier — Mon, 15 Sep 2008 17:00:08 +0000

Here we have a quick tutorial where we show you how to turn an image into a nice looking stack of pinned up photos.

(...)
Read the rest of Photoshop a Simple Stack of Photos (542 words)

Feed enhanced by Better Feed from Ozh

Photoshop a Simple Stack of Photos is a post from: Tutorial Blog

Designing for the iPhone: Resources

chriscoyier — Mon, 08 Sep 2008 13:33:32 +0000

37 Signals once said about designing for the iPhone:

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.

(...)
Read the rest of Designing for the iPhone: Resources (239 words)

Feed enhanced by Better Feed from Ozh

Designing for the iPhone: Resources is a post from: Tutorial Blog

So You Need A Photo Gallery Website?

chriscoyier — Tue, 02 Sep 2008 13:33:47 +0000

Photo galleries are a incredibly popular feature to add to a website. Depending on the purpose at hand, an entire website can even become a photo gallery. There are more image gallery software options than you can shake a stick at so no matter what type of pics you want to display, chances are the coding has already been done.

However, if you want to find the best photo gallery for your website, first you need to narrow down your choices. To do this, ask yourself a few questions.

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.

(...)
Read the rest of So You Need A Photo Gallery Website? (1,093 words)

Feed enhanced by Better Feed from Ozh

So You Need A Photo Gallery Website? is a post from: Tutorial Blog

Resources for Creating, Testing, and Sending HTML Emails

chriscoyier — Thu, 14 Aug 2008 01:00:46 +0000

Articles, Information, & Organizations

SitePoint: How to Code HTML Emails

SitePoint: The Principles of Beautiful HTML Email

(...)
Read the rest of Resources for Creating, Testing, and Sending HTML Emails (320 words)

Feed enhanced by Better Feed from Ozh

Resources for Creating, Testing, and Sending HTML Emails is a post from: Tutorial Blog

Resources for Styling Blockquotes

chriscoyier — Tue, 05 Aug 2008 17:55:37 +0000

Most websites, especially if they are blogs, will come across the need for a block quote at one time or another. That’s just the inter-linking good spirit of the web! Block quotes are a way to include text on a page that is directly taken from another website (or other source). HTML provides us with the perfect element for such a task, the

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:

(...)
Read the rest of Resources for Styling Blockquotes (405 words)

© chriscoyier for Tutorial Blog, 2008. | Permalink | 2 comments | Add to del.icio.us
Post tags:

Feed enhanced by Better Feed from Ozh

Resources for Styling Blockquotes is a post from: Tutorial Blog

Resources for Creating Polls

chriscoyier — Wed, 30 Jul 2008 14:52:24 +0000

Polls can be a great thing for any number of different websites. They get visitors engaged quickly and so long as they are quick, they are usually pretty fun to participate in. Especially if you can see the results right away. The more you get your audience thinking about and interacting with your site, the more memorable it will be for them.

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

(...)
Read the rest of Resources for Creating Polls (132 words)

Feed enhanced by Better Feed from Ozh

Resources for Creating Polls is a post from: Tutorial Blog

Eight Original “Advertise Here” 125×125 Graphics

chriscoyier — Tue, 22 Jul 2008 16:35:15 +0000

One of the most popular formats for online advertisements, especially amongst blogs, is the 125px by 125px square ad. Who knows why. Perhaps the size makes it easy to use in both narrow sidebars in a single column and wider sidebars as well in two columns. Whatever the reason, it’s popularity is nice for both designers as well as advertisers. Designers because we can design around this block size when creating new designs. Advertisers because having a unified size means having to create less “custom” sizes for each new place they advertise.

Perhaps the easiest way to sell these spots on your website is by filling the unsold spots with mock advertisements which are linked to a page in which potential new advertisers can get more information about buying the spot. These “Advertise Here” graphics should be catchy, but not too catchy as to overwhelm current advertisers. Due to the constrained space, trying to provide any other information other than “Advertise Here” is probably a bad idea. Perhaps you could fit in a price, but that might be considered tacky and I would avoid it.

Here is an example of a bad “Advertise Here” graphic:

Better to be brief in your graphic, and let the image that it links to do the talking.

Freebies

Below are some totally original, nicer “Advertise Here” graphics. Classy, fun, hip, grungy… Use them for whatever you would like. At the bottom there is a link to a ZIP file containing all the original Photoshop files, for you own alternations.

DOWNLOAD ALL EXAMPLES
(Photoshop files & PNG files included.)

Our cissp dumps and 352-001 mock test can provide you real success in ccde exam guaranteed.

Feed enhanced by Better Feed from Ozh

Eight Original “Advertise Here” 125×125 Graphics is a post from: Tutorial Blog

Create an Attractive Illustrated Table of Contents for the Web

chriscoyier — Mon, 14 Jul 2008 13:02:16 +0000

Longer articles/content on the web are well served by a Table of Contents. Like in a book, they increase usability by allowing readers to jump directly to specific sections, rather than laboriously scroll the entire article to find something. A typical Table of Contents rather boring, let’s spice it up a little bit with a little color and illustration!

Here is what we will build:

(...)
Read the rest of Create an Attractive Illustrated Table of Contents for the Web (687 words)

Feed enhanced by Better Feed from Ozh

Create an Attractive Illustrated Table of Contents for the Web is a post from: Tutorial Blog

Designing Your Page Around a jQuery UI Theme

chriscoyier — Mon, 07 Jul 2008 15:02:58 +0000

The release of jQuery UI 1.5 brought with it the Themeroller, which is a quick and easy way to customize and download a set of jQuery “widgets” for use on a web page.

Simply choose from one of the pre-built themes, or adjust the settings to your own liking and download the theme. Your download will include all the files necessary to for all these widgets to work, and a demo file with all of them on one page.

In fact, these pre-built theme could serve you well as a starting point for a new design. Let’s manipulate a theme download into a basic website using the Tabs and Accordian.

(...)
Read the rest of Designing Your Page Around a jQuery UI Theme (435 words)

Feed enhanced by Better Feed from Ozh

Designing Your Page Around a jQuery UI Theme is a post from: Tutorial Blog

Web Tip: Creating a Reusable “Button” Class

chriscoyier — Mon, 30 Jun 2008 23:39:00 +0000

Web pages are full of buttons. Navigation, links, “next” buttons, “submit” buttons, “OK” buttons, “close” buttons… the list goes on. When you go about designing a new web page, chances are its going to have a lot of buttons. Make life easier for yourself by creating a button class that you can reuse over and over in your HTML whenever you need a button.

Not only is this a favor to you, but it’s good for your users and aesthetics as well. Consistency is a key factor in usability. Let’s get started.

(...)
Read the rest of Web Tip: Creating a Reusable “Button” Class (804 words)

Feed enhanced by Better Feed from Ozh

Web Tip: Creating a Reusable “Button” Class is a post from: Tutorial Blog