Sites that help people learn have some pretty obvious design needs. First off they have to be easy to use and understand, there is nothing worse then confusing a student with the presentation as they are already trying to figure out something new. With this in mind such sites still have to connect with and draw users in. This set shows how some people have skinned this cat. http://www.dzinepress.com/2010/02/showcase-of-e-learning-websites-for-interactive-help/
-
I posted to designmeltdown.com
Sites that teach us
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/Pmo-ffRsq0A/
- Tags:
- Teaching
February 10 2010, 6:00am | Comments »
-
I posted to smashingmagazine.com
Photoshop Keyboard Shortcuts Cheat Sheet (PDF)
http://feedproxy.google.com/~r/SmashingMagazine/~3/gN97K_NtU7g/
Over the last months we released a variety of icon sets, tools and templates, but now we would like to release something a bit different for a change. In this post we are glad to release Photoshop Keyboard Shortcuts, a PDF-file with a handy overview of most useful keyboard shortcuts available in Adobe Photoshop. The cheat sheet was created by Kenneth Setzer and released especially for Smashing Magazine and its readers.The cheat sheet is a mousepad-sized image featuring a typical PC keyboard. Photoshop’s keyboard shortcuts are listed for each key, with the shortcut and its icon printed on the individual key. In red is the shortcut you will get by hitting the key in combination with the Ctrl key. For example, typing "t" in Photoshop will activate the Type tool, while typing Ctrl+t will allow you to use the Transformation tool. Additional shortcuts requiring more than two keys are listed as well.Download the cheat shee for free!Of course, you can use the PDF for all of your projects for free and without any restrictions. The PDF may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you want to spread the word.large preview (.jpg)download the set (.pdf, 2.5 Mb)Behind the designAs always, here are some insights from the designer herself:Originally, I intended to buy a keyboard overlay with Photoshop shortcuts, but couldn’t find any for a PC, just for Macs. So I compiled a list of keyboard shortcuts, and thought they would fit nicely on a mousepad. I think printing it out and hanging it by the monitor works just as well. I hope those learning Photoshop will find it useful, as well as the more advanced users who may have forgotten some of the less-often-used shortcuts. They save a lot of time, and can impress your boss!Thank you very much, Kenneth! We appreciate your efforts.© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 8 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: cheat sheet, PDF, photoshop
- Tags:
- Freebies
- photoshop
- cheat sheet
February 10 2010, 1:40am | Comments »
-
I posted to designmeltdown.com
Registration buttons via sixrevisions.com
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/T5lFiXv2jkg/
Buttons are such a basic necessity of web design, its great to see sets like this that show how much room there is to make them beautiful. http://sixrevisions.com/web_design/a-look-into-registration-buttons-in-web-design/
- Tags:
- Buttons
February 9 2010, 10:00am | Comments »
-
I posted to designmeltdown.com
Good old fashioned navigation
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/Hjn3XrPTOj4/
Its kind of ironic that I have never done a post on beautiful samples of navigation. I have done many on atypical navigation, but never focused on the normal approaches people take. That ends now I suppose. http://webdesignledger.com/inspiration/a-showcase-of-website-navigations-with-serious-click-appeal
- Tags:
- navigation
February 9 2010, 6:00am | Comments »
-
I posted to smashingmagazine.com
Applying Mathematics To Web Design
http://feedproxy.google.com/~r/SmashingMagazine/~3/bjOh_hA3xcY/
“Mathematics is beautiful.” This may sound absurd to people who wince at numbers and equations. But some of the most beautiful things in nature and our universe exhibit mathematical properties, from the smallest seashell to the biggest whirlpool galaxies. In fact, one of the greatest ancient philosophers, Aristotle, said: “The mathematical sciences particularly exhibit order, symmetry and limitation; and these are the greatest forms of the beautiful.”Because of its beautiful nature, mathematics has been a part of art and architectural design for ages. But it has not been exploited much for website design. This is probably because many of us regard mathematics as being antithetical to creativity. On the contrary, mathematics can be a tool to produce creative designs. That said, you don’t have to rely on math for every design. The point is that you should regard it as your friend, not a foe. For illustrative purposes, we created a couple of web designs that present mathematical principles discussed in this article. We are also giving away a couple of PSDs that you can use right away in your next design.Layouts featured in this post were created specifically for the purpose of this article. During the design process we made sure that all of the designs shown in this article are essentially mathematical in nature; that is, they exhibit order, symmetry and limitation. We also have followed the Web design algorithm in this process — the designs have distinct themes, styles and elements. To keep things simple and clear, we tried to stick to minimalist designs and also preferred single-page layouts. Obviously, examples in this article are supposed to serve as a simple foundation for your designs and not as the finished designs.[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]Golden Ratio and Golden RectangleThe golden ratio, also known as the divine proportion, is an irrational mathematical constant with a value of approximately 1.618033987. If the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one, then the quantities are said to have a golden ratio.We already published a very detailed article “Applying Divine Proportion To Web Design” that explains how to use the golden ratio in Web design. In today’s article, we’ll look at how to use golden rectangles in Web design. A golden rectangle is one whose side lengths have the golden ratio 1:(one-to-phi); that is, 1:1.618.The construction of a golden rectangle is very easy and straightforward. First, construct a simple square. Then draw a line from the midpoint of one side of the square to an opposite corner and use that line as the radius to draw an arc that defines the height of the rectangle. Finally, complete the golden rectangle and you are done.A method to construct a golden rectangle. The square is outlined in red. The resulting dimensions are in the ratio 1:Phi, the golden ratio.As an example, consider the minimalist design below. It has six golden rectangles in it, three rectangles per line. The rectangles have the dimensions of 299 x 185 pixels. Thus, the sides of these rectangles adhere approximately to the golden ratio; that is, 299/185 = 1.616. Notice how the large amount of white space surrounding Golden rectangles creates a calm and simple atmosphere in which the navigation options can breathe and serve their purpose. Although the layout uses only few colors and all blocks are positioned very similarly, the navigation options are obvious.Large viewHowever, it may be quite difficult to add a new Golden block while keeping the consistency of the design. Probably the only reasonable design solution here would be to add the block on the third line and use the rest of the horizontal space for other, more or less prominent features (if necessary). You can click on the image below to see the enlarged version.Large viewPossible ApplicationsThe golden rectangle design is well suited for photo galleries, portfolios and product-oriented websites. The golden rectangles can also be arranged in other mathematically sound ways to generate beautiful designs. In particular, you may want to use them for blocks that display images or ads in your sidebar. Of course, the pure collection of golden rectangles doesn’t make for a professional, nice-looking design. You also need to work closely with grids, alignment, proximity and emphasis to achieve the main goals of your design. For instance, an interesting design solution would be a CSS/jQuery-based fluid grid design based on golden rectangles, however we do not cover this technique in this article.Download the PSD-layoutWe prepared a sample PSD layout that is designed according to the Golden Ratio and Golden Rectangle. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.Fibonacci DesignAs the name says, Fibonacci designs are designs based on the Fibonacci sequence of numbers. By definition, the first two Fibonacci numbers are 0 and 1, and each remaining number is the sum of the previous two. Some sources omit the initial 0, instead beginning the sequence with two 1s. So the first two Fibonacci numbers are given, and each remaining number is the sum of the previous two. The higher the Fibonacci sequence gets, the closer its numbers relate to each other according to the Golden Ratio. A Fibonacci sequence goes like this:0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...In music, Fibonacci numbers are sometimes used to determine tunings, and in visual art to determine the length or size of content and formal elements. Jürgen Schmidhuber his methodology for Fibonacci-based designs on his blog. However, if you examine the design he created, you are likely to find it rigid and a bit difficult to read and navigate. Indeed, you need to get a bit creative with math rather than following the rules blindly — maths gives us a guide that we can apply, however it’s rather about implementing sites with maths than implementing maths with our designs.Approximate and true golden spirals. The green spiral is made from quarter-circles tangent to the interior of each square, while the red spiral is a Golden Spiral, a special type of logarithmic spiral. Overlapping portions appear yellow. The length of the side of one square divided by that of the next smaller square is the Golden ratio. SourceThe main idea behind such designs is to use Fibonacci when deciding on the dimensions for content area or sidebar. Both Golden ratio and Fibonacci let designers rely on sound, common ratios for page containers or blocks within page containers.In general, layouts are quite easy to build using the Fibonacci sequence. You pick a certain base width first — for instance, 90px. Then, when determining the size of your containers, you multiply the base width with the numbers from the Fibonacci series. Depending on the calculations you get, you need to use them either for your page blocks. Let’s take a look at an example. Below is a minimalist typography blog based on Fibonacci Web design.Large viewYou can see that the page is divided into three columns. Each column corresponds to a Fibonacci number. For this design, we used a base width of 90 pixels. This base width is then multiplied by a Fibonacci number to get the total width for a particular column. For example, the first column has a width of 180 pixels (90 x 2); the second column has a width of 270 pixels (90 x 3); and the third column has a width of 720 pixels (90 x 8). The font size also corresponds to a Fibonacci number. The blog heading has a size of 55px; the article’s heading is 34px; and the content is 21px.The downside of layouts based on the Fibonacci sequence is that it’s difficult to use it if you are given certain fixed width layout dimensions (e.g. 1000px). In this situation it’s easier to use the Golden ratio, as you would simply multiply 1000px with 0.618 and get 618px which would be the ideal width for your content block. However, if you try to achieve the same result with the Fibonacci sequence itself, you first need to figure out the sequence to the 1000 range.According to the Fibonacci sequence calculator, the sequence would be ...,610, 987, 1597.... Indeed, 987 is a good fit and you can start picking the widths for smaller blocks using the previous numbers in the sequence. But if your fixed width layout is smaller or lager, you would need to use some approximate values which would again result in pure guessing. The problem may also occur in liquid or elastic designs to some extent, but you have much more design freedom there.Possible ApplicationsA Fibonacci design is best suited to blogs and magazine layouts. You can arrange the layout in different ways according to Fibonacci numbers. The article “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web” (in French) explains in more depth the application of Fibonacci numbers to Web design. Again, notice that you need to be creative when using Fibonacci sequence in your designs, otherwise your designs will turn out to be too rigid and hence difficult to use and navigate.Download the PSD-layoutWe prepared a sample PSD layout that is designed according to the Fibonacci sequence. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.Five Elements, Or Kundli DesignAnother interesting layout technique comes from the Indian horoscopes which are also called Kundli. Basically, a Kundli is a very simple figure can be made in just three steps. Draw a square, and then cross the two diagonals. Join the mid-points on each side of the square to get the Kundli figure. You’ll notice four right-angle rhomboids in the figure. These are the basis for our Web design.The design below, then, is based on the Kundli geometric layout. You’ll notice that the chakras in the design also have mathematical properties.Large viewThis is a single-page layout. Clicking on an element reveals more information about it, as shown in the figure below. You could also include some simple jQuery animations or jQuery tooltips that would reveal more information on demand. A further step would be a sliding web page where animation is used to display different content blocks; you may also want to change the background images of the single content areas to make them a bit more distinctive.In the following figure, you can see that our design is just a simple three-column layout: a header, three columns and a footer. Not complex at all.Possible ApplicationsThis design is best for displaying product information and portfolios. You can spice it up with JavaScript animation frameworks. For example, you can apply color transformations to the chakras by using Raphael library, or you can add freestyle animations using jsAnim library. You can have a tree sprout when the user clicks on the Earth element, or you can show sea creatures swimming in the water element. The sky is the limit when it comes to animation using these JavaScript libraries.Download the PSD-layoutWe prepared a sample PSD layout that is designed according to the Kundli design. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.Sine Wave DesignWhen it comes to mathmatics, you do not need to stick to well-known Golden Ratio or Fibonacci sequence. You can also experiment with formulas from physics, chemistry and other sciences by using more general formulas and values in your designs.For instance, let’s consider the sine wave, or sinusoid, a mathematical function that describes a smooth repetitive oscillation. We used a simple sine wave pattern as the basis for a simple and original Web design and create a single-page layout. Of course, you can use the same approach for other designs such as graphics or infographics.Large viewThe layout is again very simple, consisting of a header, five columns and a footer. You can use a jQuery tooltip to make the design more interactive.Possible ApplicationsThis wave pattern occurs often in nature, including ocean waves, sound waves, and light waves. Also, a rough sinusoidal pattern can be seen in plotting average daily temperatures for each day of the year, although the graph may resemble an inverted cosine wave. You can also use it to display a timeline of events. It could even be developed to include horizontal navigation. You can make it more interactive with the jQuery highlighter plug-in, which highlights each element (i.e. DIV) so that the user can focus on the content.Download the PSD-layoutWe prepared a sample PSD layout that is designed according to the Sine Wave design. Please feel free to use it in any way and please send the link to this article to your colleagues if you want to spread the word.Other TechniquesRule of ThirdsThis rule states that an image should be imagined to be divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. It can also be expressed as a simplified mathematical approach that divides any layout into thirds, left to right and top to bottom.Musical LogicThe rhythmic or thematic structure of musical compositions can be applied to distances between elements in a layout, like ABA, ABAC, etc. Learn more about music and mathematics in this Wikipedia article.Useful Links and ResourcesWikipedia articlesSacred GeometryProportionCanons of Page ConstructionArticlesMathematics in Art and ArchitectureDesign and Divine ProportionCreate Awesome Geometrical Designs, MyoatsPhotographer Loves Math, Graphs Her ImagesTypograph: Scale and RhythmMichael Paunker – Art and MathBooksGeometry of DesignEuclid’s ElementsMathematics in NatureWe hope you’ve enjoyed this article on mathematics and Web design. Hopefully you now see mathematics not as a hindrance to creativity, but as a friend. Embrace it!(al)© Adit Gupta for Smashing Magazine, 2010. | Permalink | 11 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: fibonacci, golden ratio, mathematics
February 9 2010, 4:52am | Comments »
-
I posted to designmeltdown.com
More tasty portfolio sites
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/k8wK_AOiWBo/
Here is a fresh set of beautiful portfolio sites to inspire your next adventure in building your own site. Good luck, I am sure you will need it! http://webdesignledger.com/inspiration/50-inspiring-portfolio-designs
- Tags:
- portfolios
February 8 2010, 6:00am | Comments »
-
I posted to smashingmagazine.com
Color Theory for Designer, Part 3: Creating Your Own Color Palettes
http://feedproxy.google.com/~r/SmashingMagazine/~3/qlspp0QmCYQ/
In the previous two parts of this series on color theory, we talked mostly about the meanings behind colors and color terminology. While this information is important, I’m sure a lot of people were wondering when we were going to get into the nitty-gritty of actually creating some color schemes.Well, that’s where Part 3 comes in. Here we’ll be talking about methods for creating your own color schemes, from scratch. We’ll cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern. By the end of this article, you’ll have the tools and skills to start creating beautiful color palettes for your own design projects. The best way to improve your skills is to practice, so why not set yourself a goal of creating a new color scheme every day.[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]A Quick ReviewLet’s start with a quick review of what was covered in parts 1 and 2. In part 1, we talked about how all colors have inherent meanings, which can vary depending on the country or culture. These meanings have a direct impact on the way your visitors perceive your site, even if it’s just subconsciously. The colors you choose can either work for or against the brand identity you’re trying to create.In part 2, we covered color terminology: hue (what color something is, like blue or red); chroma (how pure a color is, the lack of white, black or gray added to it); saturation (the strength or weakness of a color); value (how light or dark a color is); tone (created by adding gray to a pure hue); shade (created by adding black to a pure hue); and tint (created by adding white to a hue). These are important terms to know as we move forward and create our own color schemes.Traditional Color Scheme TypesThere are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners. Below are the traditional schemes, with a few examples for each.The basic, twelve-spoke color wheel is an important tool in creating color schemes.MonochromaticMonochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).Examples:Here are three examples of monochrome color schemes. For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.AnalogousAnalogous color schemes are the next easiest to create. Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Generally, analogous color schemes all have the same chroma level, but by using tones, shades and tints we can add interest to these schemes and adapt them to our needs for designing websites.Examples:This is a traditional analogous color scheme, and while it’s visually appealing, there isn’t enough contrast between the colors for an effective website design.Here’s a color scheme with the same hues as the one above, but with the chroma adjusted to give more variety. It’s now much more suitable for use in a website.Another example of a traditional analogous scheme.And the above theme modified for use in a website design.ComplementaryComplementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades. A word of warning, though: using colors that are exact opposites with the same chroma and/or value right next to each other can be very jarring visually (they’ll appear to actually vibrate along their border in the most severe uses). This is best avoided (either by leaving white space between them or by adding another, transitional color between them).Examples:A wide range of tints, shades, and tones makes this a very versatile color scheme.Another complementary color scheme with a wide range of chromas.Don’t forget that beige and brown are really tints and shades of orange.Split ComplementarySplit complementary schemes are almost as easy as the complementary scheme. In this scheme, instead of using colors that are opposites, you use colors on either side of the hue opposite your base hue.Examples:A scheme where yellow-green is the base hue. It’s important to have enough difference in chroma and value between the colors you select for this type of scheme.Another palette with a wide range of chromas.TriadicTriadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.Examples:Using a very pale or dark version of one color in the triad, along with two shades/tones/tints of the other two colors makes the single color almost work as a neutral within the scheme.Alternately, using one very bright hue with paired muted hues makes the single bright hue stand out more.Double-Complementary (Tetradic)Tetradic color schemes are probably the most difficult schemes to pull off effectively.Examples:A rather unimpressive tetradic color scheme. The best way to use a scheme like this is to use one color as the primary color in a design and the others just as accents.Tetradic color schemes can work well for creating color schemes with similar chromas and values. Just add a neutral (such as dark gray or black) for text and accents.It works just as well for darker color schemes.CustomCustom color schemes are the hardest to create. Instead of following the predefined color schemes discussed above, a custom scheme isn’t based on any formal rules. Keep in mind things like chroma, value, and saturation when creating these kinds of color schemes.Examples:The colors here all have similar chroma and saturation levels.Again, using colors with similar chroma and saturation is effective and creates a sense of cohesion across a color scheme.Using one color with a high chroma among other colors with lower chromas is another effective method (the higher chroma color can act as an accent).Creating a Color SchemeCreating your own color schemes can be a bit intimidating. But it’s not as complicated as many people think. And there are quite a few tricks you can employ to create great color palettes right from the start.We’ve been over the different types of color schemes above. Now, let’s try creating a few of our own. There are plenty of tools online that will help you create a color scheme, but let’s forget about those for now and just use Photoshop.Lets try breaking away from the color scheme types already mentioned, and create some custom schemes. While it’s important to know the ways that different colors interact and how traditional schemes are created, for most design projects you’ll likely create custom schemes that don’t strictly adhere to any predefined patterns.So, for the purposes of our project here, we’ll create three color schemes each for two different websites. Our hypothetical clients are a modern architecture design blog and a high-end women’s clothing retailer who specializes in Victorian-influenced apparel.We’ll start with a basic monochromatic scheme, just to get a feel for each. While I mentioned that traditional color scheme patterns aren’t used as often in design, monochomatic color schemes are the exception to that rule. You’ll likely find yourself using monochromatic schemes on a fairly regular basis.For our apparel store, here’s a traditional monochromatic scheme, with white added in as a neutral.For our design blog, we’ve gone with a color scheme made up of shades and tints of gray.This is almost an analogous color scheme, but we’ve left out one color. It’s made up of shades of purple and reddish-purple. These two colors fall next to each other on the color wheel, and work well together, especially when they’re used in different values and saturation levels.Adding a couple shades of red to the gray color scheme adds a lot of visual interest and the potential for creating extra emphasis on certain parts within your designs.Here, we’ve gotten rid of the purple hues and switched over to a burgundy. Again this is next to the reddish-purple on the color wheel. We’ve also added in a very pale yellow tone, which sits opposite purple on the color wheel. This serves as our neutral, and looks more like an off-white color when compared to our other hues.While this color scheme at first glance looks like another standard gray and red palette, if you look more closely you’ll see that the grays are actually tones of blue. Blue and red make up two thirds of a tetradic color scheme, but work just fine together without yellow, especially when the red is kept pure but the blue is toned down to the point of almost being gray.Why Shades, Tones, and Tints Are ImportantAs you can see from the color schemes above, using tints, tones, and shades in your color schemes is vital. Pure hues all have similar values and saturation levels. This leads to a color scheme that is both overwhelming and boring at the same time.When you mix in tones, shades, and tints, you expand the basic 12-spoke color wheel into an infinite number of colors for use in your designs. One of the simplest ways to create a professional looking color scheme is to take a few tones, tints, and shades of a given color (avoiding the pure hue), and then add in another pure hue (or close to pure) that’s at least three spaces away on the color wheel (part of a tetradic, triatic, or split-complementary color scheme) as an accent color. This adds visual interest to your color scheme while still retaining a sense of balance.Adding in Some NeutralsNeutrals are another important part of creating a color scheme. Gray, black, white, brown, tan, and off-white are generally considered neutral colors. Browns, tans, and off-whites tend to make color schemes feel warmer (as they’re really all just tones, shades, and tints of orange and yellow). Gray will take on a warm or cool impression depending on surrounding colors. Black and white can also look either warm or cool depending on the surrounding colors.Black and white are the easiest neutrals to add into just about any color scheme. To add a bit more visual interest, though, considering using a very light or very dark shade of gray in place of white or black.Adding browns, tans, and off-white hues are a bit trickier, but with some practice you’ll find adding them gets easier. For browns, consider using a very dark, chocolate brown in place of black. A pale off-white can be used in place of white or light gray in many cases. And tan can be used in place of gray, as well (create a tone by adding some gray to make it even easier).Using Photos for Color SchemesOne of my personal favorite ways to create a color scheme is to use a photograph. There are automated tools online that can do this automatically for you (Adobe Kuler is one of them, and my personal favorite), or you can do it in Photoshop yourself.Using Adobe Kuler, you can either browse or search for photos on Flickr, or you can upload your own image. If you’re stumped for what colors you want to use in a website design, try searching for related words on Flickr. Sometimes this can result in finding color schemes that you might not have thought of on your own.Let’s try this method out, both ways (using Kuler and Photoshop). Find a photo you like on Flickr, one that you think evokes the feeling of the design you want to create. I chose this one:Here’s the original color scheme that Kuler gives us when using this image:One of the coolest features Kuler has for creating color schemes from images is their “Select a Mood” option. Included here are Colorful, Bright, Muted, Deep, and Dark. These are the schemes we get when using each of those moods with the same photo:ColorfulBrightMutedDeepDarkNow, let’s create a color scheme in Photoshop using the same image. This is a bit less scientific than the way Kuler does it. I usually just pick a color with the eyedropper tool, and then keep clicking on different spots in the image until I find other colors that go with it. Here are the results (this took less than five minutes to do in Photoshop, so it’s not as time-intensive as it sounds):Creating color schemes from images in Photoshop is easiest with images that are relatively monochromatic to begin with. With more colorful images, it gets trickier.Let’s try another one, something more colorful this time. Here’s the original image we’ll work with:And here are the five color schemes that Kuler gives us from this image:ColorfulBrightMutedDeepDarkAnd here’s what I came up with in Photoshop using the same image:As you can see, the Photoshop version I came up with is completely different than what Kuler came up with, but all of the schemes above are visually appealing. The Photoshop version here took a bit longer than the one above, partly because of the diversity of colors present in the image.The Easiest Color SchemesWe’ve touched on this a bit before, but adding a bright accent color into an otherwise-neutral palette is one of the easiest color schemes to create. It’s also one of the most striking, visually. If you’re unsure of your skills in regard to creating custom schemes, try starting out with these types of palettes.Here are a few examples to give you an idea of what I’m talking about:You can see here how using browns instead of grays makes the entire scheme look warmer, even with the blue accent color.You can use tones of any color instead of gray or brown in this type of scheme, just keep it very close to the gray end of the spectrum for the most fool-proof results. As a general rule, cool grays and pure grays are best for more modern designs. For traditional designs, warmer grays and browns often work better.How Many Colors?You’ll notice that throughout this post we’ve used color schemes with five separate colors. Five is a good number that gives plenty of options for illustrating the concepts here, and it’s a workable number in a design. But feel free to have more or fewer colors in your own schemes.A lot of websites might only use three colors in their designs. Others use only two. And some might use eight or ten (which is a lot trickier than using fewer colors). Experiment and use as many or as few colors as you need to for your design. But you may want to start with a palette of five colors, and then add or subtract as you see fit and as you progress through the design process.The easiest way to add a color is to start with one of the predefined, traditional color schemes and then work out from there. That at least gives you a bit of direction as far as which other colors to consider.10 Sites With Great Color SchemesTo give you more inspiration, here are ten websites that have excellent color schemes. Some of the schemes below might look a bit odd at first glance but seeing how they’re actually used shows the wide range of possibilities color schemes can present.Wentings Cycle & Mountain ShopScheme:Trivuong.comScheme:Oscar BarberScheme:North East Peace III PartnershipScheme:mbA ArchitectsScheme:Studio 13Scheme:Joy ProjectScheme:Morphix BlogScheme:El DesignoScheme:LemonStandScheme:ConclusionWe’ve really only just touched on color theory in this series. There are specialists out there who have literally spent years refining their ability to choose colors that are appropriate to any situation.The best way to learn to create beautiful color schemes is to practice. Create a scheme on a daily basis. You can use automated tools to do this at first (like Kuler’s tool for creating schemes from images), or just open up Photoshop and start. If you see a particularly beautiful or striking color in your daily life, try creating a scheme around it. And take advantage of all the sites out there that let you upload your color schemes and organize them for later reference. This makes all those color schemes more practical and easier to use in the future.Further ResourcesHere are some additional resources that should help you in creating your own color schemes, as well as some links with more information about traditional color schemes.10 Super Useful Tools for Choosing the Right Color PaletteA round-up from Web Design Ledger that covers ten great tools for finding and creating color palettes.100 Random Colors 2.0This page will load 100 random colors, with hex codes. It’s a great place to check if you’re looking for color inspiration.Classic Color SchemesThis article from Color Wheel Pro covers all the traditional color schemes in detail, with examples.ColorMunkiAnother color scheming tool. Their library colors tab is particularly useful for finding and creating monochromatic color schemes.ColorSchemerA color scheme gallery and tool with a free online version.ColourLoversA community for color and design that includes a huge gallery of color palettes, search functionality as well as tools to create your own color palettes.© Cameron Chapman for Smashing Magazine, 2010. | Permalink | 8 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: colors
February 8 2010, 3:58am | Comments »
-
I posted to designmeltdown.com
75 Slick business cards
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/CSlJs5PmBGM/
I hope you don’t get to tired of business card articles. There just seems to be a ton of them, and I am sucker for them. http://acrisdesign.com/2010/02/75-fresh-business-cards-for-design-inspiration/
- Tags:
- Business Cards
February 7 2010, 11:00pm | Comments »
-
I posted to smashingmagazine.com
SimpleFolio: A Free Clean Portfolio WordPress Theme
http://feedproxy.google.com/~r/SmashingMagazine/~3/LSko0rG6YXQ/
Today we are glad to release a beautiful, simple and clean portfolio WordPress theme — SimpleFolio, designed by Omar E. Corrales and released for Smashing Magazine and its readers. SimpleFolio is a portfolio theme that includes a blog and a very extensive option page that allows you to exclude all your portfolio items from the blog page. It also includes a front page slider.It has 2 different widget areas and threaded comments, and also supports paged comments and has 2 different page templates for advanced usage. The control of images is done from the post page.Download the theme for free!The theme is released under GPL. You can use it for all your projects for free and without any restrictions. You may modify the theme as you wish. Please link to this article if you want to spread the word.live demolarge preview (main page)large preview (portfolio page)large preview (single post page)large preview (back-end options page)download the .zip-package (.zip, 0.93 Mb, including installation guidelines)release post on designer’s siteFeaturesHere are some of the features of the theme:CSS-based layout,2 columns of fixed width,widget-ready,XHTML 1.0 Transitional valid,multi-browser compatibility: tested on Firefox, Safari , IE7, IE8, Chrome,easy to setup, theme options page,JQuery Lightbox,AJAX-based based contact form,Live form e-mail validation.Front pagePortfolioPortfolioOptions page in back-endSingle post, main areaSingle post, threaded commentsSingle post, sidebarBehind the designAs always, here are some insights from the designer:I created this theme after getting tired of all the fancy design themes that are very popular now a days, this is a design for people that just need the job done without complicating them selfs. The best use can be either for just someone thats starting to blog or some artist that needs to expose there art.Thank you, Omar. We appreciate your work and your good intentions!© Elja Friedman for Smashing Magazine, 2010. | Permalink | 17 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: wordpress
February 7 2010, 8:35am | Comments »