![]() ![]() The fill color is a mostly-transparent black, it has some inner shadows, and then a thin white drop shadow at the bottom. On the right is a larger panel that is designed to look inset into the screen. This specific combination of highlights, gradients and shadows is the most basic way to make a rounded rectangle appear bulged out and convex. That means that 1) the light catches the top of the object and adds a lighter stripe of highlight, 2) as the bottom bends back down towards the screen, the light is blocked and it gets darker (light-to-dark gradient), and 3) it casts a very subtle shadow, indicating that it's sitting on top of the surface. It appears bulged out because it's made to appear just like a convex object would appear in real life if it had 90°, top-down lighting. On the left is a convex button that is designed to look like it's bulging off the screen. If your goal is to craft subtle and realistic user interfaces that look and feel like real world surfaces, you'll be making a choice: is this element popping off the screen (convex) or indented into the screen (concave)? Buttons are convex whereas large panels containing text and other elements are typically concave. If the edges of your shape aren't sharp, then strokes/gradients/highlights/shadows you add later won't be perfect. There are some other ways to draw rounded rectangles in Photoshop (which Marc Edwards has conveniently outlined) but I typically stay with the vector shape tool because it's easy. This is incredibly important or the edges of your shape will lie on a half-pixel and look blurry. To draw a rounded rectangle, I use (gasp!) the Rounded Rectangle Tool with Snap To Pixels turned on. It's important to keep your elements in Photoshop in vector format as long as you can because they can be scaled and re-styled easily. I actually joke around with friends that my main job is making rounded rectangles look great, so I thought it was time to show off some common techniques. Smaller, slightly inset ones with photos inside. If you really think about it, most interfaces (especially for iOS apps) use tons of rounded rectangles in different shapes and sizes. ![]() The final visual design of a digital interface isn't going to design itself, and when a designer is crafting the look and feel, here are some elements they're typically designing: Great product design involves thinking about what features to prioritize, planning the user flow from screen to screen, getting user feedback and lots more, but at the end of the day, someone is going to be in Photoshop pushing pixels. ![]() POWERED by FUSION Making Rounded Rectangles Look Great Flyosity is my home for writing, speaking,Ĭonsulting and product development. I'm a designer & software engineer focused on crafting beautiful productsįor the web, Mac, iPhone & iPad. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |