photo shop cs wow book: August 2008

Saturday, August 16, 2008

Removing Items from Photographs (For Text)

Will Horizontal Layouts Return?

In the 90s, as the Web was just starting to take off, designers used horizontal layouts — rather in an experimental way, just to give users and designers an idea of what HTML was actually capable of. From the usability perspective it was horrible — sites were hard to scroll and the content was hard to read.

After horizontal approach has lost its novelty, it was quickly discarded and widely rejected. Surprisingly it seems to get back on track. The horizontal scroll is gaining forces and it's not that horrible this time. Why? Simply because we have a new generation of computer devices, such as mice with a 4-way scrolling wheel and widescreen monitors. We have a lot of space area and we have an efficent and user-friendly way to navigate horizontally.

By Edison Morais

After horizontal approach has lost its novelty, it was quickly discarded and widely rejected. Surprisingly it seems to get back on track. The horizontal scroll is gaining forces and it’s not that horrible this time. Why? Simply because we have a new generation of computer devices, such as mice with a 4-way scrolling wheel and widescreen monitors. We have a lot of space area and we have an efficent and user-friendly way to navigate horizontally.

Here are good examples of horizontal layout navigation used in modern web-applications.

A micro blogging platform Plurk displays plurks (posts) in a timeline view that makes it easier for users to relate the data to some specific time. Plurks (positioned horizontally) can be easily distinguished from comments (positioned vertically). You can navigate via keyboard arrows or using a usual mouse wheel: when you scroll vertically, the page will be scrolled horizontally.

PicLens, a popular Firefox plugin that offers a 3D experience for photos and videos, uses horizontal approach for the primary navigation. As the users scroll, images (displayed on a horizontal wall) flow in front of users’ eyes.

It seems that horizontal approach is currently used primarily for visualization purposes, but it can be used for “normal” designs too. Will we see this approach more often in the future? Can you imagine further situations in which you would use horizontal layout for your projects? Share your thoughts in the comments!

Horizontal layout trends
The Horizontal Way
A gallery of horizontal scrolling web-sites.
How to create a horizontally scrolling site
Tutorial by Chris Coyier.

About the author

Edison Morais is an insider Brazilian geek. Former SEO analyst, is researcher of new media, cyber culture and information, specifically how information is created, organized and distributed. He’s also a blogger. You can check more of his work on Conexoes.

Editor’s note

This post is one of the finalists of our guest author contest. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.

Ampersands With Attitude

Ampersands have long been the character in a typeface with which typographers can indulge themselves. Sweeping curves, flirtatious finishes and bold statements - these are the things that make ampersands an exciting character to use and, better still, to design.

Can you spot what typeface is used to display the ampersand in the image above? Large view

There are, however, two problems. The first is that the English language gives us few situations to use such a daring character. We seldom get to show off these beautiful examples of typography. The second is that the poor little ampersand so often goes unnoticed.

Allow me to share with you my top 10 different styles of ampersands. Some are similar, but each have their own personality. In an effort to limit my sample selection, I have only chosen ampersands from freely available sans fonts.

By Huw Wilkins

Can you spot what typeface is used to display the ampersand in the image above? Large view

1. Nilland

Nilland

Here we have a pretty run-of-the-mill ampersand. It comes from the font Nilland. You see this style in common fonts like Helvetica and Arial. It has the classic one piece figure-of-eight body. The little horizontal tail finishes this character off nicely, it seems to give a certain perkiness that it otherwise might have lacked.

2. Bitstream Vera Sans

Bitstream

You might recognise this style as well. This particular character comes from Bitstream Vera Sans. There are a few ways to look at this ampersand, and this is one of the reasons this character works so well. It looks like the ampersand above, only with the top right side of the figure-of-eight cut out (yet it actually ends up not looking very much like the above character). It also looks like a sweeping back-to-front 3 with a extension from the middle (you can see this better if you turn your head so your left ear is pressed against your shoulder).

3. BPmono

BPmono

This is where things start to get a little weird. Is it a ‘g’ gone wrong? Is it a swan? Is it a fishing hook? Actually it’s the ampersand from BPmono. I probably shouldn’t have likened it to a swan and a fish hook, because now you’re probably having a hard time seeing it for what it is… a sweet little ampersand with a cute tucked in style.

4. Kontrapunkt

Kontrapunkt

Here we have another style entirely. It’s an evolution of what you might see in handwriting. However, on paper the line would be drawn down the middle of the ‘E’ shape. This is the font Kontrapunkt, so it’s been given angles and a lovely boldness.

5. Diavlo

Diavlo

Diavlo is a great font with nice tips, and this character is no exception. At this size it looks like it has an oriental brush stroke style.

6. La Peruta FLF

LaPerutaFLF

Oh! I’m glad someone managed to prop up that eight before it fell over… wait let’s make that into an ampersand. LaPerutaFLF, with a name like that, you have to be cheeky.

7. Skia

Skia

Another more classical approach from Skia. The nice variation here is how the two halves intersect in that off-set way.

8. Tuffy

Tuffy

And. There’s no confusion here. It knows what it’s there to do and does it. Somehow, though, in this font it looks great. Nice one, Tuffy.

9. Lacuna

Lacuna

I’ve decided to finish off with two italicized ampersands. This one is from Lacuna and looks like some kind of crazy ‘e’. Somehow, with that cross bar and the horizontal plate at the end, it still ends up feeling like an ampersand.

10. Fontin

Fontin

And last, but certainly not least, here is the italicized ampersand from Fontin. It has a cheeky bulbous bottom and that classic plate finish.

So there we have it. 10 interesting takes on the ampersand. I hope you’ve been educated, I hope you have fallen in love with typography a little more, and I hope that next time you are creating a typeface you will be inspired to make an ampersand with attitude.

About the author

Huw Wilkins is the lead creative for a digital agency. He has a passion for user experience, usability, interfaces and good design. He also has a background in development. His little corner of the web is at huwshimi.com.

Message "Please insert Adobe ExtendScript Toolkit 2 to continue installation" when you install, reinstall or repair a CS3 Suite or CS3 application

When you install Adobe Creative Suite 3.0 the installer displays the message, "Please insert Adobe ExtendScript Toolkit 2 to continue installation." You are reinstalling Adobe Creative Suite 3 Production Premium or Master Collection after the initial installation failed. You are reinstalling Adobe Creative Suite 3 Production Premium or Master Collection after the initial installation failed.... Read More

Making a Logo: Dashed Lines and 3d Objects

Error "Installing Creative Suite 3 / Adobe Photoshop CS3 results in a conflict with Adobe Photoshop CS3"

Error "Installing Creative Suite 3 / Adobe Photoshop CS3 results in a conflict with Adobe Photoshop CS3"
When you install Adobe Creative Suite 3 or Adobe Photoshop CS3, the application returns one of the following error messages: "Installing Adobe Photoshop CS3 results in a conflict with Adobe Photoshop CS3" "Installing Creative Suite 3 results in a conflict with Adobe Photoshop CS3" Detail You previously installed the Photoshop CS3 public beta. This error occurs when you try to instal...

Design studio layout - Wordpress layout

Design studio layout - Wordpress layout
Create a professional design studio layout with easy and detailed instructions. Final PSD design is available for download.
Villanova University Six Sigma & IT Certificate Programs 100% Online programs in Six Sigma, IS Security, CISSP Prep, Business Analysis, Proj. Mgmt. and more!

Error "Installing Creative Suite 3 / Adobe Photoshop CS3 results in a conflict with Adobe Photoshop CS3"

Cameras supported by Camera Raw import filter (Photoshop Album 2.0)

Cameras supported by Camera Raw import filter (Photoshop Album 2.0)
Adobe Photoshop Album 2.0 can import raw image files from the following cameras. Photoshop Album can't import raw image files from cameras not listed below. Canon Fujifilm Minolta Nikon Olympus EOS-10D EOS-1D EOS-1Ds EOS-D30 EOS-D60 PowerShot 600...

Photoshop CS3 10.0.1 update printing notes

With Adobe Photoshop CS3, Adobe made a significant effort to improve the printing experience for our users. A number of issues have come to our attention since Photoshop CS3 shipped, and the 10.0.1 update addresses several of those�issues. The attached PDF document�contains information and instructions specific to the printing issues fixed in the 10.0.1 update. The�PDF document�contains installation instructions for... Read More

Sunday, August 10, 2008

Vector drawing techniques in Photoshop

Vector drawing techniques in Photoshop
In this excerpt from Adobe Photoshop CS3 Classroom in a Book, learn some advanced uses of vector shapes and vector masks in Photoshop CS3.

Photoshop CS3 doesn't open or error occurs, when you Edit in Photoshop CS3 from Photoshop Lightroom 2

Photoshop CS3 doesn't open or error occurs, when you Edit in Photoshop CS3 from Photoshop Lightroom 2
...

Error "Installing Creative Suite 3 / Adobe Photoshop CS3 results in a conflict with Adobe Photoshop CS3"

Apply metadata, keywords, and presets as you import images

Apply metadata, keywords, and presets as you import images
Learn how to apply metadata, keywords, and presets to your images as you import them into Photoshop Lightroom.

No Camera Raw features in Bridge CS3 when installed with Photoshop Elements 6 (Mac OS)

You do not see any Adobe Camera Raw features in Adobe Bridge CS3 on Mac OS. Details Open In Camera Raw does not appear in the File menu or shortcut menus, and nothing happens when you press this command's keyboard shortcut, Command+R. Develop Settings does not appear in the Edit menu or shortcut menus. Camera Raw Preferences does not appear in the Bridge CS3 menu. When you open a camera raw file, the Camera Ra... Read More

Adobe Creative Suite 3 application installer closes with error code 2739 (Windows Vista)

Adobe Creative Suite 3 application installer closes with error code 2739 in Windows Vista

Adobe Creative Suite 3 application installer closes with error code 2739 in Windows Vista
When you install Adobe Creative Suite 3 or a stand-alone Creative Suite 3 application in Windows Vista, one or more of the following occur:After you launch the Setup.exe file, the application returns the error message, "This software cannot be installed ...

Remove redeye with Photoshop Lightroom

Remove redeye with Photoshop Lightroom
Remove redeye quickly and easily with the Redeye Removal tool in Photoshop Lightroom.

Adobe Creative Suite 3 application installer closes with error code 2739 (Windows Vista)

Adobe Creative Suite 3 application installer closes with error code 2739 (Windows Vista)
...

ConnAPI.dll error message when you start your computer (Photoshop Elements 6)

ConnAPI.dll error message when you start your computer (Photoshop Elements 6)
When you start Windows or when you start Adobe Photoshop Elements 6 on Windows, you receive an error message: apdproxy.exe: Unable to locate component.� This application failed to start because ConnAPI.dll was not found....

Color management workflow in After Effects

Color management workflow in After Effects
Learn how to manage color in high-definition video, cinema, and web video projects using After Effects CS3 and Photoshop CS3.

Optimum strategies for using Adobe Photoshop CS3 Extended in biomedical imaging

Discover how Photoshop CS3 Extended offers the highest quality imaging toolset and broadest range of digital imaging capabilities specifically for physicians and biomedical professionals. Read More

Create a web gallery in minutes using Photoshop Lightroom

Create a web gallery in minutes using Photoshop Lightroom
Get an edge up on the competition by being fast. In this short video tutorial, see just how quickly you can get your photos up on the web in a web gallery.

Error occurs and you cannot open files that are saved to a server (Photoshop CS3 on Mac OS X v. 10.5.3)

Crash when you run Web Photo Gallery on Mac OS X v10.5 (Photoshop CS2, Photoshop Elements 4)

Presentation possibilities in the Slideshow module, part 1: Preparing and selecting your photos

In this first part of a three-part series on creating slideshows, get an in-depth look at the Slideshow module in Photoshop Lightroom. Read More

Blending modes

Sometimes finding a great background photo and pasting something beautiful on it isn't enough. Both photos should blend in as if they were one photo. The colors should match, the mood should match. In... Read More

Adobe Creative Suite 3 application installer closes with error code 2739 (Windows Vista)

Letting an image edit itself

Bruce Fraser and David Blatner share their secrets for simplifying tonal adjustments in Photoshop. Read More

RSS Button Variations

Design Showcase Of Creative Online-Shops

Times when online-shops were boring and unattractive are over. To attract customers' attention designers tend to design online-shops according to the atmosphere it has to create. An online-store in which retro-products are offered is designed in a retro-look. And shops which are aiming to attract young customers are designed in vibrant colors and modern style. Furthermore, interactive browsing through the store, implemented with Flash and JavaScript, gains on popularity as well.

This post showcases 45 examples of creative and unusual designs of online-stores. Being creative doesn't necessarily mean that the designs are successful since unconventional approaches often increase the time users need to climb the learning curve and figure out how they can achieve their goals. Still, how can you present your products in a distinctive way and how to design a truly unique online-store? Let's find out.

Please notice: we don't know if creative design approaches result in better sales. This post is supposed to provide you with some interesting ideas and approaches which you can use in your future projects, not with recommendations for the most effective online-store-designs.

Times when online-shops were boring and unattractive are over. To attract customers’ attention designers tend to design online-shops according to the atmosphere it has to create. An online-store in which retro-products are offered is designed in a retro-look. And shops which are aiming to attract young customers are designed in vibrant colors and modern style. Furthermore, interactive browsing through the store, implemented with Flash and JavaScript, gains on popularity as well.

This post showcases 45 examples of creative and unusual designs of online-stores. Being creative doesn’t necessarily mean that the designs are successful since unconventional approaches often increase the time users need to climb the learning curve and figure out how they can achieve their goals. Still, how can you present your products in a distinctive way and how to design a truly unique online-store? Let’s find out.

Trendy design elements such as wood background, textures, handwriting, collage and grunge are quite popular. Reflections, shadows and similar elements from the times of vivid Web 2.0 are used rarely; however, designers of t-shirt- and children’s cloth-stores seem to have a different opinion on that matter for some reason. Disclaimer: we are not related to any of the stores presented below.

Please notice: we don’t know if creative design approaches result in better sales. This post is supposed to provide you with some interesting ideas and approaches which you can use in your future projects, not with recommendations for the most effective online-store-designs.

Showcase Of Creative Online-Shops

ShopComposition
ShopComposition uses a sliding navigation at the top of the site. Users can choose the content they would like to read. This store has an integrated blog and some further projects (such as picture-a-day) to attract customer’s attention. JavaScript in use.

Feel the Power
Actually, Feel the Power sells t-shirts and underwear — just like thousands of other online-stores out there. However, the site is completely Flash-based and offers its visitors a beautiful and attractive navigation via an animated wheel. One click opens a large preview of the selected product. Although Flash is used, the navigation is extremely easy and simple. Apparently, music in the background is supposed to create a good mood.

Yellowood
If a company produces Yellowood wood decks, then it probably should have a yellow design with wood in the background, right?

uShops
uShops welcomes its visitors with a price tag which is supposed to communicate the idea of the site — the online marketplace to buy and sell stuff.

Free People
This store aims at female teenagers. In such stores handwriting and vivid imagery are common.

Nerve
Nerve is an Ajax-based music store with vibrant colors, nifty JavaScript-effects and beuatiful hover effects. Nice and memorable design.

Bisley Perfect Order
This store is partly Flash-based and is designed in a retro-look. The main page is right-aligned for some reason. On the left there is a wood background with a coin.

Klassiker in Acryl

Simple Treasures

Habitat Shoes
Habitat Shoes sells shoes. However, it first sets up the perfect atmosphere for the store and offers its visitors to select one of the illustrations which stand for the different accessoires in the store.

ShoeGuru
ShoeGuru places its products in the middle of the page and uses horizontal scrolling for navigation. Notice that only the product is presented to the visitors — and nothing else.

Accentuate Clothing

Cosmicsoda
Cosmic Soda sells t-shirts and uses distinctive design decisions to attract its target group. The search box and newsletter box are somehow crooked, there are dozens of dashed lines, blue illustrations and a paper sheet background.

Etsy
Among dozes of distinctive features Etsy has an appealing navigation menu with icons and vibrant illustrations. The creative approach of the design is hidden in its functionality. For instance, it is possible to sort and filter products by colors. It is not done via a text-based search engine, but using the integrated interactive Flash-interface.

Threadless

TasteBook

Loworks

LadyBugs Picnic
LadyBugs Picnic with feminine touch, handwritten elements and, of course, bugs!

Martique

Mozilla Store
A distinctive fan-shop for geeks and nerds.

Akachanwear
In this store the choice of illustrations directly indicates what the store is about.

Axid

A better tomorrow

Baby Wit
The design seems to be hand-drawn and incomplete which somehow fits to the items the store sells - baby clothes and accessoires. The design perfectly fits to the atmosphere it needs to create.