background preloader

Startup Design Framework - Suit Up your Startup!

Startup Design Framework - Suit Up your Startup!

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.

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:

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

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.

35 Flat Icons and Web Elements for UI Design Today freebie is a huge collection of Flat Icons, UI Kits and Flat Web Elements for user interface designing. The wonderful collection of multipurpose icons and web elements collection by all over the web. These high quality Flat elements and Icons are best for Graphic and Web UI design trends. The icons and web elements are based on UI design trends and included all necessary items Flat UI Kits, Communication, Media, Signs & Symbols, Developers Icon, Tools, Settings & Display, files & Folders Office & Finance, Graph, Shopping Cart and Icons which are very useful to creating such interfaces. You may be interested in the following modern trends related articles as well. Subscribe to our RSS via email, simply enter your email address & click subscribe. There are so many Flat Icons, UI Kits and Web Elements in this roundup they can be used for both personal and commercial projects. Apple devices – Flat icons (PSD) Source Mobile Flagships with PSD Source Flat Web Elements Source Source Source Source

How To Create a Set of Vector Weather Line Icons Stroked line icons really complement a flat interface style with their minimal and basic appearance. Let’s take a look at building a set of stylised vector icons of our own. We’ll base them on the weather to allow us to create a set of consistently styled icons that would be a perfect match for a weather app. Let’s begin with a basic cloud. Drag a selection around all three objects and use the Align palette to make sure they all sit along the same baseline. Draw a rectangle to fill in the gaps on the lower edge. Clear out the fill colour and increase the stroke weight to around 5pt. Elsewhere on the artboard draw a circle using the same stroke configuration options, then add a short line above it. Copy (CMD+C) and Paste in Place (CMD+Shift+V) a duplicate then move it vertically to sit underneath the circle. Paste in two more duplicates and rotate these shapes by 45° to form a set of evenly spaced ray lines. Ungroup the set of sun ray lines then delete any unwanted copies.

Create a Long Shadowed Flat Icon in Adobe Illustrator | Vectorgraphit Flat Icon Design is the most popular topic from around the design blogs and forums for the last couple of months. The major mobile operating systems started to use or already using the Flat Design (WindowsPhone + Metro, Android, iOS7). (We updated this tutorial. If you want to read only the update click here) It seems that the Flat Design trend has already reached a new evolutionary level. Check out this gallery of Flat Icons! So how can one create a great, trendy icon with flat style and long shadow? Set Up your Document Create an art board that is 800 x 600px. 1. 2. 3. 4. 5. 6. Tip: Select the two objects by holding the Shift key and click again on the object you don’t want to move. UPDATE: to place the gray shape behind the pencil’s body, select it press Ctrl + X. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. UPDATE: What if… the icon is not so simple or straight as a pencil? 1. 2. 3. 4. 5. 6. Thank you for following this tutorial!