Noupe » Showcases

Showcase of Online Artist and Design Portfolios

Robert Bowen — Wed, 15 Jun 2011 10:00:22 +0000

Throughout the creative fields, like with art and design, getting your work out there for an audience to find and connect with is essential. Taking your work online is a major outlet that many designers and artists opt for, especially given the versatility that the web offers. With so many options for displaying their work, the internet has a bevvy of brilliantly designed and developed portfolios that we can sort through for inspiration.

But what is more, is that we can also look through them to gain some hints on what works and what doesn’t for those times when we have to put together a portfolio for ourselves or our clients. There are not many tricks to remember that go beyond the usual ones we apply when designing. One that does stick out is to not allow the design to steal focus from the work it is meant to be highlighting.

Below we have gathered a mere handful of the online portfolios that are available fodder for this type of showcase, and presented them here with a slight breakdown of the designs. Take a look down through them and see the highlights that we have offered before you check out the portfolios for yourselves to see just what exactly we are talking about here.

Daarken

The portfolio of fantasy artist, Daarken is filled breathtaking works, and are arranged and highlighted wonderfully by the site’s design. With large previews of the work, and a java based side scrolling setup, the site is very simple and throws all the focus on the work. However, the scrolling could cover more ground with each click. As it stands, the scrolling only moves through a couple of images at a time which gives it somewhat of a jumpy sort of feel.

Lesly Garreau

Lesly Garreau’s web design portfolio site is graphically great, and nicely compact. The small previews of Lesly’s designs being taped up to the page work well to compliment the site and the whimsical nature of his work. The site itself further acts as an extension of the portfolio, which is one of the rare occasions when the site can steal focus from the work and not have it become a portfolio no-no.

Micah Lidberg

Micah Lidberg’s illustrations and other works are the main highlight of this very minimalistic site, just as they should be. The navigation is very understated which works for the most part, but as it follows you down the page, it easily becomes lost in the works scrolling behind it. When you click on the previews and go into the deeper pages, there is a largely exaggerated and unnecessary gap at the bottom of the page. This makes it feel like there should be more on the pages than there is.

Dropr

Dropr is a relatively new service for creatives that is still in beta, but still worth checking out. Very much in the style of Behance, this network is easy to use, and promises to be more powerful than most. The design is both stylish and imaginative, and on the main page, does stand in the spotlight which should be falling on the work. In fact the works being showcased are somewhat buried at the bottom of the page below the bells and whistles of the main site header. Unlike other portfolio communities which always seem to be highlighting the work, Dropr takes the center stage when you first arrive. The inner pages which display the work are much simpler and do not take the attention off of the work like the main page.

Zuttoworld

Russian illustrator Zutto’s portfolio is another fantastically minimal site design which lets the artists work do most of the heavy lifting. The large bold font on the plain, expansive background make the site feel open and comfortable for the viewer. The pieces drop down below the titles when you click on them, and the images remain open until you click on another title. The one flaw here is that you cannot click on the same title to close the image once it is opened. Clicking on the title of the open piece causes a jumpy effect as the piece effectively re-opens over the top of itself, rather than just closing the preview.

Made By Water

Made By Water is the online portfolio of designer and digital artist Jordan Vitanov. With big, bold typography filling the screen in the header, the site gives the impression of a large scope portfolio, which it is. Sort of. With a few pages of design previews to cycle through, the work feels somewhat slighted by keeping it in such a small display window. Clicking on the pictures, simply brings up the next preview image for the project, but never do you get a larger presentation of each piece. This kind of breaks from the inferences that can be drawn from the over sizing of the other site elements.

Beaver Lab

Beaver Lab is a colorfully illustrated site that takes great advantage of the whitespace going for an extremely simple approach. The javascript navigation is smooth and overall, the site stands as a fine example of their web design work for the portfolio. Which is good, because the websites in their portfolio actually take you offsite and to their clients page. And as long as the client keeps the design Beaver Lab made them, the links are not that bad. But given that the rest of their work comes up in a nice shadow box on their site, it seems that they could have done the same for the websites with a images of the page rather than sending them elsewhere. The links for the work in their portfolio are also a bit too small and could stand to a size or two larger for the benefit of the user.

Checkland Kindleysides

Checkland Kindleysides is an extremely elegant and imaginative portfolio. The site is wonderfully built, very sharp and clean which compliments the teams style and image. This is another example where the entire page stands as a much more shining example of their work, with its imaginative carved paper cutout elements, than the pieces that sit somewhat lifelessly in their gallery.

Beastman

Australian artist Beastman has such an intricate and detailed style, and the site is very plain as to offset this characteristic of his work. The images are setup in large enough previews that the detail in the pieces comes out, without having to enlarge the images in any way. Overall the site perfectly contrasts the artists voice, and allows it to speak out through the gallery.

Online Portfolio of Sander Schuurman

The online portfolio of Sander Schuurman looks to be a very simple design, when in reality, it is anything but. This minimally styled portfolio has an interesting javascript presentation that allows the user to virtually flip through the various preview images contained under each project heading. The only somewhat cumbersome element of the site is the flash intro which the site could easily do without and still remain as impressive.

Square Circle

The design team over at Square Circle certainly let their skills take center stage when they crafted their site. This is an impressive and very original design for sure, and serves as an outstanding portfolio for the most part. However, part of what makes it great, is also part of its biggest flaw. As imaginative as it is, it is also very resource heavy. Not to mention that it takes over sound immediately upon entering which tends to turn a lot of users off.

Grzegorz Kozak

Grzegorz Kozak’s portfolio is another site where the fun, and whimsical nature of the page actually stand out more so than the works in the gallery. Which can have its downsides. However this is slightly offset by the large lightbox that opens up to display the work once you click on the previews. This does bring the focus and attention back to the work quite well.

Paul Noble

When it comes to portfolios that place the focus specifically on the work, the site of interactive designer Paul Noble shines. This is a near flawless design, both in form and in function. Putting the work at the forefront. With an interesting navigational system built around displaying the portfolio pieces, the site has a very sleek and professional feel to it. Though the small navigation bar that shows the arrangement of the gallery, and even displays a thumbnail of each piece when you click on its corresponding bar, does not automatically shift the gallery over to that project. This feels like an oversight or worse a malfunction.

Carl Warner

The portfolio of photographer and artist Carl Warner looks amazing on the surface. But the beauty does not go much deeper than that. Do not get us wrong, the flash based site is actually very unique and sleek. However, there is a huge problem with the functionality of the site, which spells trouble for his portfolio. Once you click on a preview image in one of the galleries and it takes you into the full image, there is no way back out. The back button in the browser is not applicable as you have not left the page, just gone deeper into the flash. There are no navigational elements present or any other ways to exit out. Also, this site does resize your browser, which gets under some users skin.

Anna Anjos

The portfolio of Anna Anjos is another fine example of the design freeing up the space to let the work speak for itself. Anna’s irreverent style and artistic voice is so unique that the design just steps aside brilliantly, with its complete minimal approach, and lets the work shine through. The navigation sits unobtrusively at the side, leaving the wide expanse of space to display the work. However, the nav elements are very light and overall subtle. Perhaps a bit too much so. Maybe a larger font or even just a bolder one would make it stand out a little more.

Fernando Volken Togni

Illustrator Fernando Volken Togni is another fantastic artist with a minimal portfolio design to allow for the work to take the proverbial center stage. Just like the last site, the simple site navigation stays off to the side, keeping the user’s eyes where they should be, on the preview images. Clicking on a preview not only opens a large version of the project, but it also provides you with a fullscreen viewing option which few portfolios have offered. The neatest part of the large view opening, is that though it seems like a new page has opened, the rest of the portfolio previews have simply moved below the large project image so that there is no need for the user to have to retrace their steps by going back.

Jeremy Geddes

Jeremy Geddes is a magnificent painter, whose portfolio site wonderfully captures the tone and feel of his work. With a simple compact page design, Jeremy’s work remains always remains the center of attention, having at least one large close up acting as a sort of header image as you browse the gallery of works. However, at first glance, and probably to some user’s confusion, the header like preview image is not clickable at all. Instead the user has to click on the small thumbnail preview, which then, instead of taking the header position, opens the image in full size in a new browser window.

Piipe

Piipe serves as the portfolio of graphic designer and illustrator Felipe Barriga. This is a very colorful and compact site which stands out more so than most of the work that sits in the portfolio. Giving the visitor a sense of Felipe’s humor and style right off the bat, but again, in a much stronger dose than is found in the works being displayed. The window that opens up allows the user to scroll through the portfolio while still keeping the overall site compact, and from pouring down below the fold.

Roya Hamburger

Roya Hamburger is a freelance illustrator and designer whose colorful, abstract works are wonderfully complimented by yet another very minimal design that overly embraces the whitespace at its disposal. Though again, this is another site where their attempt to make the navigation unobtrusive borders on too good. The small text and subtle coloring makes the navigation at times a little difficult to read.

Aleksandra Wolska

Aleksandra Wolska is a photographer and web and graphic designer with an extremely sleek and professional portfolio design that places the right amount of focus just where it is needed. On the work. Offering the viewer various options to allow them to wade through the massive gallery sorted to their preference. Each of the previews opens up into a large, widescreen lightbox to display Aleksandra’s work in all its glory.

Identity Withheld

Identity Withheld is the portfolio of designer Temi Adeniyi, whose style and work fit together with the design of the site in a very complimentary fashion. The oversized header makes the site a little bulkier than most of the others we have featured, but with her style it really does work well. It sets the tone for the work to come. The deeper pages that display and explain the various portfolio projects keep the header, which put the majority of the work below the fold. This might feel like more of a slight to the work than it does feel like complimenting it to some.

Dan Witz

Artist Dan Witz has a subtle, yet sleek portfolio that more plays into his traditional oil preferences than his often times semi punk-rock nature. The galleries are arranged by categories and presentation, with the deeper pages and previews arranged in thumbnail galleries. The full window lightbox that the larger previews open up in, is equally sleek and professional.

Bright Bulb Design Studio

Bright Bulb Design Studio is an extremely fun site the overflows with whimsy, and even the design boldness to use Comic Sans. Though given the old school comic book style and nature of the site, believe it or not, the Comic Sans font works, which a lot of designers would consider an impossible sin. Though the site does stand out so much more than most of the work as we have seen with a few others we have featured. This is also a case where the site style and nature does not really mesh well with the work it is displaying. This is handled nicely by a completely unobtrusive lightbox effect with the tiniest of this style bleeding over with the inclusion of the close button.

Molecube

Molecube is the portfolio of a mobile game development team that fits perfectly with the playful nature that you would expect from their work. However, as far as portfolios go, there is very little featuring of their work. Given that they only have one title completed and released and one on the way, there is not much to expect, but some screenshots would be nice. Something other than the explanation and a small sample image like you would expect to be on the cover of any packaging. So though the site gives you a hint as to the nature of their work, they give you little else to showcase it.

Artsybury

Artsybury is the portfolio of a designer and artist from London, whose style and sense of whimsy come through in his uniquely presented work. The shelves and photographs that hold Bradbury’s work compliment the artist and his voice, while also giving the viewer a different sort of experience than most portfolio sites offer. While the site does stand out quite noticeably, the work it displays does still rise to that same level, so the site does not overshadow the work as we have seen in others.

That is All, Folks

That wraps up this showcase. Hopefully you found some inspiring approaches that you can apply to your own work in this arena. Also, given the breakdowns, we further hope that this post can be beneficial in taking your portfolio designs to the proverbial next level. Feel free to leave your thoughts on the showcase, or on what makes or breaks them in the comment section below.

Consider Some of Our Previous Posts

10 Steps To The Perfect Portfolio Website is a post from the Smashing archives that goes over the ways to putting together a successful online portfolio.
SimpleFolio: A Free Clean Portfolio WordPress Theme is another post from the ghost of Smashing past where you can score a minimalistic portfolio theme for your WordPress needs.

(rb)

Inspirational Showcase of Type-Based Logo Designs

Aquil Akhter — Fri, 22 Apr 2011 09:30:37 +0000

A logo is the visual representation of the company that reflects the company’s business or products, all the while building up the credibility of the company. An effective logo design is one that aesthetically satisfies the target audience and possesses the potential to penetrate customers’ minds as a selling agent. It should also be simple and memorable. This is where type-based logo designs score highly, on account of their simplicity and quality.

Today’s post has collected outstanding examples of some of the most innovative text based logo designs and presented them here for your inspiration. Have a look at them and discover how you can artistically create text based logos. Do not forget to share your comments with us.

Creative Type-Based Logos

Fuel Fitness
Here they have cleverly taken the word Fuel and made it look like a shoelace to complete and drive home the idea of fitness.

Wave
At first glance it looks like a wave, but closer inspection reveals that these are actually the letters ‘w”, “a”, “v” and “e”. Isn’t it simply great?

3way
The unique typeface makes this simple logo design stick in the minds of customers and makes sure it lingers for a little bit.

Five Seven
Another creatively designed logo where numeric characters are used to send subliminal messages.

Talkmore
Simple and clean use of typography to communicate professionally with the potential clients.

Disco
This logo would easily be the most outstanding text based logo design in this entire collection. See how the old LP’s are used to write the word Disco. Creative and effective!

White Crimson
Corresponding colors are used along with a funky typography. Both the words are crafted to create the shape of a guitar.

Loop Coaching
The letters L, O, O and P are bold and colorfully used create the initial focal point and graphical elements of the logo, while the much simpler and less graphic text below it offers a nice balance.

APL Magazine
A unique and visually alluring style of writing APL as the corporate emblem.

KSS
Simple and effective text based logo design with a lite folded paper-esque graphical accompaniment.

Zoumio
The simplicity of this logo design is what is what makes it so appealing and attractive.

903 Creative
See how creatively 903 Creative has placed the numbers in their logo design. Isn’t it enough to get an idea of their creative approach?

Imagine
Can you write the word imagine without using any alphabet? Can’t make it out? See this numerically crafted logo design.

Click. Recording Studio Logo Design – Logos
A text based logo design where the letter “K” is creatively used to portray the niche the company is into.

Fall Seven
Simple yet effective text based logo where number 7 is placed in such a way that it represents a drop or fall.

Twins
Bold typeface is used along with the subtle use of a numeric character to subliminally represent the company.

Silk Skin
A slight curve is placed right in the centre of letter “S” to give it a silky feeling so that potential customers can easily relate to the logo’s message.

Vito’s Kitchen
Effective typography with right choice of color makes this simple text based logo design stand out.

Bison, Vancouver
A very popular logo design because of its creative use of negative space. See how the letters themselves create a visual representation of bison.

Antiparticle
Minimal use of color and typography to create something extraordinary is not an easy task, but here the logo designer has successfully accomplished this feat.

Corrupt Souls
This logo uses bold line work to create a sense of motion within the piece making the words ‘Corrupt Souls’ somewhat blend into the design.

ODD logotype
Yet another inspiring example of simple and neat logo design that is free from all sorts of clichés and ambiguities.

For Girls Sake
The large typograhical G created using floral and swirl patterns and then some, makes this unique logo stand out nicely.

Trust
See how the word itself portrays the true essence of trust and belief. This one is amazingly creative and a nice piece of eye candy for the collection.

LOOP
This logo was designed for a consulting company. A very neat and simple text based logo where the letters are arranged in the form of a loop.

flowww
Again the last letters are used to give this logo design a feel of movement.

One 2 Love
Hidden use of numeric characters in this logo design makes it visually alluring and out of the ordinary.

More
The letter “O” is extensively stretched to depict the feel of more. The use of color gives a very soothing impact.

Spry
Here the text based logo is created in white color against the cool light blue background. The simplicity of this logo design is making it shine.

Top Hope Pringting
This text based logo is designed by joining the initials of Top Hope Pringting in a very creative and visually engaging manner.

Xterra
A strong visual impact is created by means of using strong colors and bold typography.

Negative Reality
Negative Reality’s logo is designed by using a negative spacing technique that really stands out with its unique composition.

Fire Fly Music
Here it almost looks as if the designer was trying to capture that fluid nature of music while imitating the path of something flying through the air leaving the letters in its wake.

83 Studios
With the colorful combination of the numeric characters to create a visual identifier and focal point in this logo design, the impact of the piece is firmly in place.

Flipside
Here the F’s are cleverly deployed and boxed together to create this logo design for a company named Flipside.

Sushi
In this logo design, the dot of “I” is used as the middle dash of the “H” an iconic focal point the logo.

Oceanic
Creative use of typography makes this simple text based logo design a perfect and effective corporate identity.

Catch Motion Logo
The placement of letters in this logo design gives the impression that the letter “m” is being caught by the letter “C”. Creative use of typography.

Novo
Another creative use of typography that sets this logo design apart from the others in this collection.

Precision Networking
This company offers a sense of precision imparted through their logo design, allowing potential customers to get an idea of what to expect from them.

Cloud9
In this logo design, clouds are created by carefully crafting the number 9 so that there will be no need for any further graphics.

A2B Concepts
This logo design was created for A2B Concepts which is a business development or marketing company that helps other businesses getting from Point A to Point B. They have made their philosophy of work very clear in their logo.

Number Eleven
Here the logo designer has very skillfully used the numeric characters to take this logo design to the next level.

Cobode
In this emblem, the letters are linked with one another to depict connectivity and energy.

Fontana Maggiore
The bold and flourished typographical choices in this logo design speak the necessary volumes to any potential customers.

(rb)

Anyone Up for a Cup of Coffee?

Jasmina Stanojevic — Fri, 11 Mar 2011 16:15:18 +0000

Following along this tutorial you’ll be learning how to use the Pathfinder Panel in Illustrator CS5 with its very useful features. Combining various forms with the Pathfinder tools, we can create nice shapes. Applying the gradients and colors to those shapes, we can achieve great results by creating a nice depth and perspective. Highlights and shadows are very helpful as well and make the artwork look very realistic.

Don’t forget to use the techniques wisely. Using this simple one you can create a nice artwork of a cup that can be used in a variety of ways, such as an icon in the Web design field or even for coffee shop menus. Now, let’s get down to business!

This is how the end result should look like:

Creating a Cup Shape

First, we will create all the elements needed for the cup and after that we can continue with applying gradients and solid colors.

Set the document size to 500x500 pixels:

Select the Ellipse Tool (L) from the Tool panel and create a circle:

Grab the Direct Selection Tool code>(A), select the upper anchor point of the circle and remove it by hitting the Delete key on the keyboard. This way we’ll remove the upper part of the circle:

Grab the Pen Tool (P) from a Tool Panel and click on the endpoints of the shape from the previous step. That way we’ll close the path:

Take the Ellipse Tool (L) from the Tool Panel and create the ellipse as it shown in the picture below. Make sure that endpoints match. You can adjust the position of endpoints by using the Direct Selection Tool (A):

Now use the Pen Tool (P) and draw the handle for the cup. Set the Stroke to 14:

We have to make the bottom of the cup more flat if we don’t want to spill the coffee. Just grab the Pen Tool (P) and draw a path as it shown in the picture below:

Select the green part of the cup and the path from the previous step and hit the Divide button under the Pathfinder Panel:

Ungroup (Shift+Ctrl+G) the green shape, select the smaller part and hit the Delete key on the keyboard:

Applying Gradients

Time to apply some colors and gradients. Since our cup is white, we will apply mostly white-gray gradients. Darker parts will simulate the shadows.

For the cup we will be using radial white-gray gradient. According to the imaginary source of the light above the cup (upper left side) so the left side of the cup should be lighter.

Let’s create the edge of the cup. Select the pink ellipse and under the Object choose the Path > Offset Path. Set the Offset to -2:

Now we have two ellipses. Set the Fill color for the larger ellipse to white ( #FFFFF ):

The smaller ellipse represents the inner part of the cup. Since the imaginary source of the light is on the upper left side, that side of the interior will be darker:

Let’s edit the handle a little bit. In that order we need to expand the path first. Select the handle and under the Object option, choose Expand:

Make sure that the handle is not too big or too small for the cup. You can add some details. Take a look at your cup at home and try to copy the look of the handle.

Grab the Ellipse Tool (L) from the Tool Panel and create two ellipses as such:

Holding the Shift key on the keyboard, select the handle as well. Under the Pathfinder Panel hit the Unite option:

Now we have to adjust the anchor points a little bit to make a smooth shape of the handle:

The handle should be within the shadow because it is on the right side of the cup (source of the light is the left side, and the handle is on the right side). Let’s apply a darker gradient and later we can add some reflections as well:

Creating Details

Let’s create two fancy golden lines! The first step would be to select the larger ellipse and duplicate it (Ctrl+C, Ctrl+F). Holding the Shift key on the keyboard, move the copy downwards.

Now we need to remove the upper anchor point. Grab the Direct Selection Tool (A) from the Tool Panel to do that. Just click on the anchor point and hit the Delete key on the keyboard. Remove the Fill color and set the Stroke color to green:

Set the Stroke to 4 and under the Object hit Expand:

Now we have to duplicate the shape of the cup. Hit the Ctrl+C and Ctrl+F (for copy and paste-in-front). Select the copy we’ve just made and the line and under the Pathfinder Panel choose Intersect:

Apply the golden linear gradient:

Repeat the previous step to create another, thinner line:

Duplicate (Ctrl+C, Ctrl+F) the shape of the cup twice. Move to the right side of one of the copies and select both copies. Choose the Intersect option under the Pathfinder Panel:

Now duplicate the new shape we’ve just created and move it to the right side, scale it up a little bit and rotate it. Select both shapes and under the Pathfinder Panel hit the Minus Front button:

Feel free to change the position and the angle of the new shape. Play around until you achieve the right look. Set the Fill color to white and lower the opacity to 40%:

Grab the Pen Tool (P) and draw the path. Set the Stroke to 3:

Under the Object hit Expand:

Select both, expanded path and the reflection and under the Pathfinder Panel hit the Minus Front button:

Using the same technique create few more highlights and shadows:

Now we can add a shadow and a highlight on the handle of the cup. Grab the Ellipse Tool (L) and create the ellipse as it shown on the picture below:

Duplicate the handle of the cup (Ctrl+C, Ctrl+F) and by holding the Shift key on the keyboard, select the ellipse and the copy we’ve just created. Hit the Intersect button under the Pathfinder Panel. Set the Fill color to #C2C2C2:

Creating a highlight is pretty much the same. Duplicate (Ctrl+C, Ctrl+F) the handle twice. Move around one of the copies, scale it up or down, rotate; try out several things until you are happy with the result. Select both copies and under the Pathfinder Panel hit the Minus Front button. Set the Fill color to white (#FFFFF):

Creating a Saucer

For the saucer we’ll need the ellipse. We can’t create a new one because we need to stick to the same exact perspective we’ve created for the cup. Fror that reason, we will duplicate one of the ellipses we created earlier.

Holding the Alt key on the keyboard, click on the larger ellipse and drag it downwards (don’t forget to hold the Shift key for straight drawing):

Under Object select Arrange > Send Back:

Scale up the ellipse for our saucer a little bit and duplicate it (Ctrl+C, Ctrl+F). Grab the lower middle point of the selection box and drag it downwards (non-uniform scaling up). Now we have to move the ellipse upwards to make the side points to match:

Next, duplicate the old ellipse (Ctrl+C, Ctrl+F). Select that copy and the new ellipse and under the Pathfinder Panel hit the Minus Front button. Ungroup (Shift+Ctrl+G) the new shape and erase the upper part. You should end up with something like this:

The next step would be to apply gradients and colors to our saucer. After that we can add more details. For the lower part of the saucer we will use a radial gradient:

To the upper part of the saucer we will apply the linear gradient:

Now we need a white edge for the saucer. Duplicate the ellipse (Ctrl+C, Ctrl+F) twice and nudge one of the copies to the left side for 2 pixels. Select both copies and under the Pathfinder Panel hit the Minus Front button:

Set the Fill color of the new shape to white:

Do the same for the other side. Create two copies, nudge one of them for 2 pixels to the right side and create a nice white edge by using a Minus Front button under the Pathfinder Panel:

Duplicate (Ctrl+C, Ctrl+F) the big ellipse and scale it down. Set the Fill color to #EDEDED. That is the spot where we actually place the cup — the middle point of the saucer:

Duplicate twice the big ellipse (Ctrl+C, Ctrl+F) and nudge one of the copies downwards:

Select both copies and under the Pathfinder Panel hit the Minus Front button. Set the Fill color to #EDEDED. This way we’ve created the inner shadow on the saucer:

We need a small ellipse to put under the cup to simulate a tiny shadow from the cup. Set the Fill color to #C6C6C6:

Duplicate the middle ellipse twice (Ctrl+C, Ctrl+F). Nudge one of the copies 2 pixel downwards. Select both copies and under the Pathfinder Panel hit the Minus Front button. Set the Fill color to #C6C6C6. This way we’ve created the inner edge of the middle part of the saucer:

Grab the Pen Tool (P) from the Tool Panel and draw the shape as it shown on the picture below. Set the Fill color to #C6C6C6 and lower the opacity to 46%:

Take again the Pen Tool (P) and draw the path as you see on the picture below.

Set the Stroke to 4 and under Object select Expand:

Duplicate the big ellipse (Ctrl+C, Ctrl+F). Select the copy and the curve we’ve just made and hit the Intersect button under the Pathfinder Panel:

Apply the linear golden gradient to the curve. Use the same golden linear gradient we used previously for the golden lines on the cup:

Using the same technique create a thinner line:

For the end we’ll create one more reflection (but if you like you can create more than just one). Duplicate (Ctrl+C, Ctrl+F) the largest ellipse of the saucer, scale it down and place it more to the right side:

Holding the Alt key on the keyboard click on the green shape and move it to the left side. This way you’ll create a copy of the green shape and change the position of it at the same time:

Select both ellipses and hit the Minus Front button under the Pathfinder Panel. Grab a Pen Tool (P) from the Tool Panel and draw the small curved path. Expand the path under Object > Expand. Select both, expanded path and the green shape we’ve just created and hit the Minus Front under the Pathfinder Panel:

Set the Fill color to white. Adjust the position, size and the angle of the reflection we’ve just made:

The last thing is to add the shadow under the saucer. Grab the Ellipse Tool (L) from the Tool Panel and create the ellipse. Under the Object select Arrange > Send Back. Set the Fill color to #C6C6C6:

And Voila! Our cup is ready:

Final Note

Just keep one thing in mind. Perspective is very important. You have to try your best to stick to it during the entire creation process. You can always add more details to the cup as much as you like. It also helps if you look at the object simultaneously while you are creating it.

Feel free to experiment and try out different things. You can easily create interesting shapes and forms using the Pathfinder Panel with all its features. I hope you liked this tutorial. If you have any questions or comments, feel free to post them in the comments section below.

(ik)

Digital Artwork Inspired by Geometry

Nousheen Aquil — Fri, 04 Feb 2011 09:15:36 +0000

In this exclusive roundup, we have compiled some very creative digital artwork inspired by geometric shapes. These shapes have always been a great tool for designers and artists to create their artwork in a simple yet aesthetic way. This type of digital art which includes geometrical shapes looks stunning and visually alluring. Some artists have combined two or more shapes to add more details into their designs. Let us know what you think!

Discard / Reuse

Cloud Maschine : Abstract

EXPLOSION OF COLORS AND SHAPES

Stained Glass Geometry

365 Days Project: Lines & Geometry

D.R.T.H Geometrical Poster

The Great Pyramid

SUBSTITUTE

(ik)

Showcase of Creative (But Not Necessarily Usable) Contact Forms

Robert Bowen — Wed, 02 Feb 2011 11:50:40 +0000

Contact forms are the best way to attract visitors and to interact with them. A creatively designed and inspirational contact form is the most appropriate way to say welcome to your visitors and invite them to use your services. A comprehensive and stylish form persuades the visitors and helps build their confidence in the company behind the site.

We have gathered some interesting examples of contact forms for your inspiration. Please notice that some of them are nice, but hardly usable. The idea of this article was to present you some ideas, not necessarily the execution of the ideas.

Creative Contact Forms

Gpacheco’s contact form is both visually captivating and creatively styled to fit with the natural look and hand carved elements that accompany the rest of the site. Though it may not necessarily be clear to some users where the text box for the form is, given its lack of highlighted edges, it gives the user the width of the site to compose their thoughts freely into the sand. The padding around the borders of the name and email address boxes could stand to be a bit wider as it feels tight and some letters can extend over the border image creating a slightly, visually uncomfortable presentation.

Lion Ways uses a postcard design for their contact form which stylistically works really well on a site where each page is based around cards/books/etc. It is a very nice and subtle form that really blends well with the site overall. Clean and basic.

Beakable form is very creative and looks really nice, though there are some usability issues that could stand to be addressed. Adding boxes around the space for the name and email address would make those areas better stand out as editable. The submit button could use more attention drawn to it so that it is more easily recognizable that it is the submit button.

fCtm-Argentina has a wonderfully unique and creative design for their contact form, styling it as a boarding pass to fit with the tone of this travel based business site. The form works both in style and function, however, the comment box feels a bit tight with the settings as they are, and it could use a bit more padding around the edges.

Matt Dempsey’s site has a stylish contact form setup with brushstroke styled text boxes which all work well enough. However the right edges begin scrolling a little late for those with long names or email addresses, and readability becomes a slight issue. Again, this will more than likely not come into play that often, but it could.

Ctrl+N contact form perfectly matches the retro, side scrolling design of the site. The titles and boxes could use a bit more padding and the message box should change color like the others to denote that it is active.

Nineteeneightyfour is the web design portfolio of Martyn Palmer which has a stylish contact form that drops down into place on the page when you click on the contact button. Here the button is made up like a post it note to match the overall feel of the site. With various other contact information scattered about the area and scribbled on scraps of paper, the contact form itself could have been styled more to fit among the other hand drawn elements a little more.

Tony-Johnson has an interesting contact form set on his site as well. Styled as a portfolio case, the contact form is compactly placed in the borders of the case just fine. However, if the user has a comment or query to submit through the contact form that is of any substantial length, the text box does not scroll to allow them to see what they are typing below the cut. This almost discourages any lengthy or in-depth sort of contact in this case.

Try Triangle’s contact form is both creative and wonderfully implemented. The spacing and scrolling all fit well within the small spaces provided. Not feeling cramped at all, even in such close quarters, which is not always an easy task to pull of design wise. However they have done well integrating it into the site with imagination and style. Though one area where the size does feel a bit limiting is in the main text box on the contact form. It scrolls so that you can follow what you are saying, but only after a couple of lines so that you are not seeing much of your train of thought behind you as you type.

Bio-Bak has an extremely creative, if not somewhat cumbersome contact form. The mouse styling makes some of the site difficult to click on, and the interactive elements added to the contact form are only compounded by this design choice. And while the extra steps for entering your e-mail information are creative, they can ultimately serve as a detractor for some users who are not interested in playing along.

Artcore-Illustrations is another site where they opted for a simple form that does not go over the top with bells or whistles. It simply, and in subtle fashion with the rest of the site, accomplishes its purpose. The padding and spacing all fit comfortably into their boxes, while the transitions to indicate your selected box smoothly highlight the location of your cursor for the user.

Indofolio has done a wonderful job incorporating their style and site tone into the contact form that they use. While there is plenty of space in the boxes for entering your information, if the e-mail address or name are too long then the right side of the box will cut off the last letter you are typing so that you cannot see what is there. The padding on the left side of the main text box could also be slightly adjusted, if only for the first line of text which goes over farther than the preceding lines of text.

Lunalunerafestival is another site that creatively styled the contact form to be set up like a letter being written. The text boxes for the name and email address, though at an odd angle, remained completely readable and within the borders of the box. The large area that is available for the message box provides an inviting landscape for the users to share and discuss whatever they have to say. Comfortably padded and all around well done.

Yodaa has a stylish looking contact form which has uneven information boxes to help fit with the fun animated feel of the site. However, these edges of the boxes do not line up correctly with the text inside, so not only does some of the text distractingly break outside of the box interfering with readability, it feels like a major oversight on a site dedicated to usability in design.

Umquarto has a beautiful and simple contact form, from complete form presentation to the transitions highlighting cursor location easily and stylishly for the benefit of the user. Everything feels concrete and firmly in its place with even and visually pleasing padding and spacing throughout the form.

Xruiz has a nice hand drawn feel to the contact form elements that really help tie it into the rest of the design. However the padding at the top of each of the text boxes could stand to be adjusted. It is only somewhat noticeably off in the entry boxes for your name and email, as the info hovers closer to the top of the box than it does the bottom. But in the message box, it is majorly off, and the top line nearly rests on the top edge of the box.

Qwert City is another site that uses the look of a postcard for the design of their contact form, in a colorful, if not overly so way. For instance the light blue color of the text could stand to be bit softer to blend better with the other elements of the form. And while there is a fairly decent sized text box for whatever message you have to leave, should the message be too long, the box does not scroll to allow the user to see what they have written after a certain point.

Created 201 Studios has a creative and very unique contact form on their site, that completely flows with the style of the site and does not break from the angular presentation of the other pages. And once again, even with this angled effect, the data entered does not feel out of place or uncomfortably squeezed into the design. Overall, it is brilliantly crafted.

Brian Handley Design has a whimsically illustrated contact form set up to match the rest of the site perfectly. The implementation of the form is nearly flawless as well, however, it is a relatively small message box compared to most, and once again we find that the box does not scroll to keep up with the user at all, and can prevent some users from leaving their comments or contacting the Brian via the form.

Swiths contact form is another example where they opted for a simpler, understated approach. The padding is offset so that the text in the information boxes is not centered, but more rests towards the bottom of the boxes and this does not feel visually uncomfortable in any way. However the kerning on the font used can make the words feel a bit spread out and unevenly spaced. Though that is the only part of the form that feels off at all.

Marcol is another site that has stylistically pulled off their contact form, however, usability wise it could use a slight tweak or two on the padding for the left and right borders of the information boxes. Some of the text entered in these boxes has a tendency to bleed over the borders which is somewhat unpleasing to the eye. The main message box is fine with its padding, but the others, not so much.

Bert Timmermans contact form is sleek and professional, which compliments the tone and feel that the rest of the site imparts nicely. The padding and scrolling all appear to be in order as well, which is what you would expect given the rest of the site. Cleanly designed and implemented.

Christian Sparrow’s contact form is hardly the most creative element on the site, but it stylishly fits so well with the rest of this creative little gem that we had to showcase it here. All aspects of the contact form work brilliantly, and the floating clouds that pass by in no way interfere with the readability of the form. The only area that could even be suggested for improvement in our eyes would be that the text that acts as an indicator for what should go in the box gets automatically highlighted and erased when you navigate there and begin typing.

EletricPulp has a stylish contact form with a subtle textured background that accompanies it, nicely tying it into the rest of the site’s design. The text indicators seem a bit redundant given that they are not only listed boldly outside the text boxes, but they are also echoed right beneath these headers in the boxes themselves.

Ryan McMaster’s contact form is actually a little bit more in depth than most that we have featured. Here he has included areas for the user to include their reason for the message and even allows a space for an expected budget should this be used by a potential client. Once again the indicators stay in the box when you click there and have to be manually selected and deleted. Not a big deal, but a step that can slow some users down.

August Creative Agency has an extremely unobtrusive contact form on their site that is cleanly incorporated into the picturesque background of the site. Once again, a very basic presentation and contact form setup, but as usual, it works well with the overall site rather than clashing with it in any way.

We Love Icons has a gorgeously carved contact form for their site, covering the standard info that most ask for. The compact and cleanly presented form is as visually comfortable as it is sharply implemented, complimenting the rest of the design wonderfully.

Kev Adamson has a contact form on the site that feels squeezed in a bit among various other elements, however, enough care has been put into the form itself so that none of the other areas or elements attached to it feel that way. The fonts used are petite enough that they fit nicely among the grunge ridden form, which matches with the rest of the site well.

I love Colors has a well designed and stylish contact form to match the rest of their site. The simple highlights around the active text box, along with the evenly padded borders give the form a very sleek and comfortable appearance. With plenty of room and satisfactory scrolling, the form warmly invites feedback from the site’s users.

Ashes And Milk have a stylishly designed contact form, neatly tucked away in a box. The simple nature of the form works nicely with the rest of the site, however in the main text box when you enter enough text for it to scroll, the appearance of the scroll bar grabs traces of the text behind it and keeps it there the whole time you continue down the message box.

Fabric Adecaricaturas has a contact form that has as much personality in it as the rest of the site. The text boxes are subtly styled and comfortably padded, without any visual distractions or discomfort caused by them.

Giraffe has a colorful and welcoming contact form that fits with the atmosphere and ambiance that they have established through their restaurants and their accompanying website. The form, boxes, and the fonts are all bold and highly visible, unlike some of the smaller, subtler forms that we have seen.

Fundolospaltos has a stylish and understated design approach to their site’s contact form. Though nicely executed, the text boxes, especially the message box could use a little bit of extra padding around all of the edges. The text feels slightly squeezed in the way it is.

Harmony Republic has a simple contact form on their site which is styled with hand-drawn line elements for the text boxes which work nicely to accentuate the entry points. The spacing and padding are all set at comfortable levels, and do not include any breaks that detract from the simple beauty of the design.

Trendy Web Design’s contact form is another form where the style is subtle, but complimentary to the rest of the site so it works well. However the padding on the sides of the text boxes could use some minor adjustments as the text feels pressed against the edges as is. The message box also could stand some adjustments to the padding at the top and bottom as well allowing the text more room to breathe as it were.

Red Bull Soapbox Racer has a appropriately styled contact form to fit with the irreverent site it is attached to without compromising the functionality of the form in any way. The site takes over your sound upon entry and there is sound that accompanies certain elements of the form which seems slightly unnecessary. Though the form is obviously not the draw or focus of the site, it does not suffer or feel lacking in any way in such a unique and whimsical site.

Z-Index Media has a very unique and creatively styled contact form that is set up like a letter being placed into an envelope. The padding is hardly an issue with the expansive area provided to the user to enter their information and message, but even when pushed to the edges, the text remains comfortably spaced. The return to sender element that gets added to the outside of the envelope when you enter your name and email address is also both stylish and creative.

Aterlierdetour has a stylishly creative contact form that is befitting of the site it is carved out of. The non-symmetrical boxes have the grungy hand drawn appeal, while completely containing the text and not having any of it pouring over the edges. The padding in the main text box could stand to be tweaked around the top and the right edges. In these two areas the text feels pushed too close to the edges for complete comfort.

Danielhellier’s contact form is a comprehensive and boldly styled, which compliments the site well. However, after taking the time to craft such an inclusive and information gathering form, the navigational element that gets the user to the page, can also problematically land over the top of the submit button for the form negating the entire form right then and there.

Enviramedia has a rather large contact form that fits with the bright, pastel illustrated website it is a part of. The padding leaves everything feeling roomy and not at all forced in. Overall it is a very inviting contact form that begs for conversational messages from their users.

Alexandru Cohaniuc’s large and bold contact form is simply textured and styled to go hand in hand with the other site elements and inclusions. The padding and scrolling are set up comfortably and not in any way disruptive. Simple, bold, and eye catching.

Five cent stand returns us to the simpler, yet stylish contact forms, where subtle styling is key and the understated color and textures do not overload or complicate the issue at all. The padding in the message box is a little tight on either side, especially with so much room left at the top, it just felt like things were a bit unnecessarily squeezed into place rather than just organically fitting.

Social Snack has a tiny little contact form tucked away down at the bottom of their site, that not only does not seem that inviting to large messages being left, but the scroll bar in the small text box grabs fragments of the text behind it, obtrusively carrying these fragments down the rest of the text box. The spaces provided for the name and the email address are comfortably padded and have no interference that complicates their view.

World-Arcade has an extremely simple contact form that pops up when you click on the contact link. The brightly colored box with the animated robot fit with the overall site theme and presentation. The spaces provided are all well padded and comfortably set up. Overall, it is very simple, but effectively and invitingly crafted.

Hybridworks has a flashy site overall, but the contact form, while sleek and aided by the same sound effects that accompany the rest of the site feels a bit out of place with main presentation of the site. Also, in the main message box, the padding on the left and right side are not even to the point where it feels like something is slightly off. A minor adjustment could straighten that out and make it that much more comfortable on the users visually.

Carsonified has a colorful and bold contact form with large text boxes to fit hand in hand with the feel of the rest of the site design. With such large boxes, the padding seems like it would easily not be an issue, however in the message box the padding on the right side is not set equally with the left and the text can feel pressed right against the edge. There are also fragments that are captured behind the scroll bar when it appears in the box that remain attached to it.

(ik)

If Animals Were Models

Bhanu Ahluwalia — Wed, 26 Jan 2011 10:43:55 +0000

This could be a very interesting question for photographers. What if animals really were models? How would they pose? How would they look? We tried to get answers to these questions and started searching all over the internet for our priceless collection of animal “models”.

Some are happy to pose, some are angry, some want to show their natural beauty and are confident, and some are extremely shy. Some have even used props to make their picture interesting. And if these pictures are still not enough, we’ve added links to more collections of beautiful animal photography after the jump below. Enjoy!

Squirrel

God Bless

Follow me guys!

Yup, This Is My Treat! Virgil

Pigs in a pumpkin

Friday Funny Animals

Series of wild animals 3