Search Results For: photoshop

CSS / 27 Feb 2012

Super Sweet CSS 3D Text Effects With Sass and LESS

I was recently discussing the merits and various features of CSS preprocessors with a colleague. We covered all of the basics: how it’s great to have variables and how mixins can save you an incredible amount of coding time. When the conversation turned to some of the more obscure features though things got interesting. When I brought up the various color operations, my colleague boldly proclaimed that no “real designer” could ever find a legitimate excuse for using this feature and not picking his own colors manually.

In the words of Barney Stinson, “challenge accepted!” Today we’re going to create an awesome faux 3D text effect with pure CSS and then see why it’s a lot easier to do it with the color operations in Sass or LESS.

CSS / 24 Feb 2012

Do We Still Slice PSDs?

The other day a friend of mine said something that caught my attention, “I’m trying to learn how to slice a PSD.” It’s a simple enough statement. As soon as he said it, I knew exactly what he was talking about, and yet, there was something in there that didn’t quite set right.

Upon seeing my hesitation my friend responded with a question, “Do we still slice PSDs?” Great question! For beginners, jargon isn’t merely jargon, it implies a process and suggests a method of action. For this reason, it’s often helpful for more advanced developers to define their terms in a way that is meaningful to others. Today we’ll dive into the theory behind the process of converting a PSD to to a web page and end with a discussion on the ups and downs of designing in the browser.

Inspiration / 17 Feb 2012

Developing a Color Scheme and Color Management Tips

Building a website can come with a few unexpected hiccups, one of those being color. Understanding color choices, and how colors may render on different computers is the first step to ensuring that your site has the look you intended.

In addition to finding and selecting colors that work for you, it is wise to develop and manage a color scheme for your project. It is simple to create a set of swatches in common image software such as Adobe’s Photoshop or Illustrator and organize colors in such a way that they are easy to find and use.

CSS / 16 Feb 2012

4 Fun CSS Image Effects You Can Copy and Paste

Once upon a time we relied purely on Photoshop to create fancy image effects. These days though we’re turning more and more to pure CSS to add eye candy to our images. Applying custom image treatments using code makes for an infinitely flexible workflow that’s easy to tweak at any time.

Today I’ll walk you through creating some extremely simple and fun CSS image tricks. From polaroids to vignettes, you won’t believe what we can pull off.

HTML / 13 Feb 2012

Save Loads of Time by Writing Your HTML With Haml

Odds are, by now you know all about Sass and its brethren (LESS, Stylus, etc.). Love them or hate them, these CSS preprocessors are making a big splash in the development community. In many ways they represent a faster, more efficient way to write CSS and if you get on board, you’ll no doubt appreciate the flexibility that they bring to your project.

Once you get bitten by the CSS preprocessor bug, you’ll inevitably start look at HTML and wondering why it has to be so cumbersome. Why doesn’t someone drastically simplify the way we write markup? It turns out, the same people that brought us Sass have done just that with a language called Haml. Today we’re going to take a look and see how to use Haml to completely change the way you write markup.

Navigation / 10 Feb 2012

15 Impressive CSS and PSD Navigation Menus

Today’s awesome collection of design freebies brings you a veritable utopia of navigation menu bliss. Each of the fifteen navigation menus below are both completely gorgeous 100% free to download.

I’ve included both CSS and PSD menus so whether you’re just looking to create a mockup or need something fully functional, we’ve got you covered. Enjoy!

Layouts / 2 Feb 2012

How to Create a Facebook Timeline Cover Photo: Examples and Best Practices

Facebook announced Jan. 24 that it will be moving all users to the timeline format in the next few weeks. Although the change will be mandatory soon, you can make it early as some users have been doing since it was launched in September. Timeline is the new Facebook “wall” and highlights your personal information based on when it happened.

The biggest visual change included in Facebook timeline is creation of a cover photo. When someone lands on your page they not only see a small square profile image but also a large photo that you have selected for the top of your page. The shape can a little intimidating and includes a hole where the profile image rests. But you can crop or create your own timeline cover photo in just a few minutes. Follow along as we take a look at some great examples and advice for creating the perfect cover photo.

CSS / 19 Jan 2012

Create Amazing CSS Buttons on the Fly With CSSButton.me

Today we’re going to have some fun as we take a look at an awesome new free tool for web developers simply called CSS Button. This web app makes it quick and easy to make the CSS buttons of your dreams using simple and intuitive controls.

I’ve seen quite a few other CSS button makers before and almost none really merit repeated use, but this site has a lot going for it and can genuinely save you a lot of time and frustration. Let’s jump in and check it out!

Graphics / 12 Jan 2012

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

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!

Typography / 4 Jan 2012

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

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.

Layouts / 27 Dec 2011

Utilizing Grids in Print Design

The basic organization of a design project typically begins with a simple concept – the grid. Whether you decide to work within its constraints or intentionally move away from it, deciding how to use a grid tends to be one of the first steps in the design process.

Print designers have been working on grids since the first newspapers rolled off the presses hundreds of years ago. Most magazines also employ a grid; books are put together using the grid format. The grid can be part of a publication’s identity and helps create a sense of space and organization. Understanding the basics of grid design – from how it originated, to developing your own grid and using it in your workflow processes – will make working within vertical and horizontal constraints a snap.

CSS / 20 Dec 2011

Make It Snow on Your Website With CSS Keyframe Animations

The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. I live in Phoenix so real winter, and consequently snow, is really just a distant dream. Thus I am forced to turn to nerdery to get my fix!

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your website. It’ll only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.