If you’re the kind of Photoshop user who primarily opens the software to resize and crop images, you might never touch the Brush tool. However, if you’re in Photoshop day-in and day-out, Brushes are likely to be your best friend. Having as many options as possible will undoubtedly make your life a little better. And if those options are free, then maybe it will be a lot better.
While many brushes emulate real-world artists’ tools, not every single one does so. Dispersion is a free Photoshop brush that gives you the unique effect of shattering (or dispersing) parts of your work. Doing an effect like this by hand would be incredibly time-consuming. But with Dispersion, a few clicks and strokes…and you’re good to go. This particular set comes with 20 high-resolution brushes for pretty much anything that you could want to do with it.
It may have been given a bad rap in pop culture lately because of its overuse in some movies, but lens flare is an effectthat can really take a design to the next level. Using it sparingly and effectively in your designs can give a feeling of peace and calm or even of adventure and excitement just by placing a single flare in a work. Don’t overdo it with this set of 20 high-res brushes, and your work will undoubtedly impress your clients.
Superheroes are everywhere these days, and at some point, a client is going to want a comic- or superhero-themed design. You might as well prepare yourself for that by downloading this 15-brush set, aptly called Comic. There is no way that having this set of brushes won’t save you time and effort.
The creative nerds over at Creative Nerds have put together some delightfully pretty spray paint-themed free Photoshop brushes for you to download. This one does cost you an email address to unlock the freeness, but it’s worth it. While PS does come with some spray brushes, they can be pretty limited. The nerds have done a great job of letting your brush strokes more realistically splatter the digital canvas with the speckles that give real spray paint its allure.
If spray painting isn’t your style, but you really like that abstract look, maybe the Watercolor Splatters 32-brush set will work for you. Even in more specific and detailed work, you can use a splatter brush for accent and distressing.
Stone 4 is actually full of 15 free Photoshop brushes. Instead of having to deal with masks and layers to achieve a stone-like finish, wouldn’t you just prefer to press B and pick a brush to do it for you? We certainly would. In terms of a time-saving brush that will certainly improve your quality-of-life, Stone 4 doesn’t disappoint. While some brushes and styles go in and out of trend, having a solid, stone brush that you can turn to never goes out of style. Clients will always need this kind of look to emphasize professional power and authority, so grab these 15 and help empower them. There is also a Stone 1-3, too. Stone 3 is extra pretty, too.
Much like Dispersion at the top of the list, Shattered gives you a fantastic effect that can improve your quality of life and give clients a unique design in much less time than hand-creating every shard. While we generally see this kind of effect in logos and advertising, there are a lot of uses for it in web design that can create some unique page transitions and effects. And at least with this broken glass, you don’t have to worry about cutting your fingers.
Smoke is one of those elements that you can use in pretty much any design for any reason, and it would fit. So grabbing Smoke Brushes is a no-brainer, we think. Whether you’re enhancing the mystique of an evening’s photoshoot, giving website users a tour of mystery, or adding wispy whimsy to lettering or illustration, this set of free Photoshop brushes will be right at home in any designer’s toolbox.
Retro technology is everywhere right now. What is old is new again, and what is new again at this moment is ’80s-style technology. And while for its day, the tech was amazing, we’ve come to associate the occasional fuzzy screen and flicker or glitch with the time period as well. Because it’s so trendy and popular, keeping a few brushes to emulate the glitches of decades past would not be a bad idea. In fact, it would be a good one. Additionally, this isn’t the only set of Glitch brushes available. As you scroll down the page for this particular set, you will find over a dozen variants in the series to create whatever kind of computer problems or corruption your clients might need.
In life, glitter can be a pain. While it’s gorgeous and adds sparkle to literally anything, that sparkle is sometimes hardimpossible to get rid of. Not true in the digital realm, where you can add as much glitter to your designs as you or your clients want. This is the one time that it’s okay to glitterbomb someone or something. There’s no clean up required, and there won’t be any tiny pieces stuck to places you don’t want. With these fabulous free Photoshop brushes, any design you create will shine as bright as you can imagine.
The Ultimate Guide to Understanding and Using “The Golden Ratio”.
Designers everywhere should know about the Golden Ratio. It is a mathematical ratio that creates aesthetically pleasing designs. Since the Golden Ratio exists so frequently in nature, it’s not a surprise that its results are natural-looking.
Photo by Bogomil Mihaylov on Unsplash
The Golden Ratio goes by several other names, too:
Phi (Greek letter)
The Math Behind the Golden Ratio
I’m going to explain the Golden Ratio’s math as simply as possible and without going into the details you don’t actually need to know. If you can keep up with the math, great. But if you can’t, that’s okay – you’ll still be able to use the concept in your designs.
To understand the Golden Ratio, you have to first understand the Golden Rectangle
The Golden Rectangle is a large rectangle that has a square inside it. The sides of the square are equal to the shortest length of the rectangle:
The Golden Ratio is a number that’s (kind of) equal to 1.618, just like pi is approximately equal to 3.14, but not exactly.
You take a line and divide it into two parts – a long part (a) and a short part (b). The entire length (a + b) divided by (a) is equal to (a) divided by (b). And both of those numbers equal 1.618. So, (a + b) divided by (a) equals 1.618, and (a) divided by (b) also equals 1.618.
Back to the Golden Rectangle, because it’s so much easier to understand
When you place a square inside the rectangle, it creates another, smaller rectangle. Ignore the black lines and look at the red and green boxes:
The red square has four sides equal in length, and that length is equal to the shortest length of the rectangle. By sectioning off that square, you automatically create another, smaller rectangle (outlined in green). Together, they create a complete Golden Ratio layout and a base for the Golden Spiral.
You can also make a new Golden Rectangle out of the smaller rectangle, like this one I’ve outlined in blue:
A traditional Golden Ratio diagram has eight Golden Rectangles:
And here’s the smallest Golden Rectangle, #8:
If you start in the bottom left and make an arch to connect the far side of each square-and-small-rectangle cross section, you’ll get the Golden Spiral.
The Fibonacci Sequence
The Fibonacci Sequence is pretty simple to understand: you start with zero and 1, then get the next number by adding up the two numbers before it. 0 + 1 = 1, then 1 + 1 = 2, etc. The first few numbers in the sequence are 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.
If you use those numbers to create squares with those widths, you can pretty much create a Golden Spiral:
Source: Math is Fun
The Golden Circles
Sometimes, you’ll see circles drawn in the squares instead of or in addition to the spiral. If you draw perfect circles in the boxes of the Golden Ratio overlay, they’ll have the 1:1.618 ratio with one adjacent circle.
Source: Limelight Department
The Pepsi and Twitter logos use the Golden Circles:
Source: Hybrid Talks
You’ve Seen This Before, A Lot
Nature is full of the Golden Ratio. It’s in flora, shells, weather…
Source: Photo by Annie Spratt on Unsplash
Source: Photo by NASA on Unsplash
And because we see it so often, our brains prefer it. That innate attraction is why it’s such a powerful layout for designers to use.
The Golden Ratio in Art and Design
Sometimes the Golden Ratio super easy to recognize:
Sometimes you go, “I have no idea what you’re talking about… oh wait. Now I see it. I think.”
Source: Marketing Insiders
Other times you could go crazy looking at it…
…but if you zero in on the main Golden Rectangle, it becomes a little more clear:
Let’s take a look at a commonly-referenced example: the Parthenon
Source: Creative Bloq
At first, you might see this and go, “That just looks symmetrical to me. How does what I’m looking at fit into that Golden Rectangle Spiral thing?”
The Golden Ratio isn’t about how each part of a design fits completely and only into the specific sections. If that was the point, the right side of the Parthenon would be one big block and the left side would be sectioned into smaller blocks.
Instead, the ratio is used to create harmony and proportion, and that can be interpreted in a few different ways.
While the Golden Ratio is grounded in math, it can be adapted in creative ways. In the case of the Parthenon, the Golden Ratio determines the height and placement of design components. Plus, there are a number of ways to lay Golden Ratio diagrams over it:
Source: Esther Sugihto on Medium
The Golden Ratio and Website Design
Whether you’re into math or your head’s about to explode, the Golden Ratio is a bit easier to understand in terms of design. You’ve done the heavy lifting. Now it’s time to take the basic overlay and make your web components perfectly pleasing.
The Golden Ratio and Layout
If you want a perfect Golden Ratio layout, set the dimensions to 1:1.618. For example, you can set the width to 960 pixels and the height to 594 pixels. The Golden Rectangle is 594 pixels on each side and the rectangle takes up the rest of the layout (594 x 366).
Calculator Soup has a helpful Golden Ratio calculator where you can set any term (A, B or A + B) to find the correct Golden Ratio values.
Or, you can simply use this type of two-column layout, where one column is quite a bit wider than the other column. It’s organized and clearly shows hierarchy.
Source: National Geographic
The Golden Ratio and Spacing
The Golden Ratio can help you determine where to place elements of your design, the proportions to use and where to leave negative space. Here’s a simple example, and you can almost see the Golden Ratio overlay without even having to put it on top:
Source: Digiarts 2011
Here’s what it looks like when I apply the Golden Spiral in Photoshop:
Again, the Golden Ratio is grounded in math, but when it comes to applying it to design, it’s not perfect. That design isn’t created on a Golden Rectangle, so the Golden Spiral is out of normal proportions. However, you can see how it can guide a designer to choose where to put the largest element of the design, as well as the smallest elements and negative space.
You can also layer the Golden Ratio overlay to apply it to different elements of the same design:
Source: Branding by Lemongraphic. Example from Canva.
The Golden Ratio and Content
When you think about the Golden Ratio’s layout and spacing together, you can start deciding where to place content on your website.
Let’s look at the National Geographic website again, this time with Canva’s Golden Ratio overlay on it:
The layout is split so that content lines up along the spiral’s center line. To the left, there’s a large block of content. To the right, the content becomes denser and there’s a lot more negative space. Toward the center curlicue of the spiral, you’ll see a second National Geographic logo – there’s no better way to drive home branding than to place it where the eye naturally goes.
Here’s a great example of how the Golden Spiral can lead your eye through a design, even past its main component. This is useful if you have a lot of content to squeeze onto one page. You’ll also notice that even with such a packed and detailed design, there’s still negative space in there.
Source: Design by Helms Workshop. Example from Canva.
Honorable Mention: The Golden Ratio and Images
The Golden Ratio is also used in photography composition. Instead of creating a Golden Spiral, the Golden Ratio splits the image into six blocks. The same Golden Ratio is used in this type of grid: the widths and heights of the sections are either 1 or 0.618.
You then use the intersections to compose the shot. The goal is to put a subject or main part of a subject on one of the intersecting lines – the subject shouldn’t be centered, and some blocks should be left empty (in most cases, at least – macro photography and close-up portraits will fill almost all of the frame). By doing this, you create a more interesting portrait than if the subject were centered.
A much simpler and more accessible way to follow this rule is to use the Rule of Thirds grid, which you probably have on your phone’s built-in camera or your DSLR.
Here’s a picture I took of my cousin’s son. I’ve laid the Rule of Thirds grid over it to show you where the subject does, and does not, fill the frame.
Also, look how the Golden Spiral almost-perfectly wraps around the subject:
The Golden Ratio differs from the Rule of Thirds because the Rule of Thirds grid has sections with equal lengths and widths. However, it’s so close – and so much easier – that this is what photographers commonly use when composing or editing a photo.
The Golden Ratio can be used as-is or adapted to your purposes and tweaked for size – math may have hard-and-fast rules, but creativity doesn’t. While you can use the Golden Ratio from the get-go to guide your design, you can also use it after you’ve started designing to make tweaks and improvements. The goal is to have the ratio guide you, not to force fit a design into it.
When designing for the web, you have to keep one thing in mind at all times: readability. It doesn’t matter how great the design is, how gorgeous your layout is, or how genius your use of color. If people can’t read the words on the screen (and this is assuming there are words on the screen, of course), the website cannot serve its function. Three of the most important elements of readability for text are kerning, tracking, and leading, though many people either get them confused or simply don’t understand how to use them effectively. We intend to fix that today.
Kerning, Tracking, and Leading
If you boil these three down to the absolute fundamentals, you’re looking at the spacing between characters on both the X and Y axes. Digging in, you’ll see there’s more to it than that, but in essence, you’re looking at the relationship between text characters. It’s important to understand the relationship between these three attributes because good design and readability depend on your using them to the best of your ability.
And that comes with time and practice. But once you start paying attention to them, you’ll notice how kerning, tracking, and leading are used both effectively and poorly on everything you read and see on a daily basis. Let’s dig in.
Adjusting Kerning, Leading, and Tracking (and More!)
Actually, before we dig in, let’s go over how you change and adjust these settings. While most word processing programs have options for adjusting them, most people won’t ever need to when writing copy or typical text. It’s when you’re designing text that it becomes more of an issue, so programs like Photoshop, Illustrator, etc. will have the options you need most.
In the Adobe products, you just have to open up the Text Layer Character Panel, and you have everything you need. The V/A is kerning, the VA in a box is tracking, and the underlined, vertical A’s are Leading. You can also adjust strikethrough, weight, size, super/subscript, and so much more in this panel. It’s worth getting used to keeping this open.
Just place your cursor where you need to adjust the spacing and go.
What is Kerning?
Let’s begin with kerning. Kerning is the simplest of the three, really. It’s the space between two side-by-side characters. In a word, you can have variable kerning because the space between the first two letters may be different than between the last two (and so on).
In monospaced fonts, each character takes up exactly the same amount of horizontal space with no overlap. The A is the same width as the B as the J as the K. Adjusting the kerning between these letters tends to be easier than variable spaced fonts, where the letters might overlap as well as print at different widths.
In the example above, we have three lines that were copy and pasted using the monospace font Courier New. The top row’s kerning is set at 0, which is the default and uses whatever spacing the font designer chose. The second row is set equally between letters (and spaces) at 200. As you can see, the spaces are uniform between characters across the line. Finally, the third line was kerned at random with both positive and negative spacing within each individual word. As you can see, each character can have different kerning on each side.
What is Tracking?
Tracking is similar to kerning, but it’s not kerning. Where kerning is the space between two individual characters, tracking is the uniform space between each individual word or line. Instead of worrying about how things are put together on a letter-by-letter basis as with kerning, you make sure the entire line is uniformly spaced. Looking back at the earlier example image, the second line could have been done in a much easier way.
What I did for the kerning was to place my cursor between each individual character and adjust to 200. I essentially tracked the whole line. Which is what you should do. Simply highlight what you need to track and adjust it in the Character Panel.
Be aware, however, that some fonts and scripts may become unreadable as the tracking is adjusted.
Handwriting fonts and cursive typefaces are set with specific kerning, and if you adjust the tracking, you will get gaps in an otherwise unbroken line. Or going the other direction to compress the lines, you might simply make the script unreadable.
What is Leading?
With Leading, you’re no longer dealing with spacing between characters. Leading is the space between lines.
Effectively making use of leading lets you effectively make use of whitespace in your designs. Cramped lines — even with correct and well-done kerning/tracking — can make a miserable experience for readers.
In some places, you might see leading called line height, but they’re roughly the same thing. One good rule of thumb is to make sure that you leave at least a little space above and below your characters. As you can see in the top example, a 40px font has a 48px line height. That means that no matter what, there will be spacing between the letters. If you set that at or lower than the font size, you will get character overlap.
Additionally, this is the height of the line that the characters sit on. This is not the height of the character. Just as kerning and tracking don’t make the characters fatter or thinner, tracking doesn’t make them shorter or taller. It is simply the space around them.
As you can see, however, the options under the kerning/tracking in the Photoshop Character Panel adjust the width/height of characters independently of kerning, tracking, and leading.
Photoshop/Illustrator Keyboard Shortcuts
The only downfall of the Character Panel is that it gets to be pretty annoying when you’re needing fine adjustment. Thankfully, there are keyboard shortcuts that make kerning, tracking, and leading an absolute breeze to use.
These shortcuts are for the Adobe Creative Cloud suite, so they might be different in Gimp or Paint.NET or another program.
Kerning – With the cursor between two characters, hold ALT (or Option on Mac) and use the left/right arrows to adjust the kerning
Tracking – With the word/line highlighted, hold ALT (or Option on Mac) and use the right/left arrows to adjust the tracking of the highlighted text
Leading – Highlight the lines you want to adjust, hold ALT (or Option on Mac) and use the up/down arrows to adjust the space between lines
While you can place your cursor or highlight the text and type values into the Character Panel, the keyboard shortcuts make the whole process much less tedious and time-consuming. Plus, you get more granular control, so you can make better designs that way, too.
(As an aside, if you aren’t using Photoshop/Illustrator/Premier, etc. keyboard shortcuts regularly, we highly recommend learning, as it makes your workflow much smoother, more enjoyable, and more productive, too.)
Kerning, tracking, and leading are fundamentals of readable text in web design (and design in general). Learning the difference and how to use each of them effectively will make you a much better designer. It may seem a little odd that something as simple as the spacing between letters and lines could have such a large impact, but once you deal with it for even just a little while, you will never look at websites, advertisements, logos, or billboards the same way again.
VR has been notoriously difficult to advertise on regular video, but this playful and inspired spot from Samsung found a way in—via a flightless bird who learns to virtually soar. A wonderful idea brought to life with exquisite CGI.
Inspiration can disappear when you need it most. In a perfect world, we would all just wait until inspiration strikes again. Sadly, the world rarely works that way. Most of us need to deal with clients and deadlines on a weekly basis.
Like other writers and designers, I have spent long periods of time staring at a computer screen, waiting for something to happen. This frequently occurs when I have not had a good night’s sleep or when I have not done enough research on a topic. To avoid writer’s block, I do my utmost to stay up with the latest news and events. I also research every subject thoroughly before attempting to write an article.
Similar techniques can be used by designers. I believe that like writing, the hardest part of design is sometimes the idea, not the implementation.
Truth be told, I am a terrible designer. Beyond making basic edits to images and creating simple logos, I am fairly useless. The famous art quote “I don’t know anything about art, but I know what I like” was written specifically about me. Once I see a design, I know if I like it or not; however explaining to a designer what kind of design I need for a project has proved difficult in the past.
Over time, I learned how to find inspiration for web designs. Just like preparing an article, the key is to do your homework beforehand so that you know what you want and what you do not.
In this article, I would like to share with you some of the tips and tricks I have learned over the years that have helped me form a concept. I hope these tips prove useful to designers and non-designers alike
The Purpose of the Design
Every website design needs to have a purpose. You need to look at what your visitors need and then build the design around those requirements.
Practicality and usability should have a high priority. I have seen many corporate websites that use flashy banners and overcomplicated menu systems. While the designs looked good, they made it difficult to navigate the website. A classic case of form over function.
Bloggers frequently make mistakes with their designs too, such as adding too many advertising banners and images. These images distract the reader from the content area and increase your page loading time. It is also common for blog designs to lack important features such as a search box, archives links, and subscription links.
A practical way of reviewing what functionality your website design needs is to examine the design of websites within your niche. Break down what each design offers and what it does not. This will help you understand what works, and perhaps more important, what does not.
The Microsoft Blog has a clean practical design.
A great example of a good blog design is the official Microsoft blog. It has a clean and minimal design that is easy to read and easy to navigate. The central column displays the blog name and permalinks at the top; with posts underneath displaying large featured images.
The sidebar is a great example of what a blog sidebar should contain. It displays a search bar at the top, followed by a Twitter link, RSS subscription links, tag archives, links to other Microsoft blogs and tech blogs, and date archive links. All of this helps visitors find the information they want. There is no unnecessary widgets or banners.
When you are thinking about the structure of your website design, think about what is required, and what is not. A professional design is important; but the design still needs to be functional.
Choose Your Color Scheme
Colors play a big part on how a website is received by visitors. It is therefore important to think about color schemes when you are thinking about your logo and website design.
He noted that men and women prefer different colors. While blue is the favorite gender of both sexes, there was some variation in other colors. For example, with 23% of women listing purple as their favorite color, it is second in the popularity stakes after blue. In contrast, purple did not even make it into the favorite color list for men. In fact, in a questionnaire about their least favorite color, 22% of men chose purple. This illustrates that one color can attract one gender, but put off another.
Other colors are best avoided altogether. Brown and orange, for example, topped the least favorite color list for both men and women.
It has been shown that color schemes can affect the conversion rates of your products and services. In a case study on Performable, they changed the green action button to red. You may expect a green button to get more conversions as it usually signifies GO, while red signifies STOP; however that was not the case.
They actually found that the red button improved conversions by 21%. They believe this happened because the button color changed, but the main color scheme did not. This allowed the red button to stand out more than the green button that blended into the matching background colors.
The green and red button test illustrated how colors can influence reader habits.
I do not profess to know a lot about the psychology of colors myself; though it is clear that the color of your website can dictate how visitors perceive you and your company. It can also influence conversion rates. It is therefore in your interests to understand what the colors of a particular color pallete signify.
Find Design Inspiration
Looking at great designs can give you inspiration for your own project. You can find design inspiration in every day items such as magazines, business cards, album covers, book covers, and more.
If you are still struggling to find your groove, take a trip to your local art gallery or museum. The quiet nature of museums and galleries can help you block out the noise of every day life and focus on the art itself. Just sit back and be inspired
I was lucky enough to visit the Gabriel Dubois Art Museum in Alta Gracia, Argentina. Gabriel Dubois’s assistant still worked there. He is a world class sculptor and a man who was clearly has a passion for his work. It was truly inspiring.
Design blogs regularly publish beautiful collections of website designs and logos. These can help you understand current trends and let you see what other website owners and designers are doing.
Below is a small collection of design blogs that I recommend checking out.
Design galleries are also a great place to view beautiful website designs. You can use the galleries listed below to view thousands of professional website designs. They are sure to give you ideas about your own project.
When you work online, you cannot afford to wait until inspiration comes to you. You need to be proactive.
Review what is important to your website’s functionality and throw away anything that is not important. You can then look at examples of website designs to help give you ideas on what you can do with your own design.
One of the biggest obstacles to using all of the tips and information above is the simple fact that finding great images (especially ones that you are allowed to use) is difficult and time consuming.
The links below should provide a more exhaustive (but still focused) range for your search. And as much as I’d like to take credit for these little lists,
Photo blogs who publish high quality images that are not on stock photo websites are a great way to lend your site/content some uniqueness and originality. Just be sure to take note of their licensing/accreditation policies.
If on the other hand, you are willing to search through the often sea of bad images on royalty free stock photo websites in order to find the good stuff, then this list will give you plenty to sift through.
Finally, if you either don’t have the time/energy/desire to get this aspect of your website just right, it may be beneficial to simply hire a professional.
There are a lot of potential benefits to this approach. For one, professional will have their own resources for acquiring or creating images. Such as a camera or access to high quality graphics and images like the ones linked to above.
Additionally, they will most likely (if they’re any good) be trained in using and recognizing the tips and theories I mentioned earlier. Which will make implementation much easier and faster for them since they’re using skills and knowledge they’re well acquainted with.