Response times, availability, and stability are vital factors to bear in mind when creating and maintaining a web application. If you’re concerned about your web pages’ speed or want to make sure you’re in tip-top shape before starting or launching a project, here’s a few useful, free tools to help you create and sustain high-performance web applications.

I’ve tried to include a wide variety of tools that are easy to use, and have tried to keep them as OS and technology-independent as possible so that everyone can find a tool or two.

1. YSlow for Firebug

YSlow grades a website’s performance based on the best practices for high performance web sites on the Yahoo! Developer Network. Each rule is given a letter grade (A through F) stating how you rank on certain aspects of front-end performance. It’s a simple tool for finding things you can work on such as reducing the number of HTTP request a web page makes, and compressing external JavaScript and CSS files. A worthwhile read is the Ajax performance analysis post on IBM developerWorks that outlines practical ways of using YSlow in your web applications.

2. Firebug

 

Firebug is an essential browser-based web development tool for debugging, testing, and analyzing web pages. It has a powerful set of utilities to help you understand and dissect what’s going on. One of the many notable features is the Net (network”) tab where you can inspect HTML, CSS, XHR, JS components.

3. Fiddler 2

Fiddler 2 is a browser-based HTTP debugging tool that helps you analyze incoming and outgoing traffic. It’s highly customizable and has countless of reporting and debugging features. Be sure to read the “Fiddler PowerToy - Part 2: HTTP Performance” guide on the MSDN which discusses functional uses of Fiddler including how to improve “first-visit” performance (i.e. unprimed cache), analyzing HTTP response headers, creating custom flags for potential performance problems and more.

4. Cuzillion

Cuzillion is a cool tool to help you see how page components interact with each other. The goal here is to help you quickly rapidly check, test, and modify web pages before you finalize the structure. It can give you clues on potential trouble-spots or points of improvements. Cuzillion was created by Steve Saunders, the ex-Chief Performance at Yahoo!, a leading engineer for the development of Yahoo’s performance best practices, and creator of YSlow.

5. mon.itor.us

monitor.us is a free web-based service that grants you a suite of tools for monitoring performance, availability, and traffic statistics. You can establish your website’s response time and set up alerts for when a service becomes unavailable. You can also set-up weekly, automated benchmarks to see if changes you’ve made impact speed and performance either positively or negatively.

6. IBM Page Detailer

The IBM Page Detailer is a straightforward tool for letting you visualize web components as they’re being downloaded. It latches onto your browser, so all you have to do is navigate to the desired site with the IBM Page Detailer open. Clicking on a web page component opens a window with the relevant details associated with it. Whenever an event occurs (such as a script being executed), the tool opens a window with information about the processes.

7. Httperf

Httperf is an open-source tool for measuring HTTP server performance running on Linux. It’s an effective tool for benchmarking and creating workload simulations to see if you can handle high-level traffic and still maintain stability. You can also use it to figure out the maximum capacity of your server, gradually increasing the number of requests you make to test its threshold.

8. Pylot

Pylot is an open-source performance and scalability testing tool. It uses HTTP load tests so that you can plan, benchmark, analyze and tweak performance. Pylot requires that you have Python installed on the server - but you don’t need to know the language, you use XML to create your testing scenarios.

9. PushToTest TestMaker

PushToTest TestMaker is a free, open-source platform for testing scalability and performance of applications. It has an intuitive graphical user interface with visual reporting and analytical tools. It has a Resource Monitor feature to help you see CPU, memory, and network utilization during testing. The reporting features let you generate graphs or export data into a spreadsheet application for record-keeping or further statistics analysis.

10. Wbox HTTP testing tool

Wbox is a simple, free HTTP testing software released under the GPL (v2). It supports Linux, Windows, and MacOS X systems. It works by making sequential requests at desired intervals for stress-testing. It has an HTTP compression command so that you can analyze data about your server’s file compression. If you’ve just set up a virtual domain, Wbox HTTP testing tool also comes with a command for you to test if everything’s in order before deployment.

11. WebLOAD

WebLOAD is an open-source, professional grade stress/load testing suite for web applications. WebLOAD allows testers to perform scripts for load testing using JavaScript. It can gather live data for monitoring, recording, and analysis purposes, using client-side data to analyze performance. It’s not just a performance tool – it comes with authoring and debugging features built in.

12. DBMonster

DBMonster is an open-source application to help you tune database structures and table indexes, as well as conduct tests to determine performance under high database load. It’ll help you see how well your database/s will scale by using automated generation of test data. It supports many databases such as MySQL, PostgreSQL, Oracle, MSSQL and (probably) any database that supports the JDBC driver.

13. OctaGate SiteTimer

The OctaGate SiteTimer is a simple utility for determining the time it takes to download everything on a web page. It gives you a visualization of the duration of each state during the download process (initial request, connection, start of download, and end of download).

14. Web Page Analyzer

The Web Page Analyzer is an extremely simple, web-based test to help you gain information on web page performance. It gives you data about the total number of HTTP requests, total page weight, your objects’ sizes, and more. It tries to estimate the download time of your web page on different internet connections and it also enumerates each page object for you. At the end, it provides you with an analysis and recommendation of the web page tested – use your own judgment in interpreting the information.

15. Site-Perf.com

Site-Perf.com is a free web-based service that gives you information about your site’s loading speed. With Site-Perf.com’s tool, you get real-time capturing of data. It can help you spot bottlenecks, find page errors, gather server data, and more - all without having to install an application or register for an account.

TAKEN FROM sixrevisions.com

A while back I wrote “Where to Go to Find Design Inspiration“, where I listed some of my favorite places to peruse when I’m looking for design inspiration. At the end, I posed the following question to the readers: “Where do you go for design inspiration?”, and asked that you contribute suggestions. This is a list of places that readers have recommended. Some I haven’t heard of, and several I’ve added to my own favorites list.

Without further ado – I present 16 sites that you visit for design inspiration.

1. The Best Designs

Suggested by: chandan (Digg profile)

 

I’ve written about The Best Designs before, so I didn’t list it down this time around. For those unfamiliar with the site, The Best Designs is a wonderful spot to view high-quality XHTML and Flash designs. They tag each design with relevant keywords (i.e. - Bold, Colorful, CSS) so you can narrow down your search to the particular look you’re attracted in.

2. CSS Remix

Suggested by: chandan (Digg profile)

CSS Remix is (according to their tag line): “A Fresh Blend of the Best-Designed Web 2.0 Sites”, though there are some non-Web 2.0 themed sites included as well. With over 14,000 RSS readers, CSS Remix is definitely a prime destination for designers looking to check out the work of other designers.

3. CSS Mania

Suggested by: Pat of Atrick Design

CSS Mania is a regularly updated CSS-based web design gallery that includes many design genres. At present, it has over 10,000+ websites in its collection. Though the reader who suggested CSS Mania frequents this site, he warns (and I agree): “They aren’t as particular about the quality of the designs they present, but there are definitely some gems in there.”

4. screenfluent

Suggested by: Damien

screenfluent is a site that features some very nice designs. What’s great about screenfluent is that it gives you a preview of the site by opening a modal window (more commonly known as a “lightbox”). There are over 7,000 featured designs so there’s not a lack of content to view.

5. Screenalicio.us

Suggested by: Sachleen Sandhu of tehkubix blog

Screenalicio.us has over 9,800 designs for you to see. The users have the capability of rating each design based on a 5-star rating system and the ability to give feedback for each entry. You can sort the designs based on ratings and time submitted.

6. Open Source Web Design

Suggested by: Sachleen Sandhu of tehkubix blog

Open Source Web Design is a community where users upload designs to share to the public. Downloading an OSWD design is free of charge. You can either browse their gallery of designs or download them to study.

7. One Page Love

Suggested by: adelle of Fuel Your Creativity

One Page Love is a niche web design showcase gallery that features beautiful, creative one page websites and applications. Some categories include products, portfolios, temp pages, and events.

8. FullSingle

Suggested by: adelle of Fuel Your Creativity

FullSingle is another site that displays single-page websites. The latest gallery entries are featured at the top of each page with a brief description of what the page is about.

9. One Page Folios

Suggested by: adelle of Fuel Your Creativity

If the above two weren’t niched enough for you, here’s one with even greater specificity. It’s an aggregate of single page portfolio websites of designers and developers. There’s over 800 portfolios currently listed on One Page Folios, and each entry is reviewed before being published.

10. We Love WP

Suggested by: adelle of Fuel Your Creativity

We Love WP shares top-notch WordPress powered sites. They also showcase free themes that designers have modified into something unique.

TAKEN FROM sixrevisions.com

You may have noticed that Google has a new favicon, the small icon you see in your browser next to the URL or in your bookmarks list. Some people have wondered why we changed our favicon — after all, we hadn’t in 8.5 years(!). The reason is that we wanted to develop a set of icons that would scale better to some new platforms like the iPhone and other mobile devices. So the new favicon is one of those, but we’ve also developed a group of logo-based icons that all hang together as a unified set. Here’s the full set:

The design process we went through was rigorous and interesting, so we thought we would share more of it here. We tried in total more than 300 permutations. It was much harder than we thought at first. We wanted something distinctive and noticeable, so we aimed toward transparency or semi-transparency, so the image would have a more distinctive noticeable shape than just a block. We wanted something that embraced the colorfulness of the logo, yet wouldn’t date itself. Since we don’t really have a symbol that means Google, we felt it best to work with the logo and letters within it. Our design team tried literally hundreds of approaches. You can see some of our explorations here.

By no means is the one you’re seeing our favicon final; it was a first step to a more
unified set of icons. However, we really value feedback from users and want to hear your ideas that we may have missed. If you have your own notions about the Google favicon, please send them to us. We’ll do our best to work them in, and maybe your idea will be the one that people see billions of times per day.

TAKEN FROM /googleblog.blogspot.com

Sometimes typography is all you need to communicate your ideas effectively. Graphics can support the type or type can support the graphics, but to deliver the message precisely, you need to make sure your type is expressive enough, your design is distinctive enough and the composition is strong enough. The results are sometimes crazy, sometimes artsy, sometimes beautiful, but often just different from things we’re used to. Thus designers explore new horizons and we explore new viewing perspectives which is what inspiration is all about.

This post showcases over 70 examples of sexy, bold and experimental typography. Some examples are typographic posters, some are typographic illustrations and some are just sketches with type. In any case, you will hopefully find some inspiration for your future works.

Feel free to check out our previous typography-related posts:

• Breathtaking Typographic Posters with over 50 typographic posters designed by artists across the globe. We feature Oriental, Iranian, Hebrew, Japanese, Chinese and Russian typographic posters as well as a number of further references,
• Typography In Motion presents some excellent examples of typography embedded into movies and videos,
• The Showcase of BIG Typography with over 35 examples of big, “loud” and yet elegant typography in web design.

So what can be achieved out of simple letters and symbols? Please be patient, some screenshots are huge.

Sweet and Cute Type

Sweet Sixteen
Typography with a sweet taste of sugar. A nice composition, an excellent execution. Sometimes not that much is needed to make the type look tasty. The typeface used below is Cutiful.

Dive Deep
Hand lettering by Ray Fenwick, cutting out by Dan Mogford.

Scarlett
An illustration created by Nik Ainley. Notice how well every single letter (e.g. “l” and “s”) fits in the composition.

Newstand Cover for Computer Arts issue 139
Alejandro Paul’s Affair typography from Argentina: typography dominates in the composition, the swirly headline is just breathtaking.

17.06.2007
Created by Michael van Laar using Freebooter Script.

Aphrodisiac Dessert
Dessert type for a dessert announcement.

FitzGerald Album (Extended Play)
Nothing can beat old-style-typography. Nothing.

Rally
Apparently, typography can be used for a number of purposes. Typographical Motorsports: simple yet interesting.

Tina Colada
It is worth a discussion if “overlettering” actually helps to deliver a message, but the type looks nicely. And the choice of colors is impressive.

More ink is coming
Impressive lettering by Ale Paul.

cim_organic
Sunny, flourish motif for a fresh typographic composition. Designed by Ryan Katrina.

Empire
The attention to detail is remarkable. Designed by Theo Aartsma.

Eichholtz

Arabic Typography

TAKEN FROM www.smashingmagazine.com

I’ve made it a goal to learn at least one useful thing each day so that I can stay sharp and well-versed on the topic of web development and design. To that end, here’s some of the websites I keep track of to find new techniques, resources, and news about building websites.

Most of these sites are updated frequently, so there’s never a lack of new content that fills up my Google Reader.

Because the role of the web developer is ever-expanding, I’ve also included a variety of sites that covers fields relating to web development - such information architecture, user interaction, and web/graphics design.

1. NETTUTS

NETTUTS is a recently launched blog/tutorial site that provides “spoonfed web skills“. There are already plenty of useful and detailed tutorials that range from offloading static content to Amazon S3 to creating a beautiful tabbed content area using jQuery. NETTUTS is perfect for developers just starting out, since the tutorials are very thorough and in a “step by step” format. For more advanced developers, it’s an excellent source of inspiration and learning new techniques.

 

2. woork

Woork is a blog by Antonio Lupetti, a developer from Italy. He provides short, easily-consumable tutorials on various topics of web development such as PHP, Cold Fusion, JavaScript, and CSS. His knack for creating beautiful tutorials, chock full of custom-made images that illustrates the concepts he talks about is a testament to the detail and “work” that Antonio puts in each of his posts. Check out his awesome tutorial on a “Top-Down approach to simplify your CSS code” where he explains his preference on creating and formatting stylesheets.

3. Web Designer Wall

Web Designer Wall is a blog by Nick La that features design ideas and elaborate, stunning tutorials such as creating a CSS gradient Text Effect - a technique that uses an image overlay over normal XHTML text, and jQuery tutorials for designers which showcases ten techniques to get you started with jQuery.

4. Smashing Magazine

I won’t say much about Smashing Magazine since most of us have probably heard of it, but if you haven’t, Smashing Magazine is an excellent resource for web designers and developers looking to be inspired. Smashing Magazine also manages to publish almost everyday, despite their very detailed and thorough posts.

5. Vitamin

Vitamin offers a large amount of information on the topic of web development and design. With many contributors, Vitamin manages to cover a wide range of topics including Ajax, CSS, development techniques, best practices, and workflow management.

6. Wake Up Later

Wake Up Later is the blog of Samuel Ryan, a freelance web developer/designer. Rather than covering specific web development techniques or providing tutorials, he talks about general web development related things such as reasons not to write your own code, tips on improving productivity, and common design mistakes made by developers.

7. Snook.ca

Snook.ca is run by Jonathan Snook, an icon in web development and design. His blog provides tutorials and articles about PHP, JavaScript, and more recently (the blog dates back to 2001), Adobe AIR. He also provides useful resources and bookmarks that are worth a read, and talks about things that are part of being a web developer such as project management via email and maintaining your personal brand online.

8. Signal vs. Noise

Signal vs. Noise is a design/usability company blog by the people over at 37 Signals - known for developing remarkable web applications such as BaseCamp and their involvement in the popular open source web application framework, Ruby On Rails. The blog gives insights about being a productive and effective web application developer and keeping things simple, with entries such as “Workaholics fixate on inconsequential details” and “Sleep deprivation is not a badge of honor“.

9. adaptive path blog

adaptive path’s company blog offers news and posts on the topic of user interface design. There’s a variety of useful posts that cover the topic of creating user-friendly designs (not limited to just web applications). Some things the adaptive path crew writes about are “Tips for presenting the look & feel to a client” and “The Lure of the Single Click“.

10. Tutorial Blog

Tutorial Blog provides handy tutorials, resources, and lists on various web development and design topics such as code snipplets for web designers, using layer comps in Photoshop to manage designs, and Flash tutorials. Tutorial Blog has a section on user-submitted tutorials which allows readers to share their own tutorials.

11. WebAppers

WebAppers is a blog created by Ray Cheung, a freelance web developer. The premise of WebAppers is to provide news and resources related to open source and free applications that are useful to web developers and designers. From cost-free fonts and icons to navigation menus and image galleries, WebAppers seeks to hunt down useful tools and applications aimed at reducing your time developing custom solutions.

TAKEN FROM sixrevisions.com

I’ve made it a goal to learn at least one useful thing each day so that I can stay sharp and well-versed on the topic of web development and design. To that end, here’s some of the websites I keep track of to find new techniques, resources, and news about building websites.

Most of these sites are updated frequently, so there’s never a lack of new content that fills up my Google Reader.

Because the role of the web developer is ever-expanding, I’ve also included a variety of sites that covers fields relating to web development - such information architecture, user interaction, and web/graphics design.

1. NETTUTS

NETTUTS is a recently launched blog/tutorial site that provides “spoonfed web skills“. There are already plenty of useful and detailed tutorials that range from offloading static content to Amazon S3 to creating a beautiful tabbed content area using jQuery. NETTUTS is perfect for developers just starting out, since the tutorials are very thorough and in a “step by step” format. For more advanced developers, it’s an excellent source of inspiration and learning new techniques.

 

2. woork

Woork is a blog by Antonio Lupetti, a developer from Italy. He provides short, easily-consumable tutorials on various topics of web development such as PHP, Cold Fusion, JavaScript, and CSS. His knack for creating beautiful tutorials, chock full of custom-made images that illustrates the concepts he talks about is a testament to the detail and “work” that Antonio puts in each of his posts. Check out his awesome tutorial on a “Top-Down approach to simplify your CSS code” where he explains his preference on creating and formatting stylesheets.

3. Web Designer Wall

Web Designer Wall is a blog by Nick La that features design ideas and elaborate, stunning tutorials such as creating a CSS gradient Text Effect - a technique that uses an image overlay over normal XHTML text, and jQuery tutorials for designers which showcases ten techniques to get you started with jQuery.

4. Smashing Magazine

I won’t say much about Smashing Magazine since most of us have probably heard of it, but if you haven’t, Smashing Magazine is an excellent resource for web designers and developers looking to be inspired. Smashing Magazine also manages to publish almost everyday, despite their very detailed and thorough posts.

5. Vitamin

Vitamin offers a large amount of information on the topic of web development and design. With many contributors, Vitamin manages to cover a wide range of topics including Ajax, CSS, development techniques, best practices, and workflow management.

6. Wake Up Later

Wake Up Later is the blog of Samuel Ryan, a freelance web developer/designer. Rather than covering specific web development techniques or providing tutorials, he talks about general web development related things such as reasons not to write your own code, tips on improving productivity, and common design mistakes made by developers.

7. Snook.ca

Snook.ca is run by Jonathan Snook, an icon in web development and design. His blog provides tutorials and articles about PHP, JavaScript, and more recently (the blog dates back to 2001), Adobe AIR. He also provides useful resources and bookmarks that are worth a read, and talks about things that are part of being a web developer such as project management via email and maintaining your personal brand online.

8. Signal vs. Noise

Signal vs. Noise is a design/usability company blog by the people over at 37 Signals - known for developing remarkable web applications such as BaseCamp and their involvement in the popular open source web application framework, Ruby On Rails. The blog gives insights about being a productive and effective web application developer and keeping things simple, with entries such as “Workaholics fixate on inconsequential details” and “Sleep deprivation is not a badge of honor“.

9. adaptive path blog

adaptive path’s company blog offers news and posts on the topic of user interface design. There’s a variety of useful posts that cover the topic of creating user-friendly designs (not limited to just web applications). Some things the adaptive path crew writes about are “Tips for presenting the look & feel to a client” and “The Lure of the Single Click“.

10. Tutorial Blog

Tutorial Blog provides handy tutorials, resources, and lists on various web development and design topics such as code snipplets for web designers, using layer comps in Photoshop to manage designs, and Flash tutorials. Tutorial Blog has a section on user-submitted tutorials which allows readers to share their own tutorials.

11. WebAppers

WebAppers is a blog created by Ray Cheung, a freelance web developer. The premise of WebAppers is to provide news and resources related to open source and free applications that are useful to web developers and designers. From cost-free fonts and icons to navigation menus and image galleries, WebAppers seeks to hunt down useful tools and applications aimed at reducing your time developing custom solutions.

12. Web Resources Depot

Web Resources Depot is similar to WebAppers - it discusses new web resources that web developers and designers may find helpful. Web Resources Depot is an excellent way to stay up to date with what’s currently available out there all in one place.

13. Ajaxian

With continual advancements in Ajax, it’s imperative to keep up to date with modern techniques and news. Ajaxian is the leading Ajax community run by some of the biggest names in the field. You’ll find information, reviews on JavaScript frameworks, helpful tools, and server-side technology specific (like PHP, RoR, and .NET) articles. If Ajax news and information is what you’re looking for, you can be sure to hear about it from Ajaxian.

14.DZone

DZone is a social news site for developers. Users share links related to development and can vote on submissions (very much like Digg but limited to developer links). You can subscribe via RSS to various pages and sections such JavaScript, Flash/Flex, or databases if you want to get instant updates to things specific to your interests.

15. Design Float

Design Float is social media site created for web and graphics designers. Like Dzone, people get to vote up submissions. You’ll find stuff about CSS, HTML, and Photoshop submitted to Design Float.

TAKEN FROM sixrevisions.com

Photography can make or break a website - got a great site with lame pictures, then you’ve got a lame website. Today we’re going to take a look at the ones that got it right…

---

Incase - Lovely close up photos of the products allow you to see the textures of them. Class

---

Nike - Every Nike website has great photography, I’ve chosen to showcase their Golf site here

---

Brook Pifer - Large quality photography is the main focus of Brook’s portfolio site, some really striking imagery

---

Stratocucine - Large crisp photos of the modernist kitchen designs makes this site

---

The Touch Agency - Nice Graphic design portfolio site, uses effective photography to display their work

---

Dirk Lambrechts - Great fashion and beauty photography portfolio from Dirk Lambrechts

---

Design House Stockholm - Makes use of high quality black and white photos for the background

---

Albert Oviedo - Some cracking photos in this Photography portfolio site

---

Georgiew - Photography portfolio

---

Andreas Burz - Another great photography portfolio

TAKEN FROM /tutorialblog.org

  

One of my favourite ‘looks’ is the sort of old-collage feel of old photos and old paper. It’s a favourite because it lets you work images and text together really easily. In this tutorial we’ll put together a poster where there is a main photograph and a lot of text using the old-collage feel.Step 1

This tutorial is based on a job I did a few days ago for a charity client who needed a poster to promote an upcoming event. They are a choir made up of homeless people called the Sydney Street Choir and it’s a pretty neat little organisation which you can learn about at www.sydneystreetchoir.com. The brief was to promote the event use this really nice photo (shown) of the choir down by the Sydney Harbour Bridge shot by John Marmaras and to include some written copy which I’ve shown below the image.

Unfortunately there is a lot of text to go on the poster and although this image is gorgeous, it is very busy, so using the photo as the background for the poster would present problems in getting all that text working over the top. I know this is a problem, because I spent an hour trying to make it work before deciding that I should try something else!

The Text…

www.sydneystreetchoir.com
SYDNEY STREET CHOIR
Performs With

Jonathon Welch
from THE CHOIR OF HARD KNOCKS

Mark Trevorrow
aka BOB DOWNE

Massed Choir of 110 People
Gabriel’s Big Band
Also Featuring Jeremy Brennan

Tuesday 27 Nov 2007 At 7:30PM
Northside Conference Centre
Cnr Oxley St & Pole Lane, Crows Nest
Tickets: $35
All Proceeds to Sydney Street Choir
Tickets Tel: 9439 7822

SYDNEY STREET CHOIR connects with, inspires and empowers, those who are living or working in homeless or disadvantaged communities, through creating music, performance and passionate expression, that truly opens people’s hearts.

Step 2

So if the photo-as-poster model isn’t going to work, then we need another look. I decided to put together what I call the old-collage feel. This is a good one to work with as it’s very easy to combine elements on a page since everything is meant to look a little messy anyway.

The first place we go is to iStockPhoto where I found these four images that I will use to put the poster together. You can purchase the four items from iStock by clicking these links: 1 2 3 4

Step 3

To begin with I used the starburst paper as background by pasting it into the background layer, pressing CTRL-T to rotate and resize it accordingly.

Next I placed the text on the page. I have used Univers Condensed for this poster. Because I knew there was going to be a lot of text, using a condensed font seemed like a good idea so that it’d be easier to get it all in. With the main heading “Sydney Street Choir” I tried a few permutations before deciding that Sydney wasn’t a particularly important word and by shrinking it down I could make “Street Choir” a lot larger and punchier.

After that I used a large soft brush and in a new layer painted black over the top right corner and around the bottom. I then set this layer to Overlay so that it would darken the paper but in an organic way. You can see the result in the following image and the painted areas in the image just below.

Step 4

Next I placed the photo on the stage and because I wanted it to look like something thrown down on a piece of paper I gave it a thick white border. I also added a faint drop shadow so that the photo looked to be interacting with the background. With this look your aim is to get the various pieces of the composition interacting with each other on the canvas. You can do this by overlapping, shadows, adjusting the lighting to match, adjusting colouring to match and so on.

Step 5

Next I wanted to add the paper on to the stage. Because all three items (the paper, the tape and the baggage tag) are isolated on white, it’s quite simple to cut them out. Just use the Magic Wand Tool (W) with a Tolerance set to about 32, then click in the white areas, holding SHIFT down so you can select them all. Then go to Select > Modify > Expand and use a value of 1px. This cuts out a thin border across the whole image and ensures there is no white on the edges. It’s a quick and dirty technique and if you wanted to cut something more complex then you might use a better extraction technique.

Once you have the white selection expanded, press SHIFT-CTRL-I to invert the selection and then you can hit CTRL-C to copy the image out and paste it into the main image.

Step 6

After pasting in the object I added a small drop shadow and moved the paper behind the photo layer (which I had settled in the bottom right corner so as to leave lots of room for text along the left).

Step 7

Now we start adding the text. In the image below all I have done is paste the text in and space it out a little with line breaks. This looks sort of OK, but is pretty boring with everything being uniform. It’d be much better if we worked on the type a little to give it some variation and highlight the more important parts.

Step 8

Here you can see I’ve changed the text so that the names of the main two performers are highlighted, the words ‘from’ and ‘aka’ are shrunk right back since they aren’t important and ‘the Choir of Hard Knocks’ and ‘Bob Downe’ are subtitles. The other three performers (who aren’t as well known) are also shrunk back and will be only really read if the person is really interested. We want people passing by to see the title (Sydney Street Choir) followed by the big acts (Welch and Trevorrow) and hopefully that will draw them close enough to read the rest.

Note also that the text is also set in Univers Condensed (in various weights) and the type sizes are relatively ordered. It’s important to have some consistency and continuity in your text, don’t just have a huge assortment of different sizes and weights and fonts or things can start to look a little chaotic. So the morale of the story is variation is good, too much variation is bad!

You’ll also see that I’ve pasted in a couple of extra photos (of the two main acts) and used the same Layer Style of drop shadow + thick white border on them - but have sized them down accordingly so that the white border didn’t overwhlem the photos. I’ve also transformed and rotated each so it all looks a little random.

Finaly there is also the “sydney street choir” logo which I was told late in the day needed to be on the poster (gotta love last minute client changes!). Now it’s going to be difficult to cut that logo out because it’s complex, but fortunately it’s black on a white background which means all we need to do is set it to “Multiply” and the white will blend away leaving the logo stamped on the paper.

Step 9

Next I pasted in one segment of the tape image from iStockPhoto and have arranged it to look like it’s holding the paper down. Then I’ve written the “Performs With” text over the top to turn it into a subtitle linking the headline and body copy.

I’ve also pasted in the venue details down the bottom and given the text some treatment to highlight and fade back various parts (as we did with the performer list). Unfortunately the text is getting lost down there and since the venue and time is pretty important we need to do something about that!

Step 10

So in a layer down the bottom just above the background I pasted in a dark brown rectangle as shown (just grab the selection tool, draw one in and fill it dark brown) and then set the layer blending mode to Multiply. This effectively makes the bottom much darker and now we can invert the text colour to a beige colour. In case you are wondering the beige colour was selected off the paper above it using the Eyedropper tool since it’s always nice to keep colours matching on the image.

Step 11

Finally I have pasted in the baggage tag up the top right corner and layered it in between the title text and photo, then pasted in that rather long paragraph of description text. And with that we’re complete! At this point to send it off to print we would switch off all the text layers (except the main title) and save as a TIFF file, then open up InDesign, create a new document and place the TIFF file in. Then we would copy in the text in InDesign to make sure it shows up nice and sharp in the final print out poster. But since this site doesn’t really deal in InDesign we won’t go too much into that, I’ve included it though as a few people mentioned this in the comments of the last tutorial

Final Thoughts

This tutorial is not so much about technique as it is about layout and composition. In this case it would have been difficult to make the poster work just by using the photo as a background, I had all of three hours to do the entire job (charity work!), and still wanted it to look nice. Thanks to cheap stock images it’s possible to very quickly put together a nice look that will stand out in the places this poster is going to get put up.

Sample PSD

This download is a tiny version of the file (it’s 300px wide) because all the photos are stock or licensed. However you should still be able to see roughly how the layers interact from this little version. As with all the downloads on the site, any photos are copyright their original owners, please don’t use or distribute them.

TAKEN FROM psdtuts.com

 First, let’s see what I used: a white textile (canvas or so) and not a paper. Why? Because I want the result to be realistic and not plane. Also, it’s important that the background surface should not be glossy.
Natural light plus a tungsten light (two of them would be even better) and fill flash. Because the flash might overexpose some ares of the photo (usually the central area), I use a diffuser made from a very transparent soft plastic or canvas piece.
Usually this kind of thing refers to macro shots, so you may want to shoot in macro mode or manual.

Now let’s see the tips:
1. Use a textile background that makes a few soft “natural waves”
2. Use one little colored piece in your white composition as a reference
3. Use lights from all sides to avoid big dark shadows
4. Use fill flash (better with diffuser on it) to naturally brighten up the scene and reveal the details
5. Use custom white balance to ensure real white
6. Only use matrix light metering
7. Do not overexpose the picture in the attempt of getting pure white
8. Use manual focus if the auto does not find the desired focus point
9. Do not completely remove the shadows - let the shapes be visible
10. Use a software to remove dark corners that may form

Sometimes, even if I use custom white balance, I still need to cool the picture a bit later. The whole task of photographing white objects on white background can be very difficult and require allot of practice. On the other hand, shooting in RAW format may let you change the exposure even after the shot was taken.

TAKEN FROM www.photoaxe.com

We are always in the search of great free resources, tips and tricks etc for our readers. Everyday, we works hard to find new resources and show them here for you. Today, we are starting another great section Discover The Best Of The Web on SmashingApps.com. In this we will find and make a list for the best of the web for the whole month. Maybe, we can not cover all of the best from around the web but we will try our best to cover as much as possible.

So, this is the first post to Discover The Best Of The Web for April 2008.

Design Tips, Tricks and Tutorial
””””””””””””””””””””””””””””””””””””””””””””””””””

Awesome Photorealistic Coloring Techniques
In this tutorial we will color a black and white photo using gradient maps, solid colors, and the “color” blending mode. Using these techniques, you will be able to hand color any black and white photo in a way that looks photorealistic.

16 awesome Aviary tutorials
This post presents 18 tutorials on how get started with Aviary. Aviary is a suite of web-based applications (RIAs) for people who create. From image editing to typography to music to 3D to video, we have a tool for artists of all genres.

63 Impressive Website Background-Images: Trends, Resources and Tutorials 
They have hand-picked background image resources and tutorials one can use to create amazing background images for the next website design.

Swirl Mania in Illustrator & Photoshop
In this tutorial he will show 4 ways to create swirls, and by mixing them you will learn some very powerful techniques that will allow you to easily make tons of different styles of swirls and crazy sperm vectors.

7 Principles of Effective Icon Design
If you want to create effective icon designs, then you should take a holistic approach to issues such as: audience, size, simplicity, lighting, perspective, and style. This article gives you a good starting place for creating icons that work well together and fit seamlessly within your designs.

Build a Sleek Portfolio Site from Scratch
In this tutorial they are going to take that PSD file and build it with some nice clean HTML and CSS.

Create Abstract Backgrounds
Abstract backgrounds are easy to create in Illustrator with a couple of simple techniques. Using Gradient Meshes, Steps Blends and Opacity Masks you can quickly create an abstract background.

Awesome HOT TIPS for YOUR WEBSITE in 2008
Fadtastic, have secretly been trawling the best websites and breaking down what’s good about them all. They’ve conveniently made a list of these unmissable golden nuggets of advice below. Use with caution - you don’t want to be too hard on your competition!

Artwork, Digital Photography and Inspiration
””””””””””””””””””””””””””””””””””””””””””””””””””

Packaging design inspiration
A beautiful and attractive packaging can boost the selling and stands out from the rack of competitors. In this article you will find some coool packaging deisgns to inspire yourself.

(Really) Stunning Pictures and Photos
In this post, you’ll find 50 brilliant photos and stunning pictures — some pictures tell stories, some are incredibly beautiful, some are funny and some are very sad.

Illustration Design Inspiration
Few really inspiring design illustrations from various designers.

Cool Web Characters Part 
I have compiled another list of Web Characters, thanks to all your suggestions and comments, I felt that there were so many more online,  

Propaganda Design & Aesthetics: Soviet Retro Posters
One of the great aesthetic legacies of the Soviet Union is the great wealth of magnificent propaganda posters it left behind. In this post, Lars Hasvoll  present some personal favorites.

30 Must See Comment Designs Showcase
This list shows 30 blogs where the web designer didnÆt just throw together the same old comment design and put extra effort into their comment design to make it fit with their blog design.

Best of Wallpapers Made in Russia
An amazing collectin of some impressive wallpapers designed by Russian designers.

Javascript and Ajax
””””””””””””””””””””””””””””””””””””””””””””””””””

Custom JavaScript Dialog Boxes
A lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success.

51+ Best of jQuery Tutorials and Examples
There’s stuff all over the Web about jQuery, but finding the best tutorials to get you started can be tough. Here are Examples and tutorials from jQuery masters to keep you on the right track.

Ajax Image Sliders Part 2: Intervals with On Demand
We want to make this look as if the slider is actually changing the image while we scroll it.

41 of the Best MooTools Ajax Example Downloads
A collection of MooTools examples that you can freely download and learn or use from.

xHTML and CSS
””””””””””””””””””””””””””””””””””””””””””””””””””

30 Exceptional CSS Techniques and Examples
In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more - all using only CSS and HTML.

Web to Print: Restyling Pages on the Fly with CSS
Matthew shared the experience he has gained writing a print stylesheet for Bits O’ NewMedia.

CSS do’s and dont’s Part 1: CSS Selecting
Css Globe is starting a series of lightweight articles named “CSS do’s and don’ts”. This series is aimed at pointing out some of the bad habits when it comes to css and web standards in general.

Using captcha without displaying it
Does the user have JavaScript enabled?
If yes, he’s ok. Let him comment.
No? He’s a suspect. Read him his rights and give him the ultimate “are you human?” test.

Miscellaneous Articles
””””””””””””””””””””””””””””””””””””””””””””””””””

All 120 Crayon Names, Color Codes and Fun Facts
Here we go down crayon color memory lane with all 120 color names and hex codes, fun facts and photos.

60+ Unusual WP Blog Designs
Tak a look at 60 Creatively unusual WordPress blog designs that are a little bit more distinctive from the regular WordPress Blog designs.

Incredible Firefox Keyboard Shortcuts Which You Probably Don’t Know About
Abhijeet came across some excellent keyboard shortcuts for Firefox which he is discuss here .

The Graphics Design Resume Guide
In this you will find everything you need to know regarding putting together a successful graphic design resume

42 Must-Bookmark Resources for Web Designers - Inspiration, Design, Color, Fonts and More
Design inspiration, CSS resources, web design guides, color tools, free fonts and more

12 Practical Ways for Freelance Designers to Increase Leads
There are plenty of different ways to find potential clients, and in this article we’ll take a look at 12 things you can do to increase the number of leads you receive.

Taken from http://www.smashingapps.com/