Archive for the ‘Work’ Category

April 30th, 2013

30 Wireframe Templates and Toolkits

Creating wireframes doesn’t necessarily require the use of special wireframing software. It is entirely possible to plan and prototype user interfaces using established tools like Adobe Illustrator, OmniGraffle or even PowerPoint and Keynote. These tools are tried and tested and incorporate a rich set of features that allow users to quickly and easily create wireframes without the need for specialist software. What’s more, they are designed by reliable software providers and it’s highly likely that they will continue to be around in a few years’ time.

To help you get started with wireframing using your tool of choice, I have compiled a list of useful resources and templates that are available in different file formats.

Webpage Wireframe Stencil Kit (Adobe Illustrator, EPS)

Webpage Wireframe Stencil Kit - Wireframe Template & Toolkit

A collection of high-fidelity wireframe controls and icons in .ai and .eps vector format; free for use in both personal and commercial projects.

Webpage Wireframe Stencil Kit →

Wireframe/Blueprint Kit (Adobe Illustrator)

Wireframe/Blueprint Kit - Wireframe Template & Toolkit

A small kit of beautifully designed website wireframe elements in light-grey with flecks of blue.

Wireframe/Blueprint Kit →

Sketching & Wireframing Kit (Adobe Illustrator, SVG, EPS)

Sketching & Wireframing Ki - Wireframe Template & Toolkit

A free wireframing kit that contains typical websites elements such as form controls, banners, icons and indicators.

Sketching & Wireframing Kit →

Sqetch Wireframe Toolkit (Adobe Illustrator)

Sqetch Wireframe Toolkit - Wireframe Template & Toolkit

This is a comprehensive collection of carefully hand-drawn templates and elements that can be used for web and mobile wireframes.

Sqetch Wireframe Toolkit →

iPad Sketch Elements (Adobe Illustrator)

iPad Sketch Elements - Wireframe Template & Toolkit

A collection of typical iPad controls offered in a sketch-like style for use in Adobe Illustrator.

iPad Sketch Elements →

iPhone Wireframe Elements (Adobe Illustrator)

iPhone Wireframe Elements - Wireframe Template & Toolkit

A set of wireframe elements for iPhone apps in .ai and .pdf format; released under a Creative Commons Attribution license.

iPhone Wireframe Elements →

PowerMockup: Wireframe and Storyboard Tool (PowerPoint)

PowerMockup: Wireframe and Storyboard Tool - Wireframe Template & Toolkit

An add-on for PowerPoint that provides a searchable library of over 250 wireframe stencils and icons.

PowerMockup: Wireframe and Storyboard Tool →

Windows 8 Wireframe Templates (PowerPoint)

Windows 8 Wireframe Templates - Wireframe Template & Toolkit

A free collection of PowerPoint slides for wireframing Windows 8 apps; includes 240 app icons.

Windows 8 Wireframe Templates →

Wireframe Stencils (PowerPoint)

Wireframe Stencils - Wireframe Template & Toolkit

A small set of UI shapes for creating wireframes of desktop and web applications in PowerPoint 2003 and newer releases.

Wireframe Stencils →

Keynotopia: User Interface Design Libraries (Keynote, PowerPoint, OpenOffice Impress)

Keynotopia: User Interface Design Libraries - Wireframe Template & Toolkit

Keynotopia is a huge commercial collection of low and high fidelity UI components for use in Keynote, PowerPoint and OpenOffice.

Keynotopia: User Interface Design Libraries →

Keynote Kung-Fu: Wireframe Toolkit (Keynote, PowerPoint)

Keynote Kung-Fu: Wireframe Toolkit - Wireframe Template & Toolkit

Similar to Keynotopia, Keynote Kung-Fu provides dozens of UI templates for use with Keynote and PowerPoint.

Keynote Kung-Fu: Wireframe Toolkit →

Sketchit for iPhone App Wireframes (Keynote)

Sketchit for iPhone App Wireframes - Wireframe Template & Toolkit

Sketchit is a collection of Keynote slides that can be used for creating wireframes of iPhone apps.

Sketchit for iPhone App Wireframes →

WireKraft Wireframe Kit (Keynote)

WireKraft Wireframe Kit - Wireframe Template & Toolkit

Another collection of templates for wireframing iPhone, iPad, Android, and Windows Phone apps using Keynote.

WireKraft Wireframe Kit →

Stencils for Information Architects (Visio)

Stencils for Information Architects - Wireframe Template & Toolkit

Visio stencils that are designed to aid the work of an information architect. The resource includes stencils for wireframes, sitemaps, and process flows.

Stencils for Information Architects →

Spoon: Mobile Wireframe Kit (Photoshop)

Spoon: Mobile Wireframe Kit - Wireframe Template & Toolkit

A clear and elegant kit of wireframe controls for use with iPhone and iPad apps. The collection also includes hand gesture illustrations.

Spoon: Mobile Wireframe Kit →

Photoshop Wireframe Kit (Photoshop)

Photoshop Wireframe Kit - Wireframe Template & Toolkit

A free, simple website wireframe kit that includes elements such as headings, bullet lists, form fields, image and video controls, etc.

Photoshop Wireframe Kit →

Photoshop Wireframing Tool (Photoshop)

Photoshop Wireframing Tool - Wireframe Template & Toolkit

A wireframing kit that consists of 175 vector-based custom shapes for use in Photoshop. It is priced at $19.

Photoshop Wireframing Tool →

Wireframe UI Kit (Photoshop)

Wireframe UI Kit - Wireframe Template & Toolkit

A free kit containing 60+ editable wireframe templates for many of the typical elements used in web design.

Wireframe UI Kit →

Web Design Wireframe Kit (Photoshop)

Web Design Wireframe Kit - Wireframe Template & Toolkit

Another kit for creating website wireframes in Photoshop and Adobe Illustrator. The kit consists of over 120 UI elements.

Web Design Wireframe Kit →

Mini Wireframing Kit (Photoshop)

Mini Wireframing Kit - Wireframe Template & Toolkit

A PSD template for cute little miniature wireframes, includes a pixel font for dummy text.

Mini Wireframing Kit →

Web UI Wireframe Kit (Photoshop)

Web UI Wireframe Kit - Wireframe Template & Toolkit

A free collection of scalable Photoshop shapes and smart objects that can be used to create website wireframes.

Web UI Wireframe Kit →

Konigi Wireframe Stencils (OmniGraffle)

Konigi Wireframe Stencils - Wireframe Template & Toolkit

A rather large set of shapes for making wireframes of websites and mobile apps in OmniGraffle.

Konigi Wireframe Stencils →

Web Wireframe Stencils (OmniGraffle)

Web Wireframe Stencils - Wireframe Template & Toolkit

Another OmniGraffle stencil that is designed to allow users to quickly create simple wireframes of websites and web applications.

Web Wireframe Stencils →

Wireframe Sketch (OmniGraffle)

Wireframe Sketch - Wireframe Template & Toolkit

An awesome template of hand-sketched wireframe controls for OmniGraffle.

Wireframe Sketch →

elwebUI: Web Wireframe Kit (OmniGraffle)

elwebUI: Web Wireframe Kit - Wireframe Template & Toolkit

A relatively complete collection of commonly used user interface elements for web projects.

elwebUI: Web Wireframe Kit →

ZURB iPad Stencils (OmniGraffle)

ZURB iPad Stencils - Wireframe Template & Toolkit

A great looking stencil and some sketch sheets for quickly creating low-fi wireframes for the iPad.

ZURB iPad Stencils →

Adobe Fireworks Wireframing Kit (Fireworks)

Adobe Fireworks Wireframing Kit - Wireframe Template & Toolkit

A free and handy wireframing kit, handcrafted by Hannah Milan with Adobe Fireworks.

Adobe Fireworks Wireframing Kit →

Dragnet Website Wireframes Kit (Fireworks)

Dragnet Website Wireframes Kit - Wireframe Template & Toolkit

Another wireframing kit for Fireworks. The kit consists of over 25 common web design elements such as scrollbars, buttons, menus, etc.

Dragnet Website Wireframes Kit →

Wireframe Kit (Google Drawings)

Wireframe Kit - Wireframe Template & Toolkit

A set of blue-colored wireframe templates for use in Google Drawings, a component of Google Docs.

Wireframe Kit →

iPhone Wireframe UI Kit (Sketch)

iPhone Wireframe UI Kit - Wireframe Template & Toolkit

A kit for creating wireframes of iPhone applications in Sketch (a powerful vector-based design tool for Mac OS X).

iPhone Wireframe UI Kit →

Conclusion

I hope you have found our compilation of helpful resources useful and that there is something in the list that suits your needs. Please share your thoughts and experiences in the comment section below. I’d also be glad to hear of any further resources that I may have missed in the collection and you would like to recommend.

August 2nd, 2011

ProWorkflow the best way to improve your projects management

ProWorkflow the best way to improve your projects management

When you leave the common employer system, to start a new activity, as well as in freelance or starting your own business, you agree to manager new tasks which are normally not yours.
You have to manage a planning, delays, problems to fixe, your customers and their needs….the list is really long. Many companies do not use help of specialists to execute these tasks, doing them as well as they can, from this type of management, it results a work that is longer than it could be and also loosing contracts…..if you arrive at this point, then, it is better to think about software to manage these tasks.

Pro Work Flow is one of these good software, which help you to manage all activities attached to your activity : Projects management, tasks management, data exchange, budget controlling….which avoid you to waste your time and taking you business on the good way.

This application gives you the possibility to join the three main points needed for the success of your projects: the tasks and the time and the people working on it, and each of them will be able to access the planning (though the web) to follow up its statement and to get ahead regarding his own tasks. All want you need to manage your business is part of ProWorkFlow and its use is easy and intuitive.

Proworkflow

We can now see ProWorkFlow in details. When arriving on the home page, it is possible to get an overview of your complete activity, by a quick look on it, it is really useful. From this home page, you can also access all other specific parts of this tool.

Proworkflow

The projects

This page includes all projects in process or closed. Using this list of projects, you can reach one of them and check its statement, and for sure, you can add new tasks or workers, etc….This page is really important because it represents the heart of your activity.

Proworkflow

The tasks

All tasks of all projects are shown on this page, easy for you to follow the work will have to do in the next days. Really useful for tasks getting behind or tasks you forgot or you let on the left.

Proworkflow

Time management

Time is money, for this reason ProWorkFlow give you a complete tool to manage your time through a planning or to record the time you used to execute each task, or the work-time of each worker.

Proworkflow
Proworkflow

Reports

You can easy create reports which you can download under a XML or CSV format.
Create reports about your business, in general or by sector like the activity by worker, by project, by delay like a month or a week.

Proworkflow

Under ProWorkFlow, you can find other pages, all useful and with good reasons to exists. All of them will avoid you to waste your time.

For sure, you and all of your employees, will need some time to be efficient on this tool, but I can ensure you, if you make the effort to do it, you will have no regrets then you will see the high benefits you will get back using this software.

Visit the website ProWorkflow

May 10th, 2010

30 Visually Appealing Web Portfolio Designs


A portfolio design is a reflection of the skills and talents of the designer that owns it. Often, the hardest web design is creating your own portfolio, and thus, can take a lot of the designer’s time to create and finish. This collection is a follow up of the showcase called, "25 Impressive Portfolio Web Designs" which you should view as well.

Feast your eyes on some of the web’s most beautiful online portfolios.

1. camellie

camellie

2. Fool’s House

Fool's House

3. Ed Peixoto – I create Flavors

Ed Peixoto - I create Flavors

4. COO/COO CORE Graphic

COO/COO CORE Graphic

5. n.design studio

n.design studio

6. Fully Illustrated

Fully Illustrated

7. Attack of the Web

Attack of the Web

8. Ekin Yalgin

Ekin Yalgin

9. Twenty3design

Twenty3design

10. Jirí Šebek

Jirí Šebek

11. Nathan Sanders

Nathan Sanders

continue reading…

May 3rd, 2010

Create a Grungy, Translucent Web Portfolio Design

Not only have watercolor brush strokes become a popular trend in modern web design, but so have advanced layers of transparency (or what I call, translucence). The new Envato design has received a lot of kudos for using this effect, and this tutorial will show you how to create a similar effect, while combining it with other popular web trends.

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Tutorial Details

  • Program: Adobe Photoshop CS3+
  • Difficulty: Intermediate
  • Estimated Completion Time: 2 hours

Step 1 – Set up the Template

Let’s set up our document. I tend to create my sites with a fixed 960px width and variable height. For this tutorial, I chose a height of 800px to ensure we have enough room for all of the content sections we would like to include. Creating the original document at the exact size you want the site to be makes it easier for creating the guides.

Next, we’ll set up our guides. Drag guidelines from the document rulers to the four edges of your document.

Now we need to allocate some space for the background we’ll create. Go to Image > Canvas Size and expand the document to 1100 pixels by 1000 pixels. This should give us plenty of area to fill in our unique background.

Fill the bottom layer with white (Shift + F5). Rename this layer as “background.” Your document should now look like the image below.

Step 2 – Create the Gradient Background

Right-click the “background” layer, and choose Blending Options. We’ll be adding a Gradient Overlay to our “background” layer. I chose a three color gradient with some blues and tans, however you can essentially choose any colors you want. The beauty of using the Blending Options for the background is that at any time, you can easily switch out colors and adjust the gradient to taste.

Your document should now look like this:

You may want to skip this step, however I feel the sharp gradient is a little too glossy for this design. We’ll add some noise to tone it down a bit.

Create a New Layer. Rename this layer “noise.” Next, fill the layer with white (Edit > Fill). Once you have the layer filled with white, we need to add some noise by applying Filter > Noise > Add Noise. Set the Amount to 400%, with a Uniform Distribution and non-Monochromatic. All of the colors of the noise will give us much more depth in our background.

Set the “noise” layer to Multiply, and set the Opacity to 5%. This should give us just enough graininess to tone down the gradient.

Step 3 – Add the Texture (Brush Strokes) to the Background

First, you’ll need to download some Brush Stroke brushes, if you don’t already have them. Here is some I’ve used in the past: “Brush Stroke.”

Create a new layer, above your “background” and “noise” layers. Rename this layer to “brush1″ (we’ll be creating multiple layers like this). Set this layer to Multiply. Choose a warm foreground color (to offset the cool tones) in our blue gradient background. I chose a warm brown: #996726. Select the brush you wish to draw, and place it in the top left of the document, ensuring that the brush stroke is outside the bounds of your guidelines (we want the background to expand outside).

Adjust the layer Opacity to 50% (so the graininess shows through). Repeat the previous two steps for multiple brushes to suit your taste. Your background should now look like the image shown below.

Congratulations, your custom, unique background is complete. Since you placed the brushes randomly, it will differentiate you from those designs that bought a similar stock background.

Step 4 – Create the Inner Opaque/Translucent Container

First, we’ll need to grab the Rounded Rectangle Tool, and set the radius to 20px. Above all of your background layers (brushes + noise + gradient), drag and draw a rounded rectangle within the original guidelines we set up. Your rectangle should be 960px by 800px. Rename this layer “container,” and Right-click the layer, and select Rasterize Layer (we’ll be making some changes to this layer later, so we might as well get this out of the way now).

To make the “container” layer look opaque, we’ll need to do a few things:

  1. Set the “container” layer’s Fill to 0% (we’ll be using the Color Overlay layer style to give it some color).
  2. Add a Drop Shadow: Opacity of 41%, Angle at 90, Distance of 0, Spread of 1, and Size at 10
  3. Bevel and Emboss: Style of Inner Bevel, Technique set to Smooth, Depth at 100%, Direction of Up, Size at 20px, Soften of 0px, Angle at 135, Altitude at 58, Highlight Opacity at 27%, and Shadow Opacity set to 15%
  4. Color Overlay: White with an Opacity of 73%
  5. Stroke: Size of 1px and Opacity at 100% (to give it that extra bit of depth)

Once you’ve set all the layer styles, your “container” layer should look like this:

Step 5 – Set Up the Inner Padding Guides

To ensure that we stick with consistent padding on the “container” layer (assuming we don’t want to count our pixels each time we place an element), let’s add guides at 40px inside our original guide box.

Step 6 – A Cutout Navigation

As you saw in the Final Preview, we want to make the navigation look like it is sunken or cut out of the “container” layer. To do this, we’ll just remove some of the “container” layer and let the Layer Style’s do their magic.

To create the selection for the cutout, we’ll create a new rectangular shape in the space that we want the navigation cutout to be. Use a radius of 10px here (which is half the radius of the “container” layer), to ensure that the corner has consistent spacing where it is rounded.

If necessary, move the shape to the top right of your inner padding guide lines. Once you have the layer in place, Command-click the layer in the Layer’s Palette so it is selected. Choose the “container” layer and hit Delete. You can now hide your 10px rounded rectangle for the navigation, and your “container” layer will now show a cutout as seen below.

Notice how smooth the rounded corners are. If we would have just selected a square area and rounded the selection, the cutout corners would have looked very choppy. Also, isn’t it nice how the Layer Style’s are automatically applied to the layer, and all of the beveling and shadows we added look great.

Now we need some text. I chose Rockwell as my font (it comes standard with MS Office, but can also be purchased). Evenly space your navigation elements within the cutout as shown.

We want to give the text an etched in stone effect, and to do this, we add a drop shadow to the text (we could also add an inner shadow, however it makes the text appear thinner than it actually is). Here are the drop shadow settings I generally use.

Step 7 – Active Navigation Woven through the Page

To achieve the desired effect, we’ll create a new layer just below the text we added for the navigation. Rename this layer “active nav.” Fill this selection with any color (it doesn’t matter).

Next, we’ll need to add some Layer Styles to the “active nav” layer. I’ve provided them below (you’ll need a Drop Shadow, Gradient Overlay, Stroke, and Inner Glow).

Duplicate your “active nav” layer (Command + J), and flatten all of the layer styles. Rename this layer “active nav flattened.” We’re going to be applying some crops to this layer, and we don’t want the layer styles any longer.

Use your Selection Tool to delete the Stroke and Inner Glow from the top and bottom of the “active nav flattened” layer.

Now we need to add the shadows to make the “active nav” layer look like it’s woven through the “container” layer. We’ll create these shadows using the Ellipse Tool.

Create a black ellipse that is 20px wider than the width of the “active nav flattened” layer and roughly 5px tall. Center your ellipse on the top edge of the “active nav flattened” layer. Right-click the layer and select Rasterize Layer. Rename this layer to “top active shadow.”

We need to blur the ellipse a bit, go to Filter > Blur > Gaussian Blur and apply with with a radius of 2px. Now that the ellipse looks more like a shadow, we’ll go ahead and delete the top 50% of the shadow.

Adjust the Opacity of the “top active shadow” layer to 75%. The top shadow is done. To create the bottom shadow, duplicate the layer (Command + J), apply Edit > Transform > Flip Vertical, and move the shadow to the bottom of the “active nav flattened layer.”

Step 8 – Finish Out the Header With a Logo

Before we get to the logo, let’s finish out our header a bit. First we’ll add a couple more guides. Draw a horizontal guide 40px below the bottom of the navigation cutout as shown.

We’re going to create our separating line, which will give the impression that the “container” layer has an etching or is folded at this spot. To create this effect, draw a 1px heigh horizontal line on a new layer running the width of the “container” layer. Fill your horizontal line with a dark green (I chose mine from the background). Rename this layer “separating line.”

To get the etching feel, duplicate the “separating line” layer and fill this layer with white. Move this layer 1px down so the top of it touches the original “separating line” layer.

Now we need to add our logo. I’m not much of a logo designer, so I just chose a cool font (Gill Sans) and wrote some big text in the top left corner. Just as we did the cutout for the navigation, make a selection of the logo text and then delete it from the “container” layer. Once again the Layer Styles will adjust to the new shape, and update to it.

The asterisk was done using the exact same technique as the active navigation element, to make it appear like it is sticking out of the “container” layer.

Step 9 – Featured Portfolio Items

Once again, we’re going to use the same cutout technique that we used for the navigation section.

Create a rounded rectangle with a border radius of 10px. Make sure to allow for 40px spacing on all sides (we created the guides earlier to help with this).

Command-click the rounded rectangle layer to select it, then select the “container” layer and hit Delete. You can remove the rounded rectangle as we won’t use it any longer.

We then need to create the arrows on each side, so you can have multiple portfolio items on the front page and toggle through them in a sort of slideshow. To do this, create a 40px diameter circle with the Shape Tool. Move the circle in place on the left side, centering it on the edge of the cutout.

Duplicate the circle for the other side, and once again center it on the other edge of the cutout (horizontally and vertically).

Important

Since we aren’t working with vector masks here (and our Fill is set to 0% on the “container” layer), we need to momentarily adjust this to ensure we can add on to the “container” layer.

So, let’s set the Fill of the “container” layer to 100%. Now Merge Down (Command + E) both of the circles we created for the arrows into the “container” layer. Once you have merged down, you can then set the Fill of the “container” layer back to 0%. Here is your desired effect:

Notice how the two circles have now become part of the “container” layer.

Next we’ll need to add some arrows. You could easily create them using brackets, however I chose to create my own.

Create a rounded rectangle with a Border Radius of 3px, Width of 20px, Height of 6px; and place it right above where you want the arrow. Transform and Rotate (Command + T) the rounded rectangle by 45 degrees counter-clockwise so it is tilted. This is how we will make the point to the arrow.

Duplicate the rounded rectangle (Command + J), and Edit > Transform > Flip Vertical. Move the layer in place, such that the left corners are lined up producing a bracket. In the Layer Palette, select both rounded rectangles and merge the layers together (Command + E). Rename the layer “left arrow.” Here is how your arrow should look:

We need to add some Layer Styles to the arrow to make it fit with the rest of the design as follows:

  1. Fill: 0%
  2. Inner Shadow: Opacity of 50%, Angle at 120, Distance of 2, Choke set to 0, Size of 3, and Noise at 0

Duplicate the “left arrow” layer (Command + J), and Edit > Transform > Flip Horizontal. Rename this layer “right arrow,” and move it to the right side of the cutout.

One last thing we need to add for our featured portfolio items area is a shadow to give it some depth. Add a transparent to black gradient at the bottom of the cutout as shown.

To trim off any excess gradient outside of the cutout, simply Command + Click the “container” layer and hit Delete. We’ll be placing our screenshots below this layer to give the illusion of depth.

Step 10 – Adding a Portfolio Item

Take a screenshot of your favorite site (I used one of my own portfolio, ryanscherf.net). Rename this layer “screenshot.”

Add a Stroke and Inner Shadow to the “screenshot” layer use your Layer Styles:

Duplicate the “screenshot” layer, and flatten all of the layer styles (merge the “screenshot copy” layer with a new, blank layer). Rotate the “screenshot copy” layer 45 degrees counter-clockwise, just as you did for the arrows in Step 9.

Place the screenshot at the bottom left of the portfolio cutout, ensuring that the top of the screenshot sticks out of the cutout (we’re going to be giving it some depth) and making it look like it’s tucked behind the “container” layer. Crop any excess of the “screenshot copy” from the bottom as shown.

Now that we have our screenshot in place, let’s add a short description to the right. Nothing too fancy here, but still trying to stick with our theme of depth and layers.

Create some text with an almost white (or very light blue/green) color. Use the same drop shadow etching technique from the navigation (Angle at -60 degrees, Distance of 1px, and Size of 1px).

Create an opaque square behind the text. I used an all black layer, at 30% opacity. The effect should look like this:

We need some navigation dots like the iPhone views. We’ll create one active dot, that will use the exact same Layer Styles as the “active nav” layer (hopefully you didn’t delete it), and an inactive dot which uses the Layer Styles from the “left arrow” layer.

Note: Reusing Layer Styles is important not only because it saves time from having to recreate similar styles, but also because it will keep your design consistent throughout.

Create a circle using the Shape Tool, with a diameter of 20px (I like my navigation dots large, as I find sometimes they are too hard to click and navigate through). Right-click the “active nav” layer and select Copy Layer Style. Select the circle from your Layers Palette, Right-click, and select Paste Layer Style.

Repeat these steps for as many inactive dots as you’d like, making sure to use the layer style from the “left arrow” layer.

Step 11 – Label it With a Ribbon

We need to let our visitors know exactly what we are showcasing here. We’ll create a ribbon using the exact same technique as we used for the “active nav” layer, which was outlined above in Step 7.

April 14th, 2010

Outstanding Artworks of Josh Keyes

Josh Keyes was born in 1969 in Tacoma Washington. Keyes graduated from the School of the Art Institute of Chicago, and later received his MFA in painting from Yale University. Josh’s work brings to mind the detail and complexity of natural history dioramas, and the color and diagrammatic complexity one might find in cross section illustrations from a vintage science textbook. His work has developed over the past years into an iconic and complex personal vocabulary of imagery that creates a mysterious and sometimes unsettling juxtaposition between the natural world and the man made landscape

He weaves his personal mythology through fractured and isolated landscapes that are either overgrown with vegetation or underwater, and often depict historic or military monuments covered with graffiti. The imagery functions as a way for Keyes to express his personal experience and also allows him to comment and interpret events in the world. His work has been featured in numerous publications and exhibited in galleries in New York, San Francisco, Los Angeles, Seattle, and Denver. Keyes currently lives and works in Portland Oregon.

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

Outstanding Art Works of Josh Keyes

March 26th, 2010

Beautiful Graphic Design Works of Radim Malinic

Radim Malinic has firmly established himself over the last few years as one of the most successful and prolific commercial illustrators working today. His sought after work has earned him reputation of one of the hardest working person in the creative industly with a who’s-who’s client list in the advertising world of household brand names. Based on his award winning work he has become renowned worldwide for the passion and intricate detail.

Under the name of Brand Nu, he tells stories in vibrantly colourful images throught mixtures of shapes, handrawn elements and photo manilpulation, evoking subtle emotions, feelings and excitement. You’re likely to spot Brand Nu work wherever you go, the ever so expanding portfolio extends from product advertising, interior murals, print ads, album covers and full promo campaigns to book and magazine covers, masterclass turorials, limited edition prints and lots more.

Continue Learning…

March 11th, 2010

100 Artworks from the Top Digital Artists in Asia

1. Luke Lucas

Representing: Melbourne, Australia

There are those who are good with typography and then there are those who are amazing at it. Luke Lucas is definitely in the latter of those categories. Anyone who can create a font entirely out of tongues is pretty amazing to me. He is also an editor at fairly popular blog called Life Lounge.

2. Justin Maller

Representing: Melbourne, Victoria, Australia

“Justin Maller is a freelance illustrator and art director based in Melbourne, Australia. He has been creating digital art for over eight years, and has produced professionally in both a private and studio based capacity for the last two.”

3. Liu Zheng aka 96k

Representing: Beijing, China

“96k was born in a port city of developing country(CHINA), deeply influenced in his childhood by the different foreign cultures and religions, he addicted himself both into the exotic & traditional arts, At early, adoring the sprint,he was trained to be an excellent professional sprinter, however because of many reasons he had to quit, in future days, art focuses all his energy. As most artists who pursue the liberty, he stopped his school life to start his own art career after graduated from university.”

4. Nod Young

Representing: Beijing, China

“Nod has carved a niche in the realm of enterprises looking to make their marks both within and beyond China. As the Co-Founder and Creative Director of Khaki Creative & Design, Nod leads a team of multicultural artists and designers that uses clean and strong visuals to fulfill diverse marketing strategies. At the same time, Nod has helped to create an environment that fosters creative ideas both for himself and his team.”

5. Shadow Chen

Representing: Ningbo, China

Shadow Chen was originally born in China. He also originally went to school for product design. During his post graduate, he decided that he wanted to be an illustrator. After that thought, there was no looking back. Now he has his dream job doing illustrating work for anything from web design to package design!

6. Ipang Bangsad

Representing: Phnom Penh, Cambodia

Ipang Bangsad is a cool vector illustrator and designer from Cambodia. His work has the look and feel of that classic tattoo style which is as timeless as some of Ipangs designs. Although he seems to really favor the classic flash art style, he isn’t limited to it. He seems to have mastered a number of various design styles.

7. Mike Chan

Representing: Hong Kong (historical), Hong Kong

Mike seems to have a passion for all types of design mediums. While it looks as though his design skills are what bring in the bacon, he also has quite an eye for photography. His love for design started at the wee age of 13. At 15 he created his first web site design, at which point his high school at teacher saw his skills and encouraged him to create the schools website.

8. Calvin Ho

Representing: Quarry Bay, Hong Kong

“Atomic Attack is the personal website of Calvin Ho. AA was formed in 1997. Working on a wide range of projects that cover design, art direction, illustration & motion for the music, fashion, art, film & entertainment industries. Below are some past projects which are not directly related to design as such but more of Calvin’s love with music, magazines, collecting toys, writing and creating interesting online projects.”

9. ISE

Representing: Bangkok, Thailand

The designer currently known to me as “ISE” caught my attention because “they” have a cool style that is very much their own. It almost reminds me of a more modern version of the artwork you used to see in salons and fashion magazines during the 80’s. I think the combination of this slightly retro style mixed with modern trends really makes it stand out.

10. Sajith Jayaweera

Representing: Colombo, Sri Lanka

While probably a lot lesser known than many of the names on this list, Sajith portfolio work on Behance stood out to me because of how unique it was. So many talented designers are just playing off each other and the current trends. While Sajith has some trendy styles, I like that many of his works have a style not widely seen. It is styles and ideas like this that start trends.

11. Mac Funamizu

Representing: Tokyo, Japan

“For the first 10+ years of my career, I had been a teacher of English and an interpreter. Changed my career path in 2005 to become a designer. By combining my presentation methods and visualization skills which I acquired through my teaching career and design sense, I can always create user-centered designs that captivate and magnetize users’ attention. I believe that design is communication.”

12. Gaku Imai

Representing: Okayama, Japan

“Gaku Imai is a freelance illustrator / graphic designer based in Okayama, Japan. PEANUTS TASTE is the creative identity of Gaku Imai.

He loves cute objects, funny gadgets, mechanical parts and unique characters. He uses contrasted vivid colors with heavy outline.”

13. Filter017 Graphic Design

Representing: Taipei, Taiwan

“Filter017 was created by Enzo, Wen, and Nick since 2004. Our team consists of Mixed Sauce & Wonder Work + 99% passion towards creation.
We infuse unique graphics into all kinds of design.”


Continue Reading…

March 4th, 2010

100 Artworks from the Top 20 Digital Artists in South America

Last time we scoured Europe for the best Photoshop talent going around. This week we’re turning to beautiful South America to uncover 20 of the top digital artists on the continent. Is your country or city represented?

1. Pablo Alfieri

Representing: Buenos Aires, Argentina

“Pablo Alfieri is a graphic designer and illustrator born in 1982 in Buenos Aires, Argentina. In 2002 he started the career of Graphic design at U.B.A. (University of Buenos Aires), where he discovered his passion for design, illustration and typography. Since 2007 he has been working in local design studios like RDYA Design Group and Punga Visual Consorcio, and in January of 2008 he created “Playful”, a showcase of his personal works, a free space where he plays and has fun with colors, typography and geometric shapes, the bases of his creative work.”

2. Ezequiel Matteo

Representing: Buenos Aires, Argentina

Ezequiel is an outstanding character designer who also moonlights as a graphic designer. His characters are bizarre and strange, but cute all at the same time. Aside from designing a variety of characters, he has also written a few tutorials for some of the major electronic arts magazines.

3. Adolfo Correa

Representing: Santiago, Chile

Adolfo Correa is a 21 year old student of Graphic Design from Santiago, Chile. Although he may be young, he is quickly picking up on the popular styles and design trends of the modern graphic design world. There is no doubt that upon his graduation he will have a long list of clients ready to work with him.

4. Guillermo Alarcón Rivera

Representing: Santiago, Chile

Guillermo Alarcón Rivera, a designer from Santiago, has a unique style that stretches across a variety of mediums. From illustration to motion design, Guillermo Alarcón Rivera has an arsenal of design skills that seem to work very well for him.

5. Genaro DeSia Coppola

Representing: Barcelona, Venezuela

Genaro DeSia Coppola is an amazing vector and flash artist with a style that is very much his own. If you think that his vector art is cool, than you are sure to love his flash work. His flash work takes his vector art to another level by adding color and movement to it.

6. Diego Diaz

Representing: Guatemala City, Guatemala

Diego Diaz is a graphic design that comes from Guatemala City. Many of his designs seem to feature a reggae roots and natural style to them. I can only wonder if this has something to do with his surroundings and lifestyle.

7. Ricardo Ajcivinac

Representing: Guatemala

It seems that Ricardo’s first love is graffiti art, but his skills aren’t limited to spray paint and concrete walls. He also excels at illustration and even some forms of photo manipulation.

8. David Galdamez

Representing: Guatemala City, Guatemala

David Galdamez comes to us from Guatemala City as well. He is one of those designers who is lucky enough to also have some traditional arty skills such as drawing and sketching. He does a great job at combining his two skills together to create unique pieces.

9. MASA

Representing: Caracas, Venezuela

“MASAs work has a strong emphasis in the research of Latian American pop and worldwide contemporary street culture. The result is a crossover where urban and folklore references get blended together to produce fresh ideas and strong brand identities in every work.”

10. César Evangelista Bautista

Representing: Mexico Distrito Federal, Mexico

If you ask César Evangelista Bautista what it is he loves to do, he will tell you illustration. With such an awesome portfolio, it is easy to see that hes not lying. His character designs are hands down some of the coolest ones I have seen in a while.

11. ROAN

Representing: Mexico City, Mexico

ROAN’s illustration and digital manipulation work – often blended together beautifully – explores many different styles and themes.

12. Juan Molinet

Representing: Buenos Aires, Argentina

Juan’s surreal cartoon-like illustrations are highly sought after – and with good reason!

13. Fabio Sasso

Representing: Porto Alegre, Brazil

“I’m a graphic, web designer and the co-founder of a design studio called 3YZ Digital Performance and I run a blog called Abduzeedo where I share my thoughts, cool sites, and tutorials.”

14. Cristiano Siqueira

Representing: Sao Paulo, Brazil

“I started my career working with graphic design in books, magazines and CD covers. Some years later, I went to packaging design, producing for the food and toy industry.
After 7 years of experience, I finally felt confortable to start as a freelance illustrator. So, since 2005 I am an illustrator full time, working from my own “home” office, doing illustrations for packaging and graphic design, publishing, advertising and everything that needs to be illustrated. “

February 17th, 2010

100 Artworks from the Top 20 Digital Artists in Latin America

1. Pablo Alfieri

Representing: Buenos Aires, Argentina

“Pablo Alfieri is a graphic designer and illustrator born in 1982 in Buenos Aires, Argentina. In 2002 he started the career of Graphic design at U.B.A. (University of Buenos Aires), where he discovered his passion for design, illustration and typography. Since 2007 he has been working in local design studios like RDYA Design Group and Punga Visual Consorcio, and in January of 2008 he created “Playful”, a showcase of his personal works, a free space where he plays and has fun with colors, typography and geometric shapes, the bases of his creative work.”

2. Ezequiel Matteo

Representing: Buenos Aires, Argentina

Ezequiel is an outstanding character designer who also moonlights as a graphic designer. His characters are bizarre and strange, but cute all at the same time. Aside from designing a variety of characters, he has also written a few tutorials for some of the major electronic arts magazines.

3. Adolfo Correa

Representing: Santiago, Chile

Adolfo Correa is a 21 year old student of Graphic Design from Santiago, Chile. Although he may be young, he is quickly picking up on the popular styles and design trends of the modern graphic design world. There is no doubt that upon his graduation he will have a long list of clients ready to work with him.

4. Guillermo Alarcón Rivera

Representing: Santiago, Chile

Guillermo Alarcón Rivera, a designer from Santiago, has a unique style that stretches across a variety of mediums. From illustration to motion design, Guillermo Alarcón Rivera has an arsenal of design skills that seem to work very well for him.

5. Genaro DeSia Coppola

Representing: Barcelona, Venezuela

Genaro DeSia Coppola is an amazing vector and flash artist with a style that is very much his own. If you think that his vector art is cool, than you are sure to love his flash work. His flash work takes his vector art to another level by adding color and movement to it.

6. Diego Diaz

Representing: Guatemala City, Guatemala

Diego Diaz is a graphic design that comes from Guatemala City. Many of his designs seem to feature a reggae roots and natural style to them. I can only wonder if this has something to do with his surroundings and lifestyle.

7. Ricardo Ajcivinac

Representing: Guatemala

It seems that Ricardo’s first love is graffiti art, but his skills aren’t limited to spray paint and concrete walls. He also excels at illustration and even some forms of photo manipulation.

8. David Galdamez

Representing: Guatemala City, Guatemala

David Galdamez comes to us from Guatemala City as well. He is one of those designers who is lucky enough to also have some traditional arty skills such as drawing and sketching. He does a great job at combining his two skills together to create unique pieces.

9. MASA

Representing: Caracas, Venezuela

“MASAs work has a strong emphasis in the research of Latian American pop and worldwide contemporary street culture. The result is a crossover where urban and folklore references get blended together to produce fresh ideas and strong brand identities in every work.”

10. César Evangelista Bautista

Representing: Mexico Distrito Federal, Mexico

If you ask César Evangelista Bautista what it is he loves to do, he will tell you illustration. With such an awesome portfolio, it is easy to see that hes not lying. His character designs are hands down some of the coolest ones I have seen in a while.

11. ROAN

Representing: Mexico City, Mexico

ROAN’s illustration and digital manipulation work – often blended together beautifully – explores many different styles and themes.

12. Juan Molinet

Representing: Buenos Aires, Argentina

Juan’s surreal cartoon-like illustrations are highly sought after – and with good reason!

13. Fabio Sasso

Representing: Porto Alegre, Brazil

“I’m a graphic, web designer and the co-founder of a design studio called 3YZ Digital Performance and I run a blog called Abduzeedo where I share my thoughts, cool sites, and tutorials.”

14. Cristiano Siqueira

Representing: Sao Paulo, Brazil

“I started my career working with graphic design in books, magazines and CD covers. Some years later, I went to packaging design, producing for the food and toy industry.
After 7 years of experience, I finally felt confortable to start as a freelance illustrator. So, since 2005 I am an illustrator full time, working from my own “home” office, doing illustrations for packaging and graphic design, publishing, advertising and everything that needs to be illustrated. “

15. Rodrigo Francisco

Representing: Center East Region, Brazil

“I’m an 19 years old Designer & Illustrator, born and raised at the Center East Region of Brazil. Currently working as a Freelancer. Self-taught until Mid 2008, I have just finished my second semester at UCG Design School, Brazil.”

16. Juan Hodgson

Representing: Panama City, Panama

A bright, glossy style is the hallmark of Juan Hodgson’s digital artwork. He regularly switches between illustration and photo manipulation.

17. Kochi Dowel

Representing: Panama City, Panama

“Hi everyone! I’m Osvaldo Restrepo best known as “Kochi Dowel” I’ve 22 years old and I’m a Graphic Designer from Panama city, Panama (Central America) I’m lead designer at McCann Erickson Panama and I do freelancing too if i got time… well that’s it I think, oh oh yep my favorite band is The Deftones”

18. Jorge Aguilar / REAKTOR

Representing: Guadalajara, Mexico

“Reaktor is the human condition that empowers you to think by yourself and transcend. It’s one that raises his voice and never gives up. It’s not following trends, but having the power to create them and modifying what surrounds you. It’s having a solid argument and an unbreakable will. Reaktor is to live maximizing your own essence.”

19. Alex Rivera

Representing: Mexico

“Graphic Designer trying have fun at the work, I love the Type, Creative Messages, Art Direction, Travel, Rol in projects and illustrate”


see more Artworks here….