Step by Step Illustrator Icon Design Tutorial If you’re new here, you may want to subscribe to my RSS feed. Thanks for visiting! In this Illustrator tutorial we look at creating a small set of ‘almost flat’ icons from scratch. First, open the Adobe Illustrator and create a new document. Then create a rounded rectangle using Rounded Rectangle Tool with: Width:200px;Height:155px;Corner Radius:10px. After that create another Rectangle with: Width:36px;Height:36px;Rotate it 45°. Unite the two shapes. Angle:-90°;Gradient Slider:#3f7ebf, Location:0%; #3a54a2, Location:100%. Copy new shape with Fill:#3954a1 and move it down at 20px. Now add lights and shadows for back shape: Copy front shape twice. Angle:-90°;Gradient Slider:#ffffff, Location:0%, Opacity:10%; #ffffff, Location:39,9%, Opacity:100%. Create Rectangle with: Width:10px;Height:35px;Blending Mode:Overlay. Use Linear Gradient: Angle:-180°;Gradient Slider:#ffffff, Location:0%, Opacity:10%; #ffffff, Location:30%, Opacity:100%; #ffffff, Location:100%, Opacity:0%. So our Comment Icon is ready.
Hands-On With The New Modern UI Apps In Windows 8.1 The Windows 8.1 Preview has brought back the Start Button, redesigned some apps, and introduced a fair number of new ones. Some of these new apps are truly impressive, while others are the Modern UI version of apps that already existed as desktop versions and have long been part of the Windows OS. Between the revamped apps, the new apps, and those that are Modern UI versions of their desktop counterparts, we have four very impressive utility apps: Alarm, Calculator, Sound Recorder, and Scan, the latter three of which are essentially revamped Modern UI variants of existing Windows features, whereas the new Photo Editor, Health and Fitness, Food and Drinks, and Reading List apps have been developed from scratch. Alarm Of the four utility apps introduced in this preview, Alarms is the only one that didn’t have a desktop version, nor did it exist in any previous version of Windows. It’s going to be extremely useful on tablets but can also be used on a laptop or desktop PC. Calculator Scan
How to create your own flat styled target icon in Illustrator Follow this short step-by-step tutorial and learn to use the basic tools of Adobe Illustrator to create a great flat style Target with Arrow Icon. This is the first guest post by designer and Iconfinder contributor Zoltan Ordog. Before you start this tutorial you should have Adobe Illustrator installed. Creating the target 1. 2. 3. 4. 5. Creating the arrow 6. 7. 8. Adding shadow 9. 10. 11. I hope that you enjoyed following this tutorial and learned some new things about the Adobe Illustrator. Download the AI file for the icon Check out more of my icons on Iconfinder:
stickUp - a free jQuery Plugin Setting up stickUp in Wordpress is a breeze. I am also working on development of a Wordpress Plugin version of stickUp, which will allow for an easy backend to work with and include many features. Its exactly the same as setting it up on any other website, but here are exact instructions for Wordpress users. First, you must download the stickUp javascript file 'stickUp.min.js' and place it in a directory called 'js' in your theme's directory. Create this directory if it doesn't already exist. You can get the file from our GitHub. Visit GitHub Next, include the stickUp javascript file into Wordpress. Near the very bottom of the file above the '</body>' tag and below the '<? Finally, add the javascript code that enables stickUp on your Wordpress Theme. Directly below the code that we inserted in the last step, paste the following code snippit. Done! **Specifically look at the Extras feature 'marginTop' to add a margin for use with the Wordpress Toolbar, otherwise it may have a conflict.
How to Create an App Icon in Adobe Illustrator In this tutorial, I’m creating an icon for a message/chat application, I’m using a “postman” bird as starting point. This tutorial gives you a insight in the steps to take from a initial sketch to a vectorized icon that is ready to be used. Resources and articles that are useful are listed at the end in References. Start sketching While sketching an idea for an app, you need to have a little concept in your head. SEE ALSO: How to Create a Splash Screen Illustration Another important thing is trying in being original in your first concept. To be original in your ideas and sketches, one advice i keep following is not looking at other sketches before or while I’m drawing myself. For this tutorial, I want to sketch a beak of a bird because the focus of a message application is what i want to accomplish when people give it a quick look. I want to keep the sketch as simple as I can, so I’m not going to sketch much detail. Collect your sketches and pick one sketch to start from. Doing research
illustrio | Search, customize and download illustrations ← Back to Colors: Olympics Blue Unsaved scheme Learn more Pricing Log in Sign up 0 downloads left Buy downloads My profile Icons 13086 results Illustrations 6554 results Percentages 5236 results 42% Ratings 4940 results 3/5 Words 85 results 1 char. About us | Get in touch Terms of service Privacy policy Swap colors Download draft (free) Inbox Home Keywords estate, house, mailbox, inbox, letter, mail, home, message, email, Author Webalys File PNG with a transparent background Size 1024x1024px License illustrio user license In the same series View more Customizable image library for non-designers Our library adapts to your own colors, text and data. We are currently working on a mobile version. Thank you.
Flat Long Shadows: Step-by-step Tutorial, Resources and Examples Within the flat design trend on the rise at the moment, especially in this world of the web, one thing that stands out is the use of long flat shadows, particularly for small UI elements and icons. These shadows have a characteristic 45º angle below the horizontal axis and a gradient color close to the background shade can be applied. This technique is by no means new. It has always been a widely-used resource in photography to emphasize shapes and transmit different emotions to the viewer. We'll show you two different ways to achieve this long shadow finish with Adobe Illustrator. Step 1. Cinema4DWe can also produce this effect using 3D graphics software such as Cinema4D, 3Ds Max, Maya, etc.
Create a Set of "Almost Flat" Modern Icons in Adobe Illustrator With this tutorial I would like to show you a few tricks on creating clean lines and edges when working with the flat design trend, in Adobe Illustrator. Simple layered styles and reusing Graphic Styles to help your workflow are most efficient, so you should be able to create a set of matching icons in no time. 1. Setting Up Your Document To start, let's create an art board that is 500 x 500px. 2. While making your icons try to keep in mind the use of the icon itself and where it will be placed. Step 1 I'll be creating the wireframe of these icons with basic shapes then adjusting the style of the shapes using a handful of Graphic Styles. Step 2 Next, select the Ellipse Tool (L) and create several concentric circles. Step 3 Select the Rectangle Tool (M) and draw a few that cover half of the shapes we just created. Step 4 Using the Pathfinder panel we'll use a combination of Unite, Minus Front, and Intersect to change these rectangle shapes into our shadow overlays. Step 5 Step 6 Step 7 Step 8 3.