Stellar BlogInteresting tidbits, design news, and cool stuff
Pantone just released their 2017 color trend predictions. Their predictions are usually pretty accurate, with trends following suit in the design and fashion worlds.
I notice a lot of muted, calming colors, a lot of greens and blues, and rich yet subdued yellow. What do you think? Is 2017 the year of Kale?
Gone are the days of being limited to using the most common fonts on users operating systems, like Arial (sans-serif) and Times New Roman (serif).
Enter: Google Fonts.
Google Fonts is an online catalog of fonts that are free for anyone to use. They collaborate with type designers around the world to develop open source fonts.
Google Fonts are available by embedding the font file in the header of your HTML document, hosted centrally on Google’s servers. You don’t even have to install the font file!
Of course, if you want to download and install the font file, that’s an option too. Then, you can use the font file to create designs on your local computer with Photoshop or Illustrator. You can also self host the font file and reference it in your CSS. Best of all, it’s open source and free to use.
What is royalty free?
Royalty-free, or RF, refers to the right to use copyright material or intellectual property without the need to pay royalties or license fees for each use or per volume sold, or some time period of use or sales.
Basically, you won’t get into any legal trouble for using royalty free images.
Paid Stock Photography
There are tons of reputable paid stock photography websites; too many too name. You probably already know of several, such as iStock, Getty Images, and 123RF to name a few. With these websites, you pay for the rights to use, redistribute, and profit from their photographs for your business.
Free Stock Photography
Let’s face it: sometimes you don’t want to pay for high quality royalty free stock photography. Maybe it’s for a personal project, or your side blog, or your Facebook group. Luckily, there are many free stock photography resources out there.
Here are some of my favorite Free Stock Photography websites:
Unsplash – Free (do whatever you want) high-resolution photos
Barn Images – Get 50 free high-res images
Startup Stock Photos – Free Tech Stock Photos
Women in Tech – Free Flickr
Travel Coffee Book – International Travel Moments
The Stocks – The best royalty free stock photos in one place!
Creating a color scheme is one important part of establishing your brand. A great tool to create color schemes using a color wheel is called Adobe Kuler. It’s free for everyone, and if you have an Adobe account you can save your color schemes in your Library.
When working in Adobe Illustrator CC 2015 or Adobe Photoshop CC 2015, saving your color scheme via Kuler is especially useful because both applications will synchronize with your Library. So while working in Adobe Kuler, you can create color schemes and then move into Illustrator or Photoshop to use those colors without interrupting your workflow.
Adobe Kuler has thousands popular color schemes you can browse, or create your own. Using a color wheel, you can create a Triad color scheme, complementary, compound, monochromatic or analogous color scheme. Once you’re satisfied, just click Save while you’re logged in, and your brand’s new color scheme will be available in all your Adobe programs.
Do you know about Font Awesome? It gives you customizable scaleable CSS icons for all sorts of things. With a small bit of HTML and CSS, you can have social icons, navigation icons – literally hundreds of different icons for your web application or website. I love it because I can change the color and size easily and simply, plus it looks great on all my devices – mobile, tablet, and desktop.
The way it works is with a font file. You have a couple of options using the free Font Awesome assets – either download and host the font file yourself, OR grab a quick embed CDN code from their website and slap it into your website’s head section. That’s it! Now you have hundreds of icons available with a minimal amount of code.
Here’s an example. This Snapchat icon:
is achieved with this bit of HTML code:
<i class="fa fa-snapchat-square fa-5x" aria-hidden="true"></i>
You can implement social icons like this:
With simple HTML code that looks like this:
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-vimeo" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
There are also animated icons, payment icons, list icons, navigational icons, medical icons, and logo icons. You can rotate any icon by adding the CSS class “fa-rotate-90,” such as in the case of an arrow icon.
To see more examples and implement Font Awesome icons for yourself, visit: http://fontawesome.io