Resizing rounded rectangles in Photoshop
The rounded corner style has been around for a quite a while now, and one thing (beyond wanton overuse) has always bothered me about it. When working with rounded rectangles in Photoshop, there seemed to be no elegant way to resize them. The corners don’t remain intact when you use Transform (Ctrl/Cmd-T) to scale the shape. Instead of lightly rounded edges, you end up with ugly mishaps like this:
My default method for getting around it was to rasterize the shape, move the ends around, and then fill the gaps by resizing the middle. Darren Hoyt has a good walk through of that trick here. Another workaround is to create the shape in Illustrator and then paste it in as a Smart Object. But both felt like bad hacks for doing something that should be inherently simple.
Getting Rid of Jaggies on Your Photo Borders
During a recent moodboard review, the design team got to wondering what the best solution was for getting rid of Photoshop "jaggies," those jagged edges that show up on your nice clean shapes; especially when you start rotating them. I had a few ideas but decided to do some tests to see what REALLY works best. I started my testing with a common design element that falls prey to jaggies: a photo with a white border, slightly rotated. The photo I’m working with happens to be of my ultra adorable dog Bruiser. First, I created two versions—one photo with an 8-pixel white inside stroke (Layer Style > Stroke) and one photo with a white square shape layer behind it. Then I rotated both sets 8 degrees clockwise. 
Continue reading "Getting Rid of Jaggies on Your Photo Borders"
Typography Tuesday: Let it Breathe
Getting Moody: A Look at Inspiration and Style in Early Design Techniques
As designers, we often think (read: "know") we have great ideas and intuition coupled with the ability to turn around a design that a client will love. If we love it, then s/he should, too (because it rocks ... or so we think). We can spend hours upon hours leading up to a design presentation getting a design to a wow level only to see our passions wilt in the face of someone who so desperately wants to love it but simply doesn't. A good practice to avoid this is to start with a mood board.
What is a mood board?
Mood boards, being a lot like they sound, are typically used to help establish a style, theme, expression, environment, atmosphere, or feeling. They often consist of found objects from magazine tear outs or digital imagery to fabric or color swatches, but really can be anything that inspires (like a favorite saying, or phrase, for example). We'll collect these inspirational tidbits to help establish a general look and feel direction prior to jumping head first into a full, precise design. It's all about starting loosely and getting specific as you progress through the design process.
Continue reading "Getting Moody: A Look at Inspiration and Style in Early Design Techniques"
How I’m Using Adobe Bridge
Up until about a week ago, Bridge was merely an annoyance... an application that fired itself up every now and then when I clicked the wrong button in Photoshop or Illustrator. I knew it came with Adobe Creative Suite 3, but beyond that I didn't know much. I've been successfully ignoring it for quite a while because as a web designer I didn't think I had much use for it. As it turns out, I was wrong.
Is it time to ditch IE 6?
A few weeks ago, 37signals brought up a great question -- one that was echoed by a friend of mine just a couple of days ago: When can we finally ditch IE 6?
A few notable companies are taking the first steps. Facebook has been warning users about the perils of using IE for a while. And now it looks like Apple's newest web apps won't be supporting IE 6 at all. Frankly, I'm not surprised. I think they are taking a necessary step forward by forcing users to use a modern web browser. After all, it is 2008, not 1996.
Switching Mindsets: From WordPress to ExpressionEngine
I’ve been a devoted WordPress user for the past four years. I had invested quite a bit of time into learning MovableType when a developer friend suggested I try WordPress instead. The minute I saw its templating system, which is both flexible and easy for a designer like me to grasp, I was sold. It proved to be remarkably "hackable" and at Syracuse University (my previous employer), we frequently used it as a web content management system for clients with simple needs. It worked well enough, and I was content to stick with a single software package—until now.
Before coming to Viget, I never had the opportunity to build a site using ExpressionEngine. At colleges and universities, it’s common to use open-source software, partly because of budget constraints but also because the idea of collaboration and knowledge sharing is so synonymous with academia. So when I was tasked with implementing a client site in EE, the geeky side of me was thrilled while my designer side was nervously wondering if it would require more programmer smarts then I have.
After a quick overview, I dove right in, Googling anything that didn’t make sense. There is plenty of good documentation and a great support forum, so finding answers to my questions was easy. I have good news for all you designers out there: no crazy, black-belt coding skills required. It only took a few days to learn the basics and get my first EE site up and running flawlessly. There were a few things I struggled with, though—for example, mental roadblocks that probably wouldn’t have been as confusing had I not been entrenched in the WordPress ways of doing things—so for other WordPress users thinking of switching, here are a few tips:
- Get over the term "weblog." To me, a weblog meant a big—well—blog, with all sorts of page types and info and categories and whatnot attached to it. In EE, a weblog is a container used to store information and organize your data. I used a separate weblog for nearly every page in the small site, which seemed counterintuitive at first. It makes more sense when you start creating custom fields and assigning them to each weblog. Basic lesson: Don’t be afraid to make lots of weblogs for a single site. You can change your preferences to call it something else (like "section"), but the template tags will still call them weblogs, so I found it easier to just adjust my thinking. (Note: Rumor has it this term is being dropped in the upgrade to 2.0, so in a few months you won’t have to worry about this!)
- Start thinking in smaller chunks. In ExpressionEngine, it’s much easier to break your pages up into structured pieces of content (title, thumbnail image, summary, body content, etc) using custom fields. You can create custom fields in WordPress, but it ain’t easy and it often feels like you’re doing backflips to cobble together complex pages. In EE, you can make as many custom fields (bundled into "field groups") as you want. You then assign the field group to a weblog, and voila! Lovely structured data. The level of control you have is amazing, and it doesn’t require extra downloads or add-ons. Which leads me to #3...
- Say goodbye to crappy plugins. If you want to do anything fancy with WordPress, it requires a plugin. Which is no big deal; downloading and installing one takes all of a minute or two. BUT, you have to sort through a lot of garbage to find a plugin that works and is not in perpetual "beta." Because WordPress is open source, programmers everywhere are writing their own plugins for it. Some of them are awesome. Lots of them aren’t. EE has much more out-of-the-box functionality. The only plugin I installed was for a mail form, and it worked great without any tinkering. The add-ons in the ExpressionEngine library have been tested and accepted by its creators, so you can expect them to work.
- Finalize your design before moving it into the system. My original xHTML/CSS templates and the templates I ended up with in WordPress usually weren’t all that different, so modifying them outside of the editor and then copying/pasting them in wasn’t a big deal. In EE, my original templates got chopped up into small chunks right off the bat. This made big design changes overly confusing. Next time around I’ll spend more time working out design details before I move the display templates into EE.
- Expect to spend a while finding things in the control panel. It seems unnecessarily convoluted. It took me a while to find things and memorize the patterns. Create a weblog, then create a field group with custom fields, then assign that field group to a weblog, then make a post in the weblog.... yikes. It felt like a lot of steps. I know it’s partially because you have such fine grain control over things, but I’m sure the interface could be simplified so everything wasn’t five clicks away. Saving graces: you can use the back button, and you can open multiple tabs to work on things. I often keep my stylesheet template in one tab and another template (like a page template) in a separate tab so I don’t have to navigate back and forth quite so much. It appears the upcoming ExpressionEngine 2.0 upgrade will be a huge improvement, so I can muddle through until then.
- Say goodbye to PHP tag soup. My EE templates look so pretty and streamlined compared to my WordPress templates! With so many built-in functions, there’s just a lot less code to look at. All I have to say is, HOORAY. I’m obsessive compulsive by nature, so a few lines of clean code makes me much less anxious.
Shifting my thinking (and learning a CMS new system) was well worth the effort. I have found EE to be much more powerful than WordPress, and not nearly as hacky. I’m looking forward to working with it more in the future. There seems to be no end to its functionality, so it’ll keep me busy for a while.
A few sites I found especially helpful:
Recent Comments
Great review!!!
Very important information.
Thanks for sharing
- psd to xhtml on 'Switching Mindsets: From WordPress to ExpressionEngine'.
- Menachem on 'New Year, New Web Design Goals'.
- Simon Raybould - presentations training on 'An Age of Presentation: Styles, Trends, and Trendsetters'.
Subscribe to Comments RSS