Saturday, June 30, 2012

Noupe

Noupe

Link to Noupe

A Collection of Incredibly Simple and Sleek Logo Designs

Posted: 29 Jun 2012 12:33 AM PDT


  

Logo design is a broad medium, full of diverse styles, genres and talents. With advancements in software many logo designs have become increasingly complex, utilizing wide color spectrums, complex gradients and intricate illustrations.

Whilst these logos are visually impressive, they often are not the most effective way to successfully communicate a brand or idea. Often a simpler, more basic logo will serve the company or individual better.

Today we demonstrate the power of a truly simple, sleek approach by presenting a collection of inspiring logo designs. We hope that these logos motivate you to try a ‘back to basics’ approach in your next design and really get to the heart of the brand in question.

Simple and Sleek Logo Designs

Angelina by contrast8
A wonderfully elegant logo that transforms the letter ‘A’ into a stylish logo graphic, with visual hints at a flower vase shape.

Simple, Sleek Logo

Valdao by magicshadow
Valdao uses a simplistic representation of a bird of prey to infer the companies qualities (speed, efficiency). The bird’s wings also form into a ‘V’ shape, whilst taking on the look of a stylish car emblem.

Simple, Sleek Logo

National Photography Month by firebrand
A very clever logo that combines the basic images of a camera with the national flag colors for Britain. Negative space is used effectively in this design to help construct the camera icons. The staggered camera icons allude to the passing of time/months (like calendar pages turning).

Simple, Sleek Logo

Discovery Finance by ricardobarroz
A very sleek logo that uses a stylish, arcing abstract shape to represent the concept of discovery and exploration inherent in the company’s name. The way that the logo icon wraps around itself feels secure and safe, which is relevant for the financial sector.

Simple, Sleek Logo

One Line by David Blazewicz
A very simple but clever concept – One Line’s logo is literally constructed of a single white line, contorted into elegant typography.

Simple, Sleek Logo

Tenfeet Productions by Daniel Evans
This logo uses ten simple feet icons to construct a stylish, memorable logo. The resulting icon feels highly creative due to the rainbow spectrum of colors used. It also hints at a camera lens iris.

Simple, Sleek Logo

Draft by Daniel Evans
The creative process of drafting is captured well in this simple logo, as the floating particles represent ideas passing and formulating.

Simple, Sleek Logo

Chic by Vikkiv
A bold, fun logo that includes the typography as part of a wider illustration. The letter ‘h’ in ‘chic’ becomes part of the chickens leg/foot and results in a highly unique, memorable logo design.

Simple, Sleek Logo

VineSquare by Bojan Stefanovic
A very simple logo concept that works very well. The ‘square’ part of the company name is represented by a very slight shift in hue between the left and right parts of the logo icon. This results in a boxed feel for the icon, as the center of the icon becomes a corner.

Simple, Sleek Logo

Todd Thiele Photography by Logomotive
A clever way to integrate the two ‘T’s of the company name into the logo. Two ‘T’s and a simple dot between them create the illusion of a camera by using negative space. The logo feels sleek and professional, being only as simple as is required to put across the visual concept.

Simple, Sleek Logo

Appex 2nd Proposal by ALL4LEO
The upwards arrow in this logo is both a simple representation of the letter ‘A’ in the company name and the concept of an Appex. The gradation of color occuring infers energy, drive and clarity.

Simple, Sleek Logo

Logo Milk by Designabot
This simple typographic treatment instantly evokes ‘milk’ and the illustrative splash is both stylish and fun. The concept is for a logo gallery that presents logos in black/white (their simplest form) and so appropriately is presented in monotone.

Simple, Sleek Logo

EAGER by Logotyped
An abstract logo that constructs a lowercase ‘e’ using a basic illustration of a wild cat. The wild cat is used to represent the strength, power and eagerness of the company.

Simple, Sleek Logo

Antarctica by A. William Patino
This cute logo uses a lowercase ‘a’ with a simple dot added to create a basic penguin illustration. An unbelievably simple, yet very effective typographic treatment that is totally relevant to the company’s name.

Simple, Sleek Logo

Love Puzzle by Mateausz Turbinski
This logo concept couldn’t be simpler – Love Puzzle – a heart constructed from interlocking puzzle pieces. The interlocking pieces help to show unity and connection.

Simple, Sleek Logo

Filmaps by Siah Design
This logo uses an image of a pin to represent the locational/maps aspect of the business. Very cleverly, a few simple squares are added to the pin design to give the impression of a film reel.

Simple, Sleek Logo

5 Locks by houston-we
Another incredibly simple, yet effective design. By cutting into the ‘o’ in ‘locks’ this logo gives the impression of a door keyhole. Wonderful typographic treatment!

Simple, Sleek Logo

Scissor by palattecorner
This simple, sleek logo creates a crest type symbol from two intersecting shapes. This resulting shape is a simplistic representation of some scissors, and provides a balanced, symmetrical symbol for this design.

Simple, Sleek Logo

Saltwater by ASD
This logo constructs a letter ‘S’ from two interlocking fish symbols. The mono-chrome logo is simple, sleek and professional and no more complex than it needs to be.

Simple, Sleek Logo

PowerBloom v2 by Julius Seniunas
A clever logo that combines the icons of a plant with an electrical plug. The icon is very minimal, yet perfectly captures the two concepts inherent in ‘Power Bloom’. The green leafs tie in with more of an environmental concept, whilst the contrasting red is more fitting for the idea of ‘power’.

Simple, Sleek Logo

Elephant Combs by TbwaIndia
A very simple, sleek design that creates the double illustration of a comb and an elephant simply by adding a dot (for an eye) in the top left of the minimal comb illustration.

Simple, Sleek Logo

Muchmore by Fayda
Possibly the simplest, and best concept in this entire collection. This purely typographic design perfectly encapsulates the concept of ‘more’ by each letter becoming increasingly bold. A great concept!

Simple, Sleek Logo

RIP Steve by Jonathan Mak
The logo that went around the world! This viral logo by Jonathan Mak is a great concept that incorporates the late Steve Jobs’ outline into the iconic Apple logo.

Simple, Sleek Logo

SpadeDealer v2 by Julius Seniunas
A clever logo that uses negative space between two simplistic hands to create the shape of a spade (from a deck of cards). The flexing hands create a sense of energy associated with a casino dealer.

Simple, Sleek Logo

Night Cat v2 by ALL4LEO
The basic curved outline of a cat overlaps a glowing semi-arch, giving the impression of the animal lurking in front of the moon. Another great example of negative space being used to show two concepts in one.

Simple, Sleek Logo

Edith Stein Foundation by LumaVine
The individual represented by this company is featured in the logo icon in her simplest form. The vector graphic presents the core of Edith Stein, communicating many values through a wry look to the viewer.

Simple, Sleek Logo

Green Hope by Master_ino
Another logo capturing two solid concepts in a single design. The long waves of green grass take on the form of an outreached hand, combining both environmental and community ideals.

Simple, Sleek Logo

Quality Performers by Antonio Cappucci
This logo captures a really intense atmosphere in a fairly simple design. The dark nighttime horizon depicted sits underneath a shining star. This logo may not be monotone or a single vector design, but considering that it is comprised of a few simple gradients we get a very immersive sense from it.

Simple, Sleek Logo

French Property Exhibition by Roy Smith
An incredible concept featuring a distorted French flag. The blue panel of the flag is transformed to appear like an opening door, which successfully marries the ideas of France with property.

Simple, Sleek Logo

CitiSync by Logomotive
The icon in this logo adds a cyclical detail to a classic cityscape outline. The result is a logo that has a definite urban feel, but also energy.

Simple, Sleek Logo

SOCIONIC by Logomotive
A wonderfully sleek and elegant logo, using flowing lines to create an attractively framed, ornate letter ‘S’. The logo has a really nice feeling of symmetry and balance and the monotone palette helps keep things simple and sleek.

Simple, Sleek Logo

Favorite Designs?

I hope that you enjoyed this article. Did you have any favorite logo designs in this collection? Do you prefer more complex, intricate logos or are you a fan of the simple/sleek style? Let us know in the comments below and we can get a discussion going!

(rb)

0 comments:

Friday, June 29, 2012

Noupe

Noupe

Link to Noupe

Adobe Illustrator Tutorial: Create a Printer Illustration

Posted: 28 Jun 2012 01:01 AM PDT


  

In the following Adobe Illustrator tutorial you will learn how to create a detailed printer illustration. We’ll start with two simple rectangles and some basic vector shape building techniques. Once we have our starting shapes we’ll continue with some Pathfinder options, a bunch of complex linear gradients and some simple effects. For the highlights we’ll use some simple blending techniques along with some new effects and pixel perfect vector shape building techniques.

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Hit Control + N to create a new document. Enter 600 in the width and height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before you click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 5px.

Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Rectangle Tool(M) and create a 350 by 160px shape. Fill it with a random color, make sure that it has no color set for the stroke and go to Object > Path > Add Anchor Points. Keep this new shape selected and switch to the Direction Selection Tool(A). Select the middle, left and middle, right anchor points (highlighted in the second image) and simply drag them 25px up. The Snap to Grid will ease your work.

Step 3

Keep focusing on the shape created in the previous step and continue with the Direct Selection Tool(A). Select the top, left anchor point and move it 20px to the right then select the top, right anchor point and move it 20px to the left. Move down, select the bottom, left anchor point and move it 5px to the right then select the bottom, right anchor point and move it 5px to the left. In the end your shape should look like in the second image. Make sure that it’s still selected and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Object > Expand Appearance.

Step 4

Pick the Rectangle Tool(M), create a 360 by 5px shape and place it as shown in the first image. Select it along with the shape created in the previous step and duplicate them (Control + C > Control + F). Select these copies, open the Pathfinder panel (Window > Pathfinder) and click on the Intersect button. Fill the resulting shape with the linear gradient shown in the final image. The white numbers from the gradient image stand for location percentage.

Step 5

Reselect the original thin rectangle created in the previous step along with the large shape created in the starting steps and click on the Minus Front button from the Pathfinder panel. Move to the Layers panel (Window > Layers) and you will find a new group with two separate shapes. Select it and ungroup it (Shift + Control + G). Focus on the bottom shape, select it and fill it with the linear gradient shown in the final image.

Step 6

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Reselect the shape edited in the finale of the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and hit the down arrow once (to move it 1px down). Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black.

Step 7

Reselect the shape edited in the finale of the fifth step and go to Object > Path > Offset Path. Enter a -2px Offset and click OK. Duplicate the resulting shape (Control + C > Control + F). Select this copy and move it 2px down. Reselect both shapes created in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=166 G=169 B=174, lower its opacity to 50% and go to Effect > Blur > Gaussian Blur. Enter a 2px radius and click OK.

Step 8

Once again, select the shape edited in the finale of the fifth step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=23 G=37 B=52.

Step 9

Move to the top shape created in the fifth step. Select it and fill it with the linear gradient shown in the following image.

Step 10

Reselect the shape edited in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down and to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with a random color, for now.

Step 11

Reselect the shape edited in the ninth step and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down and to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Again, fill the resulting shape with a random color.

Step 12

Reselect the two shapes created in the last two steps and click on the Unite button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image.

Step 13

Reselect the shape edited in the ninth step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=244 G=244 B=244.

Step 14

Enable the Snap to Grid (View > Snap to Grid). Pick the Rectangle Tool(M), create a 190 by 30px shape, fill it with black and place it as shown in the first image. Switch to the Direct Selection Tool(A) and focus on this new shape. Select the top, left anchor point and move it 10px to the right then select the top, right anchor point and move it 10px to the left.

In the end your shape should look like a trapezoid (image #2). Select it and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Object > Expand Appearance.

Step 15

Reselect the shape edited in the ninth step and make a copy in front (Control + C > Control + F). Select it along with the shape created in the previous step and click on the Intersect button from the Pathfinder panel.

Step 16

Disable the Snap to Grid (View > Snap to Grid). Reselect the shape created in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 17

Reselect the shape created in the fifteenth step and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 7px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 18

Reselect the shape created in the fifteenth step and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the left window, click OK and go again to Effect > Stylize > Drop Shadow. Enter the properties shown in the right window and click OK.

Step 19

Enable the Snap to Grid (View > Snap to Grid). Pick the Rectangle Tool(M), create a 140 by 150px shape, fill it with the linear gradient shown below and place it as shown in the following image.

Step 20

Disable the Snap to Grid (View > Snap to Grid). Reselect the shape created in the previous step and go to Object > Path > Offset Path. Enter a -1px Offset and click OK. Duplicate the resulting shape (Control + C > Control + F). Select this copy and move it 1px down. Reselect both shape created in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=250 G=250 B=250.

Step 21

Reselect the shape created in the nineteenth step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its opacity to 3%.

Step 22

Enable the Snap to Grid (View > Snap to Grid). Pick the Rectangle Tool(M), create a 230 by 85px shape, fill it with the linear gradient shown below and place it as shown in the first image. Switch to the Direct Selection Tool(A), select the bottom, left anchor point and move it 5px to the right then select the bottom, right anchor point and move it 5px to the left.

Make sure that this new shape is selected and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Object > Expand Appearance. Finally, select the resulting shape and go to Effect > Stylize > Inner Glow. Enter the data shown in the final image and click OK.

Step 23

Pick the Rectangle Tool(M), create a 170 by 45px shape, fill it with the linear gradient shown below and place it as shown in the following image. Select it and go to Effect > Stylize > Inner Glow. Enter the properties shown below, click OK and go to Effect Stylize > Drop Shadow. Again, enter the data shown in the following image and click OK.

More on Page Two

That is only half the chore, there is still more tutorial to work through on page two.

Life Beyond WordPress: Showcase of Blogging CMSs

Posted: 27 Jun 2012 01:01 AM PDT


  

When it comes to content management systems and/or blogging platforms, we know that WordPress leads the race by a mile. Hardly any other CMS comes close to WordPress in terms of popularity and ease of usage. Yet, it is always useful to know your way around an extra platform or two. Therefore, in this article, we shall take a look at some of the ‘other’ blogging CMSs, apart from WP itself.

To be on the safer side, before proceeding, it must be noted that this round-up deals with CMSs that are primarily used as blogging platforms. As a result, awesome CMSs such as Joomla! and Drupal have been left out of this list (even though both Joomla! and Drupal can be used to power blogs, at the end of the day, their primary use is not that of a blogging tool).

Life Beyond WordPress

Movable Type

Movable Type comes in both open source and commercial variants, so you can freely take your pick. If you wish to run a magazine website or a multi-author blog, Movable Type can serve you well. It is coded in Perl, so if you need a PHP-based CMS, it may not suffice for you.

  • Pros: Ideal for multi-user blogs, active (and loyal) community
  • Cons: Comparatively bloated in mode of operation

Movable Type

Habari

Habari means "What’s the news?" in Swahili. It is a rather minimal and nimble blogging tool that can easily power a decent blog.

  • Pros: Loyal user base, steady development, nimble and swift in usage
  • Cons: Lesser number of themes and extensions

Habari

b2Evolution

For the record, WordPress itself evolved from b2. So b2Evolution shares the same ancestry as WP. Apart from that, b2Evolution comes with a good set of features – TinyMCE editor, support for Youtube HD – you name it!

  • Pros: Good feature set, nice collection of plugins/extensions
  • Cons: Interface looks dated

b2Evolution

Geeklog

With a punch-line of "The Secure CMS", Geeklog surely has the ingredients to power your blog. The repository flaunts several responsive themes as well as plugins for image galleries and forums.

  • Pros: Out-of-the-box security features such as password hashing and Emergency Rescue Tool
  • Cons: Slightly irregular update frequency

Geeklog

Concrete5

Concrete5 is, arguably, one of the best alternatives to WordPress. It is a free and open source CMS, with well populated plugins and themes repositories. It comes with interesting features such as in-built statistics, support for Youtube videos, sitemap generation and so on.

  • Pros: Good set of extensions, active community
  • Cons: Can use some more free themes

Concrete5

Textpattern

Textpattern is an awesome blogging CMS that comes with a great set of features and has a wide user base. In fact, TXP is often compared with WordPress, and the winner is anyone’s guess.

  • Pros: Good community activity, excellent extensions
  • Cons: Admin interface badly needs a revamp

Textpattern

Expression Engine

Expression Engine is a paid CMS that caters to numerous big names all across the internet. In fact, Expression Engine cannot precisely be dubbed as a blogger’s CMS, but its set of features do resemble that of a blogging platform, at least in terms of first looks. It is used by the likes of Adobe, Sony and Apple – so if you decide to opt for it, you will surely have good company!

  • Pros: Great support, premium features not found elsewhere
  • Cons: May not be apt for everyone’s budget

Expression Engine

Wolf CMS

Wolf CMS is a PHP-based CMS best suited for small websites and blogs. It has been localized into multiple languages, and the interface is quite intuitive to use. Do give it a spin if you are looking for a swift CMS to power your blog.

  • Pros: Simple and easy to use interface
  • Cons: Not ideal for big websites

Wolf CMS

Radiant CMS

Radiant CMS is coded in Ruby on Rails. It is a simple option for those looking to power their blogs in a non-PHP manner. It primarily caters to websites that are run by small to medium-sized teams.

  • Pros: Ideal for blogs run by small teams
  • Cons: Small set of templates

Radiant CMS

Serendipity

Serendipity offers a good set of templates and plugins for your blog, and has a modest list of features. It can import from other blogging tools, including WP, so if you wish to migrate your blog from some other platform, Serendipity has got you covered!

  • Pros: No-nonsense interface, good plugin repository
  • Cons: Unimpressive update frequency (also, ridiculous website address for a CMS – http://s9y.org)

Serendipity

PivotX

PivotX is a blogging tool powered by PHP that uses MySQL or flat files as databases. It comes with all the bells and whistles necessary for creating and managing a blog.

  • Pros: Good community support, themes repository increasing on a regular basis
  • Cons: Needs more ‘eye-candy’ factor

PivotX

Nucleus CMS

Nucleus CMS, as a blogger’s tool, comes with most features that one would expect. You can run multi-author blogs as well as manage multiple blogs from the same installation.

  • Pros: Extremely small and non-bloated (download size of the entire CMS is 650+ KB)
  • Cons: Outdated interface, limited themes

Nucleus CMS

Chyrp

Chyrp is an interesting blogging tool with powerful theme and extension engines for easy personalization. It is easy to use and has an intuitive design.

  • Pros: Easy to use and configure, good community support
  • Cons: Lesser number of themes (CMS itself is relatively younger)

Chyrp

FlatPress

FlatPress is a PHP-powered blogging CMS that does not require SQL. It saves all your posts as simple text files. Thus, you don’t have to mess around with SQL, and even while backing up the installation, all you need to do is copy one directory.

  • Pros: Super-swift in usage, easy to backup
  • Cons: Not meant for SQL lovers, relatively younger CMS so lesser themes/plugins

FlatPress

LifeType

LifeType is an open source, GPL-licensed blogging tool. It can support multiple blogs in one installation itself, including those on sub-domains. It still has an active user base, and there have been updates and patches, but the last major release was in January 2011.

  • Pros: Good choice for managing multiple blogs
  • Cons: Poor update frequency

LifeType

Nibbleblog

Nibbleblog is another blogging platform that does not rely on SQL – instead, it uses XML databases. It comes with support for video blogging, and also has an in-built file manager for managing your media files.

  • Pros: Lightweight and easy to use, multilingual support
  • Cons: Not meant for SQL users, very few themes

NibbleBlog

Pritlog

Pritlog does not have anything unique to its USP – it features a WYSIWYG Editor, support for widgets, SEO features, and so on. Thus, it can serve as a tool for running a small blog without hassles, but don’t expect it to do grand things for you (unless you set your mind to customizing and tweaking it). Also, it is based on SQLite, rather than MySQL. Plus, it is open source, but instead of GPL, it comes with the MIT license.

  • Pros: MIT license (arguably) gives you more freedom as compared to GPL
  • Cons: Extremely limited themes and plugins, nothing big to brag about in terms of features

Pritlog

Dotclear

Dotclear is a powerful blogging CMS and is well supplemented by a decent set of themes and plugins. It lets you customize the entire admin panel layout as well — all in a matter of a few clicks. You can run multiple blogs from one installation, and Dotclear comes loaded with anti-spam tools. Also, when installing Dotclear, you do not need to download the entire archive – just grab a PHP script file of few KB, and upload it on your server. Once you access the file in a web browser, it will provide you with a step-by-step procedure that will grab the Dotclear installable archive via cloud and setup your blog.

  • Pros: Good update frequency, nice level of community support
  • Cons: Multi-lingual support needs improvement

Dotclear

AnchorCMS

AnchorCMS is an open source an extensible CMS, mainly meant for blogs with art-directed posts. It is still in its infancy, but surely looks to be shaping up well, so it makes sense to keep an eye on its progress.

  • Pros: Uncluttered, no-frills admin interface
  • Cons: By far the smallest theme repository (at the time of writing, the repository merely had four themes)

AnchorCMS

Over to You:

With that, we come to the end of this round-up. Surely, most (if not all) of us must be using WordPress as the primary CMS. However, have you tried any of the above mentioned CMSs? If so, feel free to share your thoughts with us in the comments. Are you aware of any other blogger’s CMS that were missed? Let us know in the comments!

(rb)

0 comments: