Serious Situations – Simone Magurno

simonemagurno_01

simonemagurno_02

Italian designer Simone Magurno’s work is fresh and fantastic. Immediately bookmarked and about to be snapped up by LittleSnapper. Curiously you can drag around the images on Simone’s portfolio, which is helpful on the projects that contain stacked elements.

  • Posted

    • August 26, 2009

Photoshop Tip: Combine Vector Shapes

As I’ve migrated into using vector shapes in my Photoshop work as much as possible, the difference in control you have with vector objects between Photoshop and Illustrator has been a constant source of frustration. One specific example is that for years I’ve wanted to have the same or similar functionality of combining vector shapes in Photoshop that Illustrator has with it’s Pathfinder tool, arguably one of the most powerful tools in Illustrator.

My solution has been to use the vector tools in Photoshop for basic shapes such as rectangles, rounded rectangles, circles, and lines and if I needed a more complex shape I’d jump into Illustrator, build it, and then copy it back into Photoshop. This was not only annoying from an efficiency perspective but also because I didn’t have the contents of the rest of my Photoshop comp to rely on when building the shape I needed unless I saved a jpg and used that in Illustrator for reference.

I was recently working on a project that called for a tabbed navigation element and I really wanted that object to be one single vector shape. I got fed up and did some searching to see if there was any possible way to combine vector shapes and found this solution that looked exactly like what I’ve been looking for. While the content was good, the steps weren’t very clear, but I was able to figure it out and thought I’d pass this info along with expanded details and screenshots. Here’s the process:


1. Create a New Document

shapes

shapes_layers1

Draw two or more vector shapes in your document and make sure they overlap. Your “Layers” palette should look something like the 2nd screenshot.


2. Choose the Path Selection Tool

path_selection_tool

From your “Tools” window select the “Path Selection Tool” (dark arrow). If you have the “Direct Selection Tool” (white arrow) enabled then you’ll need to click and hold to bring up the option to choose the “Path Selection Tool”. This is what had me stumped for such a long time. I always had the “Direct Selection Tool” enabled because I regularly adjust individual points on my vector shapes. I had long forgotten that there was another arrow under that option in the “Tools” window. The “Path Selection Tool” gives you the ability to select vector paths as a whole and move them around or copy them, which we’re about to learn is a very vital step.


3. Select Vector Mask

select_vector_mask

With the “Path Selection Tool” enabled, select the vector mask for the top shape in the “Layers” window and hit cmd+C (ctrl+C on Windows) to make a copy of that mask. Now select the vector mask of the shape below it and hit cmd+V (ctrl+V) to paste the copied vector mask onto the bottom shape’s layer. Your “Layers” window should now look like this:

combined_vector_masks


4. Combine Vector Masks

vector_masks_selected

combine_vector_masks

With the “Path Selection Tool” still enabled you can either hold down the “shift” key and make multiple selections of the vector shapes in your document or simply click on the vector mask thumbnail of the bottom layer that now contains multiple paths, which selects all of the paths for that layer. Which route you take depends on if you want to combine all of the shapes or only some of the shapes in that layer. At the top of the application you get the option to “Combine” these shapes.

The options available look very similar to the main options you have with the “Pathfinder” tool in Illustrator. You can “Add to shape area”, “Subtract from shape area”, “Intersect shape areas”, and “Exclude overlapping shape areas”. If you click “Add to shape area” you’ll get the following result:

new_vector_mask

new_vector_mask_layers


That’s it!

Another interesting thing to note is that once you have multiple masks on a single shape layer you don’t have to combine them for them to perform as a single shape. You can apply layer effects to that layer and Photoshop will treat all of those masks as a collective whole. Leaving these as individual shapes on the same layer provides flexibility to where you can copy and paste them out of that layer and into a new layer or drag them around individually.

I can’t tell you how happy I was to learn this feature. It’s been a huge time saver for me. Hopefully it’s helpful to you if you’ve wondered the same thing or are new to Photoshop.

  • Posted

    • August 25, 2009

Convert Design Evolution

Really enjoyed this video showing the iterative design process on Tap Tap Tap’s unit conversion app Convert for the iPhone. My favorite design decision has to be at the 0:37 mark where the designer chose to move the conversion window into the unit selection window thus immediately simplifying the UI and allowing for more usable space.

Now that I’ve had the chance to really play with an iPhone I’m chomping at the bit to design an app or mobile site for it and videos like this don’t help me tame that enthusiasm.

via DaringFireball

  • Posted

    • August 25, 2009

iPhone Wallpapers

iphone_wallpapers

Since I am now the proud owner of an iPhone 3GS I’ve obviously been busy customizing it and of course picking a wallpaper was one of the first things I did. It was hard for me to narrow down which one I wanted to use, so I ended up making several and figured I’d share those with you. I’ve added a new gallery on my Photos page called iPhone Wallpapers. The collection contains some of my photography for now (I’m currently sporting this one), but I hope to add design work to it as I continue to build it out. Feel free to share these and if you have any ideas, comments, or suggestions let me know.

  • Posted

    • August 24, 2009

Photo: the wait

the_wait

  • Posted

    • August 18, 2009

looks del.icio.us

looksdelicious_01

looksdelicious_02

looksdelicious_03

looksdelicious_04

Kunal Anand, who enjoys “…visualizing data, writing music, obsessing over the Superman universe, and creating mixed media pieces.”, is responsible for these beautiful data visuals above titled looks del.icio.us. As the name hints these visualizations tie directly into the social bookmarking service Delicious and graphically display the tagging patterns of individual users. On these you can see the names of the users he targeted, people such as Wilson MinerMerlin Mann, and John Hicks (my favorites being these last two).

Kunal, while obviously very talented as a programmer (he used to work at NASA), does a wonderful job with the color and post-processing of these images. I’d love to know more about how these are put together. Very nicely done Mr. Anand!

  • Posted

    • August 18, 2009

I’m Running for Election

sxswi_vote

Not exactly, but the panel idea I submitted to next year’s SXSW Interactive conference made it to the next round. The panel is tentatively titled “Get Real Photoshop: Technology vs. Reality” and will discuss how design programs such as Photoshop can negatively impact our designs and visual understanding of the real world. I’ll also go into ways in which we as designers can remain grounded amidst the endless sea of digital tricks, tips, and tutorials. This is an area that I’ve spent years wrestling with and I’d love the opportunity to share the knowledge I’ve learned along the way.

So how can you help? All you have to do is visit the SXSWi PanelPicker, create an account, and then give my idea the thumbs up. It couldn’t be simpler. What do I have to do? Just sit back and wait until the results are in, which they say will probably be announced in October.

Oh and I also have to figure out how not to throw up several times if I do get picked.

There are a lot of great panel ideas this year, so if you have time be sure to check out the other submissions. Here at Springbox we have 6, so peruse those too.

The PanelPicker went live today and has been hit with a high volume of traffic, so if it’s down when you go please be patient and revisit it later. The voting is open until Friday, September 4th so you have time.

  • Posted

    • August 17, 2009