Advertisement

Interface Design

Latest Posts
  • Vector
    How to Build Flexible and Lightweight UIs in Adobe IllustratorIllustrator preview image
    408 shares
    Embrace modular thinking in your workflow, while building flexible and lightweight UIs using Adobe Illustrator.Read More…
  • Vector
    Create a Simple Subscription Web Element in Adobe IllustratorSubscribewebelementpreview
    204 shares
    In the following steps you will learn how to create a simple subscription web element in Adobe Illustrator. Read More…
  • Vector
    How to Design a Gem Swapping Mobile Game UI in IllustratorGempreview
    204 shares
    Let the crystal crush begin! Fire up Adobe Illustrator and design a gem-swapping mobile game interface from scratch featuring gems, jewels, and crystals. We'll utilize Clipping Masks, render faceted jewelry, and play with Blending Modes to amp up this sparkling game design.Read More…
  • Interface Design
    Create a Video Poker Game Interface in Adobe Illustrator - Part TwoPokerapppreview400x400
    5 shares
    Welcome back to the second part of the tutorial. In the following steps you will learn how to create the rest of the poker machine. First, using basic blending and vector shape building techniques along with a simple blend you will create the buttons area. Next, you'll learn how to save some simple symbols. Using these symbols along with several Transform and 3d Extrude & Bevel effects you will learn how to create the buttons. Moving on, we'll add the background and the smaller components of the poker machine. Finally, you'll learn how to create a simple menu and how to add a neat set of playing cards. Read More…
  • Interface Design
    Create a Video Poker Game Interface in Adobe Illustrator - Part OnePokerapppreview400x400
    10 shares
    In the following steps you will learn how to create a detailed five cards poker game interface in Adobe Illustrator. In this first part you will learn how to create the screen of a poker machine. We'll start by creating several pixel perfect shapes using the grid and the Snap to Grid option along with basic vector shape building techniques. Next, you will learn how to create, save and re-use complex gradients and graphic styles. Taking full advantage of the Appearance panel and using a bunch of raster effects along with basic blending techniques you will learn how to add shading, highlights and subtle textures for your work. Read More…
  • Icon Design
    Create an iOS 7 Inspired Tab Bar Icon Set in Adobe Illustrator Chris tabbar 400
    19 shares
    With the release of Apple's latest mobile operating system iOS 7 I thought it would be great to create some custom tab bar icons styled for this new OS. In this tutorial we'll be making some icons in the flat, thin-line style used throughout iOS 7. We'll be creating both normal and selected states for these icons in Adobe Illustrator, so feel free to follow along!Read More…
  • Interface Design
    Create a Tic Tac Toe Mobile App Icon in Adobe IllustratorTictactoegameiconpreview400x400
    9 shares
    In the following steps you will learn how to create a simple icon for a Tic Tac Toe game. For starters you will learn how to create a radial mesh, how to easily mask it and how to add a subtle texture using the Appearance panel, basic blending techniques and some raster effects. Next, using the Appearance panel and a bunch of strokes along with several effects you will learn how to add a dark border for the icon. Moving on, using basic blending and vector shape building techniques, some new masking techniques and a simple blend you will make the 3D X and the frame for this group of shapes. Finally, you'll learn how to create four, tiny screws. Read More…
  • Interface Design
    Create a Tic Tac Toe Mobile App Interface in Adobe IllustratorTictactoepreview400x400
    18 shares
    In the following steps you will learn how to create a detailed Tic Tac Toe game interface in Adobe Illustrator. For starters you will learn how to create a conical gradient using a simple rectangle, a radial gradient and a mesh. Next, using the Appearance panel, the Film Grain and the Sponge effects, a build-in art brush plus some basic blending and masking techniques you will learn how to create a subtle texture. We'll continue with basic vector shapes building techniques and some simple Transform effects. Moving on, using more Transform effects along with the 3D Extrude and Bevel effect, the Appearance panel, the Blend Tool and several graphic styles you will learn how to create the 3D X and O's. Once you're done with the 3D shapes you will learn how to add multiple fills, stroke and effects for a simple piece of text. Finally, you will learn how to make a second, larger design for bigger screen. Read More…
  • Designing
    Create a Weather App Design for iOS in Adobe IllustratorChris weather 400
    28 shares
    This design was used in conjunction with our partner site Mobiletuts+. Bart Jacobs, very skilled developer, has taken this UI and created a working app out of it and best of all you can follow along and learn how to create your own! You can find his series here: Part 1, Part 2, Part 3. In this tutorial I would like to show you how to create a retina ready user interface for a weather application. We'll use multiple art boards and typography to create a very minimal interface.Read More…
  • Web Design
    Quick Tip: How to Create a Simple Vector Web Ribbon in Adobe PhotoshopWebribbonpreview
    7 shares
    In the following steps you will learn how to create a simple web ribbon in Adobe Photoshop. It's a pretty simple introduction in working with vector tools in Photoshop. Basically you will only need the Rectangle Tool and the Polygon Tool to create the starting shapes, plus the Add Anchor Point Tool along with the Convert Point Tool and the Direct Selection Tool to add and adjust some anchor points. Give it a try and you will also find some basic tips on how to achieve pixel perfect shapes. Read More…
  • Interface Design
    How to Create a Unique USB Sign in Button in Adobe IllustratorSigninstickbuttonpreview
    31 shares
    In the following steps you will learn how to turn simple USB stick illustration into a nice sign in button. It's another one of those tutorials that focuses a lot on the Appearance panel. We'll start with a simple rectangle, the Rounded Corners effect and some simple Pathfinder and Transform options. Once we get the stating shapes we'll move inside the Appearance panel where we'll use a bunch fills and strokes along with a lot of effects and some blending techniques. For the final touches we'll use a simple piece of text and some basic vector shape building techniques along with some new effects. Read More…
  • Interface Design
    How to Create a Retro Website Design in Adobe IllustratorDesign and illustration
    2 shares
    This tutorial aims to introduce many of Adobe Illustrator's tools which are essential to any designer's toolkit and would help beginners and intermediate Web Designers gain confidence in using Illustrator for Web Design. Read More…
Advertisement
Advertisement