Articles Archive

sizewoes-f

When the Photo Doesn’t Fit the Space: Tips and Tricks for Making It Work

screenshot

You’ve been there a thousand times, staring at a big empty canvas that simply doesn’t seem to work with the photo that the client has provided. Perhaps you have a vertical space and a horizontal photo (or vice versa), or maybe the image is simply too small to resize without unacceptable quality loss. What now?

Today we’ll go over some tricks of the trade and teach you how to cope with images that don’t fit where you need them to. The next time you run into a problem, you’ll be ready!

January 12th, 2012 Posted in Graphics
activetut-f

Build a Fun Trivia Game With the CSS Active Selector

screenshot

We’ve done a ton of fun stuff recently with the :hover selector. From button hover effects for beginners to more advanced hover tutorials and even onto using hovers with multiple backgrounds. Today we’re moving on and learning about a related but equally awesome selector that often gets overlooked.

With :active, we can control the state of an object while it’s being clicked. Typically, this takes the simple form of changing a link’s color while the mouse is pressed down, but we’re going to do something much more interesting. Follow along as we build a super cool, pure CSS presidential trivia game.

January 11th, 2012 Posted in CSS
digicard

Is It Time for Your Business Cards to Go Digital?

screenshot

Are traditional paper business cards becoming obsolete? Have you considered a digital option? The type of card you use and how it looks can say a lot about you and your work. The style of card – from simple embossed text on a white card to ornate colors and fonts – can be a client’s first impression of your work.

You want to use a card that represents your style and works with the kind of clients you work with. When looking for a business card, consider both digital and paper options and integrate your digital self into paper cards. A business card does more than provide your contact information, it is a gateway to your portfolio as well.

January 10th, 2012 Posted in Articles, Business, Layouts
photoshopdonts-f

5 Former Design Trends That Aren’t Cool Anymore (So Stop Using Them)

screenshot

If you’re like me, looking at your own design work from a few years ago can often result in some laughable or even cringe-worthy moments. Design styles have been steadily evolving and most of us can’t help but be affected by these changes. Who among us hasn’t piled on the cheesy Photoshop layer effects, all the while thinking the result was downright awesome?

However, some of us are a little slower to evolve than others. Today we’ll be taking a walk down memory lane and looking at five design trends that used to be super cool, but now simply tend to make your design look outdated and even ugly. If you’re currently still stuck on these trends, it might be time to move along! We’ll help you out with some modern alternative practices that you can use to bring your design skills into 2012 in a hurry.

January 9th, 2012 Posted in Graphics
DSCRT-74-f

Web Design Critique #74: Pergola Farmhouses

screenshot

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Pergola Farmhouses. Let’s jump in and see what we think!

January 7th, 2012 Posted in Critique
wf-sprites-f

Weekly Freebies: 12 Free CSS Sprite Generators

CSS image sprites allow you to dramatically reduce the number of HTTP requests on a site by combining many or all of the images on your site into a single file. This file can then be used in conjunction with CSS background positioning to implement individual images.

The downside of this technique is that it’s a painstaking, involved process that requires you to manually combine your images and fiddle with the CSS to get each image to display properly. Fortunately, there are a number of free online tools that completely automate this process. Today we have an awesome collection of twelve of these tools, each with its own unique take on the sprite generation process. Whether you’re looking to create a sprite from a folder of images or convert an existing site, we’ve got the tools to help you get the job done in seconds flat.

January 6th, 2012 Posted in Freebies
smallvlarge-f

Know Your Weaknesses: How to Improve Your Creative Review Process

screenshot

Every designer has to answer to someone. Freelancers turn their work in to a client, company guys hand theirs over to a team or supervisor, there’s always someone next in the chain of command that gets to take a look and offer an opinion. It’s at this point that the initial draft ends and the creative review begins.

This critical point can have a dramatic effect on the future of the project. Sometimes this is a good process that takes the piece to new heights that it could’ve never reached without some fresh insight. Other times the creative review process kills the genius of the initial draft and results in a misguided final product. One factor that plays a key role in this is the size of the review team. How many people should review a design and offer ideas? Should it be a small team? What are the pros and cons of each? Let’s discuss.

January 5th, 2012 Posted in Business
typeperspective-f

Typography With Perspective: Learn to Wield Illustrator’s Perspective Grid Tool

screenshot

Today we’re going to take a look at how to use the Perspective Grid in Adobe Illustrator. This awesome and fairly new tool allows you to automatically flow vector elements onto a prebuilt three dimensional grid.

You might think that you need to be an artist to use this tool but there are in fact all kinds of practical uses for it in every day design. We’ll use it to lay out some type like in the example above.

January 4th, 2012 Posted in Typography
responsivegallery-f

How to Build a Responsive Thumbnail Gallery

screenshot

Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works.

One major component of mastering responsive design is to figure out how to approach specific tasks and adjust to problems as they arise within the context of larger projects. One day you’ll be working on a project and will need a responsive gallery and you’ll remember this post on that very topic.

January 3rd, 2012 Posted in CSS
mouseinout-f

Mastering Mouse Enter and Exit Events With CSS Transitions

screenshot

While working on a recent post that utilized CSS transitions, I stumbled upon some interesting revelations completely by accident. Switching up where you place the transition syntax can have a dramatic effect on how the transition is carried out.

Today we’re going to go over the various options for CSS transition syntax and how each affects the animation given whether your mouse is entering or exiting a hover.

January 2nd, 2012 Posted in CSS
Subscribe


Membership