Android devices may not be as trendy as iPhones, but they are very popular too. If you are looking for buying latest android mobiles, you can check out Theandroidportal.com to find your dream smartphones. Developers enjoy creating apps for Android too and the market gets tons of free applications to choose from. If you are a designer with a phone or a tablet with the Android OS, you may be interested by the following cool (and free) apps.
One task that you can easily work on from pretty much anywhere is looking for ideas. Mind mapping helps you to organize those ideas, Thinking space is perfect if you get an Android device.
Color selection tool suitable for designers, artists and programmers for selecting colors using different color models. Supports 7 different modes and RGB, HSV, HSL and YUV color models.
Fabulous Cat Papers is an Etsy shop with tons of amazing notebook covers, some of which include gorgeous embroidery that enhance the drawings. We have also found some of the best blouse embroidery designs from embdesigntube.
HTML has given us loads of form validation stuff in the last few years. Dave Rupert puts a point on the UX problems with it:
If you’ve ever experimented with HTML5 Form Validation, you’ve probably been disappointed. The out-of-box experience isn’t quite what you want. Adding the required attribute to inputs works wonderfully. However the styling portion with input:invalid sorta sucks because empty inputs are trigger the :invalid state, even before the user has interacted with the page.
Fortunately, there is an invalid DOM event that does fire with useful timing: when the form is submitted. Remember this doesn’t buy you super deep browser support though. If you need that, look into polyfilling. I imagine the future of form validation is either HTML/CSS offering better and more controllable UX, or this.
Harry Roberts wrote about design systems and how compromise has to be baked into them from the very start. He argues that we can’t be dictatorial about what is and isn’t permitted because design, whether that’s the design of a product, service or system, is always about compromise.
Harry writes:
Whenever you plan or design a system, you need to build in your own ashtrays—a codified way of dealing with the inevitability of somebody doing the wrong thing. Think of what your ideal scenario is—how do you want people to use whatever you’re building—and then try to identify any aspects of it which may be overly opinionated, prescriptive, or restrictive. Then try to preempt how people might try to avoid or circumvent these rules, and work back from there until you can design a safe middle-ground into your framework that can accept these deviations in the safest, least destructive way possible.
Introducing Gravit Designer—a completely free vector design application launched earlier this year. It’s available in the browser as well as on Linux, Mac, ChromeOS and Windows, making it arguably the most accessible application of its type in the world.
If you want to get to know all the ins and outs of this exciting new design app, try our new course, Gravit Designer Quick Start.
What You’ll Learn
Gravit is packed with professional-level features that position it as the next big up-and-coming graphics app. Whether you’re a UI designer, an illustrator, or any other kind of digital artist, Gravit could quickly find a regular place in your design workflows.
In this course, instructor Kezz Bracey takes you through all of Gravit’s key features and major strengths, showing you how to get productive fast.
Here are some free lessons from this course, as a preview of what you can expect:
Interface Overview
In this video, you’ll get an overview of the most important elements of the Gravit interface. Discover each main section and some of the key settings you’ll work with in Gravit.
Path Creation
Gravit brings its own collection of path creation tools, offering some functionality uncommon in other applications. In this video you’ll discover the options you have available to you and how to use each one.
Shape Tools Overview
Gravit includes some very powerful shape creation functionality that lets you make all kinds of interesting and complex forms. In this video, you’ll learn about the shape drawing tools included, and how you can work with the modifiers of each one.
Take the Course
You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.
Plus you now get unlimited downloads from the huge Envato Elements library of 400,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.
As designers, we are familiar with the crucial role graphic design plays in conveying information in a more efficient matter. Good graphic design actually goes much further than that; it goes as far as saving lives.
Specialized publisher GraphicDesign& recently released a book that demonstrates how graphic design, when done right, can save your life.
From unbranded cigarette packaging to apps about the human body, minimalist pill packaging to hospital information systems, and urgent public health warnings to revolutionizing health awareness campaigns, this well-illustrated book perfectly shows the vital need for good graphic design.
In a small, practical format, the book was conceived by asking to graphic designers, clients, and health professionals their answer to the question: “Can graphic design save your life?”.
Touted as the highest form of security verification currently available, an EV SSL Certificate (Extended Validation Secure Sockets Layer Certificate) confirms your identity and authority as a website owner. High-security browsers, such as the most recent editions of Safari, Explorer and Firefox can determine whether your SSL certificate has been subjected to Extended Validation. When it has, the browser address bar turns green, so your customers can readily determine your site has been subjected to this authentication.
Secure Sockets Layer Certification Explained
The standard tech for setting up an encrypted link between servers and browsers, SSL keeps your data private as it wends its way through the web from browser to the server and back to browser. To work, the server must have certified information about you to verify the data came from your machine. This is the certification part of the process in the name.
To get the certificate, a third party verification organization confirms all of the identifying information you provide when you request a domain name and hosting service. When the authentication process is complete, you’re issued a certificate of verification. Users see a lock next to the URL, which begins with “HTTPS” (S=secured) rather than simply “HTTP” when your site is SSL Certified.
Extended Validation Goes Even Farther
To qualify for an Extended Validation Certificate, your site must get through a more in-depth identity verification procedure. The goals are to confirm your existence as a certified entity, your exclusive right to use the domain and that your identity matches official records. Further, it affirms you requested to be certified. Once approved, your verification information travels with your data over the web. Browsers running high security protocols recognize EV SSL and will render the name of your organization as the site’s owner and your organization’s country of origin in the address bar.
Why Is This Important?
Scammers have become increasingly sophisticated and fake websites have become more prevalent—as well as exceedingly difficult to detect. The need for an improved system to counter this and verify the authenticity of a site emerged so users could feel better about trusting it. This is particularly critical in ecommerce, where financial information could potentially be exposed. Recognizing this need, the best free website template providers for ecommerce, such as Shopify, have incorporated accommodations for EV SSL into their platforms.
How To Acquire an EV SSL Certificate
The certificates are somewhat difficult to procure in order to maintain their validity. The Certification Authority Browser Forum (also known as the C/A Browser Forum) requires certified domains and servers to be listed with an officially recognized registration agency.
Corporations, general partnerships, unincorporated associations, government agencies and sole proprietorships are eligible to apply—if they already have a SSL Certificate and are located in a country approved by the U.S. government. Individuals are not eligible for certification. Certain industries are prohibited as well.
Your organization’s registered legal name, registration number, registered address, physical business address and any assumed business names will be investigated for verification. Your right to use the domain name will be verified as well. The investigating entity will also confirm you requested the issuance of an EV SSL certificate.
While it can be something of an arduous process, Extended Validation Certification benefits your online business by assuring your shoppers of your identity. By the way, the latest versions of Firefox, Safari and Explorer warn users when they are accessing unverified sites. This could cause them to leave your store and seek a validated place to shop. If you have yet to apply for EV SSL Certification, now is a good time to do so.
Learn the basics of typography in this quick video!
Typography: The Anatomy of a Letter
The more we communicate, the closer we become. Typography inspires us by reminding the world of a simpler time without connection. As designers and artists, we can carry that fascination into our work by studying the makeup of letters.
Start with the basics with this quick video below. Learn the anatomy of a letter.
Common Typography Terms
Familiarize yourself with these terms to get a better handle on typography.
Baseline
The invisible line letters rest on.
Stem
A single vertical stroke upwards to create letters like L or F. Connect one stem to another using a crossbar detail, like the letter H.
Ascender/Descender
Letters with downward strokes that extend past the baseline have Descender strokes. Alternatively, if the stroke moves upward and away from the main body of the letter, we call that the Ascender stroke.
Upper/Lowercase Letters
Uppercase letters are capital letters. Lowercase letters are smaller ones. Use uppercase letters for names and places, and lowercase letters for casual settings and more readability.
X-Height
For lowercase letters, the X-height is the main body of the letter.
Counters and Spine
Fully or partially closed spaces found in letters like O, A, and B. If the letter isn’t fully closed, then it’s an Open Counter.
Ear and Shoulder
An Ear is a decorative detail that pokes out from letters like g. A Shoulder is a bumped curve seen in letters like m and n.
Serif vs. Sans Serif
Serif types feature extended stroke details also known as feet. These details are missing in Sans Serif styles.
Learn More About Typography
Typography is an art form every designer can admire. Continue exploring your interest in typography to build your skills over time.
Get Amazing Design Resources
Want to create videos like this? Download the resources used in this video:
Since winter is just around the corner, I thought it would be nice to welcome it by creating a small set of snowflake icons, using some of Illustrator’s most basic geometric shapes and tools.
Now, you can always expand the pack by heading over to GraphicRiver, where you’ll find a great selection of winter-themed icons just waiting to be picked.
That being said, make sure you grab a hot cup of that almond choco-latte, and let’s jump straight into it.
1. How to Set Up a New Project File
Assuming you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N) using the following settings:
Number of Artboards: 1
Width: 800 px
Height: 600 px
Units: Pixels
And from the Advanced tab:
Color Mode: RGB
Raster Effects: Screen (72ppi)
Preview Mode: Default
2. How to Set Up a Custom Grid
Since we’re going to be creating the icons using a pixel-perfect workflow, we’ll want to set up a nice little grid so that we can have full control over our shapes.
Step 1
Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings:
Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid and Snap to Pixel options found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode (if you’re using an older version of the software).
Now, if you’re new to the whole “pixel-perfect workflow”, I strongly recommend you go through my How to Create Pixel-Perfect Artwork tutorial, which will help you widen your technical skills in no time.
3. How to Set Up the Layers
Once we’ve set up our document, it would be a good idea to structure our project using several layers, since this way we can maintain a steady workflow by focusing on one icon at a time.
That being said, bring up the Layers panel, and create a total of five layers, which we will rename as follows:
layer 1: reference grids
layer 2: first snowflake
layer 3: second snowflake
layer 4: third snowflake
layer 5: fourth snowflake
4. How to Create the Reference Grids
The reference grids (or base grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.
Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make once you start a new project, since you’ll always want to start from the smallest possible size and build on that.
Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 64 x 64 px, which is a fairly large one.
Step 1
Start by locking all but the “reference grids” layer, and then grab the Rectangle Tool (M) and create a 64 x 64 px orange (#F15A24) square, which will help define the overall size of our icons.
Step 2
Add a smaller 56 x 56 px one (#FFFFFF) which we will position on top of the previous shape, since it will act as our active drawing area, thus giving us an all-around 4 px padding to work with.
Step 3
Select and group the two squares together using the Control-G keyboard shortcut, and then create the remaining grids using three copies (Control-C > Control-F three times) spaced 28 px horizontally from the original. Once you have all the reference grids, group (Control-G) and then center align them to the underlying Artboard, making sure to lock the current layer before moving on to the next one.
5. How to Create the First Snowflake Icon
Assuming you’ve successfully managed to create the little reference grids, move on to the next layer (that would be the second one), and let’s kick off the project by creating the first flake.
Step 1
Create the vertical section of the snowflake using a 52 px tall 4 px thick Stroke line with a Round Cap, which we will color using #7FD7E5 and then center align to the empty active drawing area.
Step 2
Switch over to Pixel Preview mode (Alt-Control-Y), and then draw the v-shaped crystal formation using a 4 px thick Stroke (#7FD7E5) with a Round Cap, which we will position as seen in the reference image.
Step 3
Create the bottom
detail using a copy (Control-C >
Control-F) of the one that we’ve just finished working on, which we will horizontally
reflect (right click > Transform >
Reflect > Horizontal) and then position on the opposite side of the
active drawing area. Once you’re done, select and group all three shapes
together using the Control-G
keyboard shortcut.
Step 4
Create the flake’s
vertical section using a copy (Control-C
> Control-F) of the one that we’ve just grouped, which we will rotate at
a 90º angle using the Rotate tool (right click > Transform > Rotate > 90º).
Step 5
Add the left diagonal
section using another copy (Control-C
> Control-F) of the vertical one, which we will rotate at a 45º angle (right click > Transform > Rotate > 45º), as seen in the
reference image.
Step 6
Make sure that the
rotated shapes are perfectly snapped to the Pixel Grid by switching over to Pixel Preview mode (Alt-Control-Y)
and then individually selecting and positioning them back onto the grid with
the help of the Direct Selection Tool
(A).
Step 7
Finish off the current
snowflake by creating the right diagonal section using a copy (Control-C > Control-F) of the one
that we’ve just finished
working on, which we will vertically reflect (right click > Transform > Reflect > Vertical). Once you’re
done, select and group (Control-G)
all of the strokes together before moving on to the next one.
6. How to Create the Second Snowflake Icon
Assuming you’ve finished working on the
first icon, move on to the next layer (that would be the third one), and let’s start
working on our second snowflake.
Step 1
Create the vertical
section using a 36 px tall 4 px thick Stroke line with a Round Cap,
which we will color using #7FD7E5 and then center align to the underlying
active drawing area.
Step 2
Add the top and bottom end sections using two 8 x 8 px circles with a 4 px thick Stroke (#7FD7E5), which we
will position as seen in the reference image.
Step 3
Draw the two detail segments using a 4 px thick Stroke (#7FD7E5)
with a Round Cap, using the
reference image as your main guide. Take your time, and once you’re done, select
and group (Control-G) all of the
current shapes before moving on to the next step.
Step 4
Create the flake’s horizontal section using a copy (Control-C > Control-F) of the shapes
that we’ve just grouped, and then rotate them using a 90º angle (right click >
Transform > Rotate > 90º).
Step 5
Finish off the current icon by adding its diagonal sections using a copy
(Control-C) of the ones from the previous
snowflake, which we will paste (Control-F)
onto the current layer, making sure to align them as seen in the reference
image. Once you’re done, select and group (Control-G)
all of its composing shapes, before moving on to the next one.
7. How to Create the Third Snowflake Icon
By now you know the drill, so make sure
you’ve positioned yourself onto the next layer (that would be the fourth one),
and let’s jump straight into it.
Step 1
Start by creating the
center section of the snowflake using a 12
x 12 px circle with a 4 px thick Stroke (#7FD7E5), which we will
position in the center of the third reference grid.
Step 2
Start working on the vertical section, by creating a 16 px tall 4 px thick Stroke
segment (#7FD7E5) with a Round Cap,
which we will position onto the circle’s top anchor point as seen in the
reference image.
Step 3
Turn on Pixel
Preview mode (Alt-Control-Y),
and then draw the top v-shaped segment, using a 4 px thick Stroke (#7FD7E5) with a Round Cap,
making sure to start from the vertical segment’s top anchor point and go all
the way up to the active drawing area’s top edge.
Step 4
Take a couple of moments and draw the remaining
segments, making sure to maintain a 4 px gap between their end anchor points, and 8 px between their center ones. Once you’re done, select and group
(Control-G) all four shapes together
using the Control-G keyboard
shortcut.
Step 5
Create the vertical section’s bottom segment using a copy of the shapes that we’ve just grouped, which we will horizontally
reflect (right click > Transform >
Reflect > Horizontal) and then position on the opposite edge of the
active drawing area.
Step 6
Finish off the snowflake by adding its
horizontal section using a copy (Control-C
> Control-F) of the vertical segments that we’ve just created, which we
will rotate at a 90º angle (right click > Transform > Rotate >
90º). Once you’re done, select and
group (Control-G) all the shapes
together, before moving on to the next icon.
8. How to Create the Fourth Snowflake Icon
We are now down to our fourth and last
icon, so make sure you position yourself onto the fifth layer, and let’s wrap
things up!
Step 1
Start by making a
copy (Control-C) of the snowflake
that we’ve just finished working on, which we will paste onto the current
layer and then ungroup (right click
> Ungroup), removing some of its details as seen in the reference image.
Step 2
Adjust the length of the vertical segment by
selecting its top anchor point with the help of the Direct Selection Tool (A) and then dragging it upwards until its
top end touches the active drawing area’s outer edge.
Step 3
Create a copy (Control-C > Control-F) of the v-shaped segment, and position them 4 px from one another, at a distance of 4 px
from the vertical segment’s top anchor point. Once you’re done, select and
group (Control-G) all three shapes
together, before moving on to the next step.
Step 4
Create the snowflake’s bottom segment using a
copy of the one that we’ve just finished working on, which we will horizontally
reflect (right click > Transform >
Reflect > Horizontal) and then position on the opposite edge of the
active drawing area.
Step 5
Add the horizontal section using a copy (Control-C > Control-F) of the two
vertical segments, which we will rotate by 90º (right click >
Transform > Rotate > 90º).
Step 6
Take a couple of moments, and draw the top-left
diamond shape using a 4 px thick Stroke (#7FD7E5) with a Round Join, which we will position 10 px from the active
drawing area’s top-left corner.
Step 7
Finish off the snowflake, and with it the
project itself, by adding the remaining diamonds using three copies (Control-C > Control-F three times)
which we will horizontally and/or vertically reflect (right click > Transform > Reflect > Vertical and/or Horizontal) and then position as seen
in the reference image.
Take your time, and once you’re done, select and group
(Control-G) all of the icon’s
composing shapes together before hitting the save button.
Great Work!
There you have it, fellow snowflake lovers, a nice and easy tutorial on how
to create your very own icon set, using nothing more than a few strokes
and geometric shapes.
As always, I hope you had fun and managed to
learn something new and useful during the process.
Agregator najlepszych postów o designie, webdesignie, cssie i Internecie
