AUTHOR ARCHIVE

Learning CSS With Templates

Monday, March 3rd, 2008
Author of this post: Tara MacKay | About Blog Authors »

I know I’ve posted about it once, maybe even twice, but table-based web designers (myself included)… your days are numbered.

I’m always surprised when I see so many web designers using tables for layout, but I can understand it. Most designers started with tables, and while tabled layouts are so inflexible, they’re quick and easy to create. Making the leap to CSS positioning to create layouts means more to learn, and a potential slowdown in your work before you see the true time benefits.

I previously posted about CSS Zen Garden as one way to test your skills, but this works best if you’ve already got some experience with CSS layouts.

If CSS layouts are totally new to you (though I’ll assume that you have some experience with CSS text styling), think back to how you may have learned HTML. One of the best ways to learn HTML, back in the days of simpler sites, was to download an existing page and look at the code. Play with it. See how all those crazy tags worked.

For CSS layouts, you can do the same thing. But the trick is to start with ones that are written correctly. So avoid choosing any random site and downloading its code. Try existing templates from various free template sites.

Freecsstemplates.org
is one of many sites that offers downloadable templates that you can play with to learn CSS layouts (or just use as-is for a quick blog design). At this site, all of the templates comply with W3C standards and contain valid XHTML code.

csstemplates.gif

Templates at freecsstemplates.org comes in many layouts and visual styles.

These templates, and others from many different authors, are also available at opendesigns.org. Just download and start experimenting.

Simpler templates, also with valid code, are available at intensivistation.ch. In these, the code is displayed within each content area—this is great if you want to start new docs from scratch and simply copy, apply, and modify the given code.

When working with these templates at first, pay little attention to the graphics and colors—instead, focus on the positioning of page content areas. The content areas (more…)

What’s Your Personal Color?

Thursday, February 28th, 2008
Author of this post: Tara MacKay | About Blog Authors »

New York magazine recently ran a story for its Spring Fashion 2008 series called “One Is the Loveliest Color.” It features interviews with five different New York residents, each of whom wears only one signature color… all the time.

There’s a shoe designer in blue, musician Stephin Merritt in brown, and my personal favorite, “The Green Lady.”

whatsyourcolor.jpg

New York magazine’s interviewees in “One Is the Loveliest Color” might inspire you to find your signature hue.

I always referred to Elizabeth Sweetheart as The Green Lady when I lived in the city. I’d see her often in my Brooklyn neighborhood and on the train. I was always amused and impressed by all of the ways she folded green into her wardrobe. I recall the green barrettes in her green hair, atop a face with green tinted glasses. The green shoes, green socks, and of course, green overalls.

I never had the nerve to ask her about her unique look, so until I stumbled upon this article, I didn’t really “get” it. Reading the other interviews, this idea of a signature color, and how it evolved for these creative people, it suddenly made sense.

First, the color seems to find you, not the other way around. It trickles in initially, but quickly takes over. And it does so because it reflects the wearer’s personality. It immediately feels tied to the wearer, and vice versa. It’s like a brand. Tiffany & Co wouldn’t be the same without its “Tiffany blue” boxes, just as Elizabeth Sweetheart wouldn’t be the same without her green. She can’t sleep if she’s not wearing her green.

Sure, it’s unlikely that this notion of dressing monochromatically in a signature shade every day (more…)

Adobe’s Communication Tools

Monday, February 25th, 2008
Author of this post: Tara MacKay | About Blog Authors »

Given how ubiquitous Photoshop, Illustrator and Dreamweaver have become, it can be easy to forget that Adobe has other offerings. If you create live presentations of your work, interactive training pieces, knowledge bases for your colleagues, or if you conduct web conferences with clients, some of these lesser-known tools are worth a look. Here’s a peek at what each one does.

Acrobat Connect Professional combines what was formerly the Macromedia Breeze product with VoIP and other features to create a web conferencing application. With Connect Professional, a user can easily create a conference room with video, audio, chat and polling capabilities. There’s also a large content area in which one can present slides and images created in other applications including Adobe Presenter, which comes with the package. Conferences are available via the Flash Player, so no additional software is required for playback. Compared to the rather complex Microsoft LiveMeeting, preparing a conference with Connect Professional is a no brainer, especially if you use the templates.

adobeconnect1.jpg

The demo at the Adobe site will to give you a sense of how the Connect web conferences look both and operate.

Captivate, another former Macromedia product, can be used to create interactive online learning tools such as quizzes, simulations and scenarios, even podcasts. Educational modules can be built using simple templates, and you can also record screen movements if a visual demonstration is necessary. This app is probably is probably more than you need if you’re just teaching some basic tasks to a few people, but if you’re e-learning needs are extensive or complex, Captivate can help you create some pretty robust interactive features.

RoboHelp is a bizarre name for a program that is used to build searchable, indexed knowledge bases, and most small-time and freelance designers will have little use for this app. But web developers and technical teams will appreciate its time saving capabilities (more…)

Photoshop on the Small Screen

Thursday, February 21st, 2008
Author of this post: Tara MacKay | About Blog Authors »

While I firmly believe that words and pictures are in most cases all you to need to explain a concept, assuming you know it well, I’ll admit that video tutorials do serve a certain purpose. Some ideas and techniques, like layers and use of the Clone Stamp, just make more sense when you see the action unfold on a screen.

The overall quality of most Photoshop video tutorials has improved dramatically over the years, and it’s now pretty easy to find a lesson that speaks to your specific needs. Below are a few tutorials that I found both interesting and useful. It should be enough to get you started.

ScreenFrog has videos about Photoshop as well as other imaging apps. Most of the programs focus on either interesting effects or often avoided tools. I really like this tutorial, which explains the Pen tool. The Pen tool scares a lot of people, but if you follow along and work with the floral download, you’ll quickly get the hang of it. And as an added bonus, you get to see the video’s creator work in the German Photoshop interface!

psvideos1.jpg

Master the Pen tool with help from this ScreenFrog video.

One should expect good things from a site called TutorialChamp, and thankfully, it delivers. Most of the site’s tutorials explain really useful techniques, like removing wrinkles or coloring comic art. You can even learn how to place someone’s head convincingly on someone else’s body. Personally, I love the tutorial about flyers, because unlike most Photoshop videos, it delves into design as well as technique.

psvideos2.jpg

TutorialChamp’s videos are captioned so you can read along rather than listen, which is great if you’re at work.

Not surprisingly, a search on YouTube for Photoshop videos returned loads of content, but most of it is, at least to my mind, best avoided. Still, there are some diamonds in the rough. For example, YouTube user tutvid has created a few videos that are definitely (more…)

What’s New in Aperture 2?

Monday, February 18th, 2008
Author of this post: Tara MacKay | About Blog Authors »

Remember when designers had to choose between Illustrator and Freehand, or Dreamweaver and GoLive? That was before Adobe acquired Macromedia. Today, there are fewer options. But Apple is trying to change that, at least in one category.

aperture.jpg

Currently, there are currently two pro-level, post-production applications for digital photographers: Apple Aperture and Adobe Photoshop Lightroom.

Aperture was first released in late 2005. Lightroom hit the shelves in 2007. From the start, both programs offered complete raw support, non-destructive image editing and high-end printing features, and both included a wide range of image adjustment tools that helped photographers produce top quality shots. Both programs also had image management capabilities that far surpassed anything found in iPhoto or Adobe Bridge. So, for the most part, it was all about which interface you preferred. (Unless, of course, you were a Windows user; Aperture is only available for the Mac.)

That is until now. Aperture 2, released last week, includes a wide range of innovations not found in Lightroom. By Apple’s count, there are “100+ new features” in the latest version of the app. You can view a full list of those capabilities here, but there are a few obvious standouts that I think are worth noting.

Integration. When you’re married to a specific brand of products, you hope and pray that they’ll work well with the other apps you use. Aperture has always supported native PSD files, which is about all you can ask for with regards to Adobe integration. But Aperture 2 also works seamlessly with iPhoto. I’ve never been totally comfortable managing my images with Adobe Bridge, so if you’re like me, you’ll appreciate this new built-in compatibility.

Speed. High-quality images can quickly bog down a system, and users have often complained about the sluggishness of both Aperture 1 and Lightroom. But Aperture 2 is supposed to be a lot faster, (more…)

Helvetica for Your Valentine

Wednesday, February 13th, 2008
Author of this post: Tara MacKay | About Blog Authors »

If your sweetheart is a graphic designer, it’s quite possible that he or she loves not only you but also Helvetica. Developed in 1957, Helvetica is the ubiquitous, sans-serif typeface that captured designers’ hearts almost immediately upon its release with its perfect, neutral letterforms.

helvetica.jpg

There’s no sense in being jealous of your sweetie’s love for Helvetica. It’s everywhere, from the iPhone to Target to the NYC subway. Helvetica will always been in the picture. Instead, accept Helvetica’s place in your relationship. That should earn you at least a few points this Valentine’s Day.

Begin your journey to acceptance with Helvetica: The Movie. Not exactly romantic, Helvetica is a documentary about the much-loved typeface. The film was originally released in 2007, and it’s still playing in only a few locations around the world. (Visit this site and scroll to the 2008 dates for show times.) Alternatively, you can order up the movie online or just add it to your Netflix queue. A two hour film about a typeface may not sound all that interesting, but it will definitely help you understand Helvetica’s influential role in modern culture. And the movie is surprisingly funny and entertaining throughout, due in large part to the graphic and type designers who appear in the film.

If the movie doesn’t convince you that your sweetheart isn’t the only one out there nursing a bizarre love for Helvetica, (more…)

Adobe Stock Photos, R.I.P.

Monday, February 11th, 2008
Author of this post: Tara MacKay | About Blog Authors »

Apparently not all of Adobe’s products are as essential as Photoshop and Illustrator. This month, Adobe announced that it will cease to operate its relatively new service, Adobe Stock Photos.

The Adobe Stock Photos service was introduced in 2005, but it wasn’t heavily promoted until 2007, when Adobe released Creative Suite 3. The service provides users access to numerous royalty-free stock photo libraries, including those maintained by Masterfile, Getty and JupiterImages, and everything occurs via the Adobe Bridge interface.

adobestockphotos.jpg

Say goodbye to Adobe Stock Photos in Bridge.

The Adobe Stock Photos concept was a good one; it’s like an iTunes Store for royalty-free images. But for numerous reasons, the service never caught on. Here’s why:

ASP dealt almost exclusively with the “expensive” stock libraries. Designers working on big-budget projects often use such resources, but those with less to spend or those in of only small, lower-res images almost never do. ASP thus had little to offer customers in these latter categories.

Also, big-budget designers were typically already committed to a single stock photo company, or they already had an effective image searching process in place. Either way, ASP was a little late to the game.

But let’s turn our attention back to that first reason, because that’s what’s most interesting about (more…)

Make Your Move to a New Web Host as Painless as Possible (Continued)

Thursday, February 7th, 2008
Author of this post: Tara MacKay | About Blog Authors »

web host

In a post earlier this week, I shared with you some tips on moving from one web host to another. Today, I’ve got more advice for you. Altogether, it should make this tricky process more than manageable.

5) Prepare for the propagation period. When I make a switch, I always change a few things on my home page. For example, I’ll add a new image or put a comment in the HTML. When I see the updated site on my screen, I know that it has moved to the new location.

What about email? During the propagation period, some of your messages will probably be sent to your old host. Others will be directed to your new host. I like to put my new settings into my Mail.app and keep the old ones as well. That way, I don’t miss anything.

6) Do some filing before you close your old account. You’ll no doubt transfer most of your files to your new host, but there are some other, additional items that you might also consider taking with you. For example, you may have old traffic statistics or some useful spam filter configuration data that could prove handy in the future. Export whatever you can and copy the rest. Take screenshots or copy and paste to a Word or HTML file any info that could be of use to you.

7) Have a backup plan. Don’t discontinue your old service until you’re absolutely certain that everything is working as it should at the new digs. Even if you can’t stand your old host, (more…)

Health Insurance for Freelance Designers

Wednesday, February 6th, 2008
Author of this post: Tara MacKay | About Blog Authors »

healthcare.jpg

If you’ve been paying attention to the current US presidential campaigns, you’ve probably aware that “47 million Americans are living without health insurance.” If you’re a freelance designer, you may very well be one of those people.

I know lots of freelancers who take their chances and go without health insurance. One of them now owes $30,000 in hospital bills due to some unexpected surgery. Now in all likelihood, that won’t happen to you, but perhaps you’re feeling some pain in your wrist, or maybe you’re just don’t want to get too close to that friend with strep throat.

Many freelance designers forgo health insurance because most individual plans are incredibly expensive. It’s a valid decision, especially if you’ve been waiting months for a client to pay for that big logo job.

Still, you may be surprised at how many health insurance options, including discount plans, are available to the self-employed. If you’re thinking about getting some coverage, these are the places where you’ll find the best deals.

Your local chamber of commerce. If you provide design services to local businesses, you should already be a member of the chamber of commerce. It’s a great networking opportunity, and members of most chambers are eligible for group health insurance that comes at steep discounts.

Professional groups. If you belong to any professional associations for small business owners, designers, or freelancers, you should ask about group health insurance. Many of these organizations have direct access to discounted plans or partnerships with other entities that do. For example, the Graphic Artists Guild offers group rates in 28 states.

Your accountant. If your accountant works mostly with freelancers, he or she may have some recommendations. (more…)

Make Your Move to a New Web Host as Painless as Possible

Tuesday, February 5th, 2008
Author of this post: Tara MacKay | About Blog Authors »

web host

Recently, the company that hosts my website charged my credit card for a full year of service. It was the result of a glitch in their software, and it affected a great number of their customers. Some people’s accounts were overdrawn, and there were many other financial mishaps. I’d been considering a move to new web host for a while, and this was all that was needed to turn thought into action.

Finding and transitioning to a new host seems like it should be simple, but it can quickly become a daunting task. It often takes a few days for your domain name to match up well with the new server, and there are always a lot of items to move, including email, files, databases and more.

I learned some things in the course of my move, and I thought I’d give you some tips in case you’re considering your own transition.

1) Leverage your existing knowledge when finding a new host. Usually when you’re choosing your very first host, you have only a vague idea of what you require. As a result, you often end up with more space, more bandwidth, and more email addresses than you really need. But when you switch, you know exactly what you use. You’ll get a much better deal because you know this information.

2) Make dramatic technological changes only if absolutely necessary. Moving from a host with PHP to a host with ASP (or vice versa) can (more…)

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Self-Help Art
July 9th, 2008
Inspiration Art