Tutorials – indscoop http://www.indscoop.com Technology News, Entertaiment Thu, 19 Apr 2018 03:21:50 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.5 114420553 How to Add HTML5 Video to WordPress Using Custom Fields http://www.indscoop.com/how-to-add-html5-video-to-wordpress-using-custom-fields/ http://www.indscoop.com/how-to-add-html5-video-to-wordpress-using-custom-fields/#respond Sat, 05 Aug 2017 03:08:52 +0000 http://www.indscoop.com/?p=16175 […]]]> Generally speaking, if you ask 10 WordPress developers how to do something, you’ll receive ten different answers. But that speaks to both the versatility of the CMS and that there is more than one solution to any given task.

Recently, I faced the challenge of setting up an HTML5 video inside a WordPress page. It’s in a static location and would need to be replaced every so often. While it’s fine to use the Video Shortcode, in this case I wanted to make things extra simple for the folks who would be updating the page. I didn’t want them to have to learn what a Shortcode was or how to use it.

So, the simplest solution (in my mind, anyway) was to create some custom fields where the related video files could be uploaded. From there, the theme’s template would automatically create the necessary code to display the video. Here’s how I did it:

Project Requirements

You’ll of course need a WordPress site and access to edit your theme (please use a child theme if you aren’t already doing so). Some familiarity with PHP and HTML will also be a big help. Beyond that, you should have:

  • A way to create custom fields. The free version of Advanced Custom Fields (ACF) will do the job quite well. Install and activate it on your WordPress website.
  • A video – ideally in multiple formats. Although MP4 files are now supported across every major browser, it might not be a bad idea to provide a WEBM version for extra coverage. And, while you’re at it, a FLV fallback for those using really ancient browsers couldn’t hurt. You’ll want to make sure that each version of your video is set to the same resolution.
  • A ‘poster’ image. Either a screen capture or custom graphic made to the highest resolution your video will be played at.

Step 1: Create the Custom Fields

Once you’ve installed and activated the free version of ACF, go to the Custom Fields menu inside WordPress and then click Add New.

Inside your new set of fields (ours are called ‘Video Fields’), you’ll need to create an ACF File field for each video format you plan to upload, plus another for the poster image. In our setup, we have fields for MP4, WEBM, FLV and a Poster. For each file field, make sure to select the radio button in Return Value that says “File URL”. Also, be sure to make note of the Field Names – we’ll need those later on.

Next, inside the ACF ‘Location’ setting, assign your new fields to whatever page or post you’d like and save your work. When you go to edit that assigned page, you should see the fields (you may have to scroll down a bit to find them).

Step 2: Upload Video Files

Navigate over to edit the page or post where you assigned your new custom fields. From there, it’s a matter of uploading the correct files. Once you’ve uploaded the requisite files, save your page/post.

Step 3: Edit the Template

Now comes the fun part – adding some PHP magic to your theme’s template. If you’re not familiar with the WordPress template hierarchy, now may be a good time to study up on it.

Find the correct template file and location where you’d like to place the video. Then, copy and paste the following code snippet and customize to match your needs:
<?php
// Get the Video Fields
$video_mp4 = get_field('mp4_video'); // MP4 Field Name
$video_webm = get_field('webm_video'); // WEBM Field Name
$video_flv = get_field('flv_video'); // FLV Field Name
$video_poster = get_field('poster_image'); // Poster Image Field Name
<br>
// Build the Shortcode
$attr = array(
'mp4' => $video_mp4,
'webm' => $video_webm,
'flv' => $video_flv,
'poster' => $video_poster,
'preload' => 'auto'
);

// Display the Shortcode
echo wp_video_shortcode( $attr );
?>

The first section of code references the names of the custom fields we created in Step 1. We’re creating a PHP variable for each field (they will output the URL of their respective file), which we’ll need to use in the middle section of code.

Down in that middle section, we have an array of attributes for the wp_video_shortcode function. Notice that there is an attribute for each file type. We’re also choosing to preload the video, but that’s completely optional. Here you can also set width, height, loop and even (gasp) auto-play the video if you like.

The bottom section of code is outputting the result of our work into our template.

Once you have everything set up satisfactorily, you will want to save your template and upload it to your website (or just save if you’re using the built in WordPress theme editor). Then, check your page on the front end to make sure the video is properly displayed.

WordPress has a HTML5 video player built right into the CMS and the default player looks and functions quite well. But you can style various options if you want to give it a more personal touch. Inspect the output code with your browser’s developer tools and make note of the various CSS classes. For example, the container element has a class of .wp-video. You may also want to take a look at a tutorial for a more in-depth look at possibilities.

Custom Fields Simplify the Process

Using custom fields can bring a wealth of new functionality and design possibilities to WordPress. But a core element of their awesomeness is that they can make managing content easier. Regardless of who will be adding and editing content, custom fields can streamline the entire process. That benefits us all, but it’s especially nice for users who aren’t expert developers.

Adding some simple functionality like the HTML5 video fields above can greatly reduce the learning curve a new user faces. Instead of having to think about what they’re supposed to do, it’s now become a matter of uploading a few files.

In the end, that little bit of extra work up front can save everyone some time and headaches for the life of the website.

]]>
http://www.indscoop.com/how-to-add-html5-video-to-wordpress-using-custom-fields/feed/ 0 16175
Creating Simple Line Icons in Adobe Illustrator http://www.indscoop.com/creating-simple-line-icons-in-adobe-illustrator/ http://www.indscoop.com/creating-simple-line-icons-in-adobe-illustrator/#respond Mon, 25 Jul 2016 11:24:30 +0000 http://www.indscoop.com/?p=9292 […]]]> In the last couple of years, icons got really simplified, especially after the mobile apps became so popular. I actually do love icons as an icon is the best way to present information quickly and very simply. Icons are beautiful; they can be colourful, simple and artistic. Do a search in Google for a camera icon, you will see so many versions which are just great.

Because of my love for icons, I have decided to create a quick tutorial on how to create simple line icons in Adobe Illustrator. I am going to show you how with simple shapes and various techniques and tools, you can achieve a great line icon design. You can even create a set if you have time.

Have a look at what we are creating today:

All these icons are created with simple shapes and the pathfinder tool. But let’s get to business.

Comment / Chat icon

comment-icon-01
The chat icon is created by using two shapes: a circle and a triangle. We are using a rectangle to make a triangle as this is done by using the pen tool to remove one of the anchor points, no matter which one.
comment-icon-01

You now should have a nice triangle shape that will be used to create the comment icon.
The next step is to scale down the triangle a little bit and reflect it vertically so we will have a nice shape for the speech bubble.

comment-icon-01

We also need to change a little bit the circle shape so to have a nice ellipse. To do so, use the Direct Selection Tool (Click A to use it right away). Select the top anchor point of the circle and move down with two steps (Hold Shift and Down Arrow to do bigger steps). Repeat the same for the bottom anchor point. Doing it correctly, you should have something like this.

comment-icon-01

Now you should position the triangle shape into the ellipse one to create the main comment icon shape. You can rotate a little bit the triangular shape to have a nice angle of it.

comment-icon-01

Ta da! We have a nice shape of a comment icon. Here comes the Pathfinder. In order to have a whole shape we need to use the Pathfinder Tool. If you do not see, you have to go to Window > Pathfinder or just hit Shift+Ctrl+F9.

Now with the Pathfinder visible click on the Merge to make a shape from the ellipse and the triangle.

comment-icon-01

Now you should have a whole comment icon shape.

comment-icon-01

To create a line icon, we need to remove the fill of the shape and add a stroke. For this tutorial, I am using 5pt Round brush with 1.5 pt stroke.

comment-icon-01

To finish it up, we should expand the appearance to create a nice looking shape that will look good in different sizes. To do so, with the selected shape, go to Object > Expand Appearance and it will create a shape from the stroke. This also can be done with Object>Path>Outline Stroke. It is up to you, which one you will choose. Make sure that you click onMerge again in the Pathfinder option to get rid of any small shapes created after expanding or outlining the stroke.

Related post:  Photoshop Tips: How to Create Rain and Snow Effects

comment-icon-09Now, you should have a great looking comment or chat icon that can be used for anything. You also can use it as SVG icon in a web project. Just save the icon as an SVG file and you will be able to use it in any web document.

Search Icon

This icon is very easy to be done. You need a circle and a line.
search-icon-01You have to remove again the background from the circle and add a stroke to it. Also, select the line and rotate it to -45 °.
search-icon-01

The next step is to position the rotated line wherever you want but in a way that a search is clearly recognizable.
search-icon-01

To finish it off, you need again to expand the appearance of the strokes. To do it, go to Object > Expand Appearanceand in the Pathfinder options click on the merge.
search-icon-01
search-icon-01
Save as png or svg and you can use it in your projects.

Email Icon

The email icon is a bit complicated. You will need three shapes to create it.
email-icon-01
You need a rectangular shape and two squares rotated to 45 degrees. Pay attention that the width of the rotated squares should be equal to the width of the rectangle. You need the same width to create the envelope.
email-icon-01
The next step is to remove the remove the fill and add a stroke to the shapes. Then position the shapes as shown on the picture below. The squares should be put on the top and bottom lines of the rectangle.
email-icon-01
As you can see, we are starting to have the envelope shape. Now, you should expand the appearance of the shapes to remove the strokes and have nice shapes to combine together.
email-icon-01
With all the shapes selected, click on Divide in the Pathfinder options.
email-icon-01
When you do this, you will notice that you have a group of different shapes combined together. You should Ungroup these shapes, so you can clean up the shapes you do not need. To do it, go to Object > Ungroup or just click Ctrl + G while the shapes are selected.

Related post:  How to do Metro UI Animations with HTML/CSS & JS

email-icon-01
Select all the shapes you do not need and delete them.
email-icon-01
email-icon-01
Now, we have the shape we wanted. To finish the icon, we need to do some adjustments. After, cleaning up the unwanted shapes. Select the envelope icon and click on Merge in the Pathfinder. Here we go, our third icon is ready.
email-icon-01

Desktop computer icon

I thought that this one is interesting as it used all over the internet and it is fun to be created. Draw a two rectangles (small and big) and a line. The rectangle should be a rounded one. To do it, click on the Rectangle Tool (Shortcut is “M”) and choose Rounded Rectangle. When you click on the artboard, a nice box will appear and you have the options to add width, height and corner radius. Choose your size and radius and click OK. The smaller rectangle can be one without rounded corners. The line should be the same width as the rectangle.desktop-01

Now, you should know the steps. Remove the fill and add a stroke. Make sure that all strokes are equal.

desktop-01

The next step is to position the elements as shown below. Add the line in your rectangle to have an iMac look and put the small rectangle below the big one but still touching. Position the two stroke on one another.

desktop-01

Now, we are going to play with the Direct Selection Tool (A) or also called the ” white arrow”. Select the tool and select the small rectangle. This tool gives you the opportunity to play with the anchor points that are making the shape.

desktop-01

You can select to move just one anchor point, two or all of them. In our case, we want to move the bottom two anchors a little bit up and actually make a trapezoid shape.

Using the Direct Selection Tool (A), select the bottom anchor points an move them up with the arrows. Using Shift and the arrows will give bigger step.

desktop-01

As you can see I moved it a little bit. Now, the trapezoid shape. Select only the left or right bottom anchor point and move away. Do it for both of the points. Remember with how many steps you are moving the anchors away, so you have an equal trapezoid shape.

desktop-01
Here we go. You should have something similarly looking. Let’s finish it by expanding the strokes (Object>Expand Appearance) and merging (Pathfinder>Merge) everything.

desktop-01

Now, you should have 4 line icons that can be used in different web or graphic design projects. Just save your icons as PNG or SVG.

line-icons-02

I hope you like this tutorial. If you have any issue while doing it, leave a comment below. If you like it, please share it with friends and colleagues. .

]]>
http://www.indscoop.com/creating-simple-line-icons-in-adobe-illustrator/feed/ 0 9292
How to Convert PSD Design to WordPress Theme http://www.indscoop.com/how-to-convert-psd-design-to-wordpress-theme/ http://www.indscoop.com/how-to-convert-psd-design-to-wordpress-theme/#respond Thu, 21 Jul 2016 11:32:45 +0000 http://www.indscoop.com/?p=8951 […]]]> Website design and development are the two most imperative skills required in today’s era. Having a beautiful yet functional website is a must for businesses of all sizes, types and lengths to not only increase sales but also to improve the user experience.

WordPress powers more than 24.7% of websites today, which clearly indicates the rising popularity of WordPress among website and business owners. Moreover, when it comes to building visually appealing and feature-rich websites with WordPress, you get to choose between hundreds of themes offered by WordPress. Unfortunately, almost every other website created with WordPress uses the same themes, which makes them lose their originality and uniqueness.

But thanks to image editing software and WordPress flexibility, you don’t have to settle with an ordinary WordPress theme that may have been used by millions of websites. You can simply create a beautiful PSD design and then convert it to WordPress theme to create your own customized website.

To help you build a customized website with a customized theme, we are going to share the simplest method with steps to convert your PSD designs to WordPress theme.

Designing your PSD designs in Photoshop

The first step in the process of creating a personalized website is designing your PSD designs in Adobe Photoshop.

Photoshop is one of the most popular graphic design software that enables you to create images and designs that can then be converted to web pages. It has a largely intuitive user interface, which encourages significantly shorter learning curve in spite of sophisticated design capabilities and complexity of the software.

The software allows you to design a web page like a professional designer, comprising background and professional page layouts, posts, ads, search bar, social media icons, site navigation, logos and so much more.

The initial step towards designing a PSD design is creating a professional logo that reflects your brand’s identity. The software allows you to import already created a logo from Illustrator or any other program to Photoshop or create a new one in it.

Then comes setting up the background to your website design a profound base. Now, you layer in the ad and page layout, search functions, sliders, social media icons, navigation icons, logo, footer and so forth.

Converting your PSD design to WordPress theme

Step 1. Slicing PSD

Slicing PSD

Slicing is the first step in PSD to WordPress conversion process. As the name suggests, it involves dividing a PSD image design into multiple design files each containing the varied design component of the overall design.

Slicing is important to give your website a strong foundation as well as flexibility to be framed as per your requisites. In fact, to create a robust and scalable website, multiple images are brought together seamlessly, where every component has its own purpose and functionality.

The main part of the template should include following files

  • Background
  • Header
  • Content
  • Sidebar
  • Footer

Background

To create background file, you would need to disable all the layers except for the background and save it as bg.jpg.

Header and menu

Similarly to create header and menu files, use crop tool and crop the relevant area from the image and save it as header.jpg. Also, within the header image, crop the navigation bar and save it as menu_line.jpg.
Footer

Now, let’s move to the footer and slice it from our PSD design. Repeat the same process and cut the relevant section from the image and save it in a new file called footer.jpg.

Use the same method to create sidebar.jpg, content.jpg files, and other files.

Step 2: Creating index.html and style.css files

Creating index.html and style.css files

Index.html and style.css are the two most important files of a WordPress themes without which you cannot expect your theme to function.

However, you should have a basic understanding of HTML and CSS to code the sliced images into HTML and CSS files.

First of all, create a folder and save it with any name. Now create two files index.html and style.css in your Dreamweaver software (or any other preferred software).

Your template folder will contain three things including images folder (where you would keep all your website images), index.html and style.css.
Write the HTML code in the index.html file and CSS code in style.css file.

Step 3: Breaking HTML file into WordPress theme files

Breaking HTML file into WordPress theme files

A theme consists of a variety of PHP files including the header.php, archive.php, category.php, index.php, comments.php, single.php, 404.php, sidebar.php and more.

Create these files by adding PHP code to your HTML files created using images sliced in the first step and save them with a .php extension.

Keep all the relevant code between PHP tags i.e.

<?php
your code
?>

Step 4: Adding WordPress Tags

Adding WordPress Tags

Once you have created all PHP WordPress files, it’s time to add the basic functionality to the theme with hundreds of inbuilt functions and tags.

You don’t need to have in-depth technical knowledge. Simply add WP inbuilt function tags in the themes files to get the job done. WordPress will take care of the working of these functions. And that is the beauty of this popular CMS.

Let’s suppose you want to show latest posts on your homepage. For this, you would need to add wp_get_recent_posts($args, $output) function. Similarly, you can use other inbuilt functions to add relevant functionality to your website.

Step 5: Adding files to a folder

Adding files to a folder

Once you have all your WordPress theme files ready, you can start adding them to a folder which was created in step 2. The folder may comprise other folders for your website images, CSS files, and Javascript files.

Now, connect to FTP and place your theme folder into /wp-content/themes/

Congratulations, you have successfully converted your PSD file into fully functional WordPress theme.

Now you have custom built theme that will be working on your WordPress powered website. Go to appearance ? themes to activate the theme to see it in action.

]]>
http://www.indscoop.com/how-to-convert-psd-design-to-wordpress-theme/feed/ 0 8951
How to Use Two WhatsApp Accounts on One Mobile Phone http://www.indscoop.com/use-two-whatsapp-accounts-one-mobile-phone/ Mon, 08 Feb 2016 09:49:29 +0000 http://www.technewstimes.com/?p=2962 […]]]> WhatsApp is one of the prodigious cross-platform instant messaging apps which is capable of sending text messages, calls, video and many more. WhatsApp has become very popular messaging app because of its user-friendly features like WhatsApp Voice Calling, transfer unlimited images, video and audio messages. Almost all the smartphone users have WhatsApp app installed on their devices. Most of the people are now using Dual-SIM smartphones which can be used for personal as well as official usage. It has become quite common for all the smartphone users.

But, Have you ever tried to use two WhatsApp accounts on a single mobile phone? WhatsApp has become a part and partial of everyone individual’s life. So, how about using two WhatsApp accounts in One device. Wanna try it? Then, check out the simple method to use two WhatsApp accounts on a single smartphone. Here is a complete process to use two WhatsApp numbers in one mobile phone. Have a look!

Download Link for WhatsApp APK

Click Here: Download APK

How to Use Two WhatsApp Numbers in One Device?

  • Initially, Download the apk file of GBWhatsApp and install it on your phone.
  • You need not uninstall the previous account of your WhatsApp which you’ve been using on your smartphone.
  • Simply hit “Install” so as to install WhatsApp on your phone. It then asks you to accept the terms and conditions before installing new WhatsApp app on your phone. Simply tap on Agree and Continue.

Dual WhatsApp Account

  • Once the app is installed on your phone, you need to enter the mobile number that you wish to use as a secondary WhatsApp number.
  • Make sure that the phone with the number which you’ve entered for the secondary WhatsApp is available, because you’ll be receiving a verification code to that number.

Verification code

  • Enter the verification code. It automatically verifies the code and then asks you to provide the profile information.
  • Enter your name and a profile picture that you want to use as WhatsApp display pic. After entering your name, just tap on ‘Next’.

Profile info

  • Now, the second account will be automatically configured similar to the regular WhatsApp account.
  • Click on Continue. You can now add contacts and chat with your beloved ones.
  • On the Homepage of your smartphone, you can view two different WhatsApp accounts. Now, you have successfully installed two WhatsApp accounts on your smartphone.
  • You can now use your desired WhatsApp account just by tapping the WhatsApp icon on your device to go that particular application. You’ll receive notifications from both the WhatsApp accounts.
  • That’s it, Enjoy with your two WhatsApp accounts in one mobile phone.
Advantages of Using Two WhatsApp Accounts in One Device

There are a lot of advantages of having two WhatsApp accounts in one device.

  • Rooting your device is not required.
  • The device works smoothly even if you use two WhatsApp accounts in one device.
  • The latest APK is updated.
  • Whatsapp calling feature is enabled automatically for the new account.

This is the simple way to use two WhatsApp numbers in one device. All this process can be completed within minutes depending upon your internet speed. Hope this tutorial helps you in the best way to use two WhatsApp accounts on your smartphone.

]]>
2962
How To Create Apple ID Without Using Credit Card http://www.indscoop.com/create-apple-id-without-using-credit-card/ Thu, 03 Dec 2015 15:40:37 +0000 http://www.technewstimes.com/?p=2496 […]]]> Possessing an Apple ID is a prerequisite to do almost everything related to Apple company services. If you intend to buy music upon iTunes, download apps within the App Store, or even use iCloud, you’ll want an Apple ID.
A few in years past, linking a charge card to an Apple company account was mandatory. But Apple has changed its stance and contains been letting people create an Apple ID without a credit card for a whilst now.

Whatever your cause might be to do this, we are likely to show you the best way to create an Apple
ID without a credit card…
Note that should you don’t link a card or other payment method to your Apple ID, you will obviously not be capable of complete purchases, but you will however be capable of download free articles, such as cost-free apps.
The most searched and asked query is around creating Apple ID without making use of or linking credit card. So, I have searched the solution this for you guys and today you will learn that, “How to generate Apple ID without making use of Credit Card? ” There’s a chance you’re wild to be familiar with it for positive.
The Apple ID permit you to to avail all of the features and specs of this iOS device. Thus, it has become very necessary for iOS users to obtain this ID for their device too. Nevertheless, due to your unavailability of credit cards most of the users couldn’t create ID for their selves. Therefore, we are giving this guide for you and you might use it to generate Apple ID without aid from Credit Card.

Learn-How to Create Apple ID without Credit card

So, here are your steps which are supposed to be followed in order to create Apple ID. We know that you want the method and steps quickly and so without taking your time more, I would request you to go through the below steps for the solution.

  • First coming from all, Open iTunes on your desktop, if you usually are signed in along with your Old Apple ID then sign out there first.
  • After that will, scroll down and choose the country with which you intend to create your Apple company ID.
  • Now, you need to Open any software in App store from iTunes after which it it will prompt a communication to enter your current Apple ID and Password. You must Click on Produce Apple ID option.
  • Afterwards, you are purported to follow the instructions with the first page after which it proceed to Payments screen and you need to select None from Credit card options list.
  • Now, enter any dummy address to try and do verification.
  • Then you can begin using your Apple company ID which you’ve just created which too without using a card.

 

Conclusion
This was each of our guide for creating Apple ID without credit card. I am sure this article would’ve been proven helpful for most of the users out generally there. If you have any type of question or confusion left relevant to this article then do ok, i’ll know. I shall make contact with your queries as soon as possible. Furthermore, if you might have found this guidebook helpful and worthy of reading then perform share it along with your other friends and circle too. Your shares can be proven helpful for most of the users out generally there. So, keep giving and liking each of our content.

]]>
2496
Mouse Parallax – Interactive Mouse Effect with jQuery http://www.indscoop.com/mouse-parallax-interactive-mouse-effect-with-jquery/ http://www.indscoop.com/mouse-parallax-interactive-mouse-effect-with-jquery/#respond Tue, 06 Oct 2015 07:29:59 +0000 http://www.techinfolabz.com/?p=2645 […]]]> Mouse Parallax is an extremely lightweight jQuery plugin to add parallax effects to given elements that respond to mouse movement.

Mouse Parallax

How to use it:

1. Include jQuery javascript library and the jQuery mouse parallax plugin at the end of the document to make the page load faster.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="mouse.parallax.js"></script>

2. Create a list of elements that you want to move within your parallax scene.

<div id="background" class="mouse-bg"></div>
<div id="foreground" class="mouse-bg"></div>
<div id="fore-foreground"  class="mouse-bg"></div>
<div id="fore-fore-foreground"  class="mouse-bg"></div>

3. Add background images to the elements in the CSS.

#background {
background-image: url('1.png');
}
#foreground {
background-image: url('2.png');
}
#fore-foreground {
background-image: url('3.png');
}
#fore-fore-foreground {
background-image: url('4.png');
}

4. The required CSS to make sure your background area is not hidden on page load

.mouse-bg {
left: 0;
right: 0;
bottom: 0;
top: 0;
position: fixed;
z-index: -1;
}

5. Initialize the plugin and set the moveFactor option as you prefer.

<script>
$(document).ready(function() {
$('#background').mouseParallax({ moveFactor: 5 });
$('#foreground').mouseParallax({ moveFactor: 10 });
$('#fore-foreground').mouseParallax({ moveFactor: 15 });
$('#fore-fore-foreground').mouseParallax({ moveFactor: 20 });

$('body').height(3000);
});
</script>

For more Advanced Usages, please check the demo page or visit the official website.

]]>
http://www.indscoop.com/mouse-parallax-interactive-mouse-effect-with-jquery/feed/ 0 2645
How to Create a Coins Icon in Adobe Illustrator http://www.indscoop.com/how-to-create-a-coins-icon-in-adobe-illustrator/ http://www.indscoop.com/how-to-create-a-coins-icon-in-adobe-illustrator/#respond Tue, 08 Apr 2014 12:02:35 +0000 http://www.techinfolabz.com/?p=2106 […]]]> For starters you will learn how to prepare a new document, how to setup a simple grid and how to create and save a pattern. We’ll start with some basic shapes, a simple piece of text and a pretty simple 3D Extrude & Bevel effect.

Next, taking full advantage of the Appearance panel and using basic blending and vector shape building techniques along with that saved pattern and some effects, you will learn how to add color, shading and highlights for your coin shapes. Finally, you will learn how easily recolor the entire coin using the Recolor Artwork option.


Final Image

As always, this is the final image that we’ll be creating:

How to Create a Coins Icon in Adobe Illustrator


Tutorial Details

  • Program: Adobe Illustrator CS5
  • Estimated Completion Time: 45 minutes
  • Difficulty: Beginner-Intermediate

Step 1

Hit Command + N to create a new document. Enter 600 in the width box and 400 in the height box thenn click on the Advanced button.

Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK. Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid).

For starters you will need a grid every 1px, so simply go to Edit > Preferences > Guides > Grid, enter 1 in the Gridline every box and 1 in the Subdivisions box.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.

How to Create a Coins Icon in Adobe Illustrator 1


Step 2

Select the Rectangle Tool (M) and focus on your Toolbar. Remove the color from the stroke then select the fill and set its color to black. Move to your Artboard and simply create a 1px square, the Snap to Grid should ease your work.

Continue with the Rectangle Tool (M) and create a second 1px square. Fill it with white and place it right next to the black square, as shown in the first image.

Make sure that the Rectangle Tool(M) is still active and create a third 1px square. Place it next to the white square and make sure that it has no color set for the fill or stroke.

Select all three squares and simply drag them inside the Swatches panel (Window > Swatches) to save them as a simple pattern. Once you can see that new pattern inside your Swatches panel you can remove those tiny squares from your Artboard.

How to Create a Coins Icon in Adobe Illustrator 2


Step 3

Using the Rectangle Tool (M), create a 60px circle, make sure that it has no color set for the stroke and fill it with R=57 G=181 B=74.

How to Create a Coins Icon in Adobe Illustrator 3


Step 4

Make sure that your green circle is still selected and go to Effect > 3D > Extrude & Bevel. Click the More Options button, enter all the properties shown in the following image and click OK.

Go to Object > Expand Appearance.

How to Create a Coins Icon in Adobe Illustrator 4


Step 5

Focus on the Layers panel (Window > Layers) and drill down into the existing group until you get to the Clipping Mask. Remove it then select the entire group and hit Shift + CTRL + G four times to get rid of all those groups and subgroups. In the end you should have two green shapes. Select the darker one and make a copy in front (CTRL + C > CTRL + F).

Select this copy along with the bottom, green shape, open the Align panel (Window > Align) and simply click the Vertical Align Bottom button.

Reselect the copy made in this step and replace the dark green used for the fill with R=127 G=128 B=129.

How to Create a Coins Icon in Adobe Illustrator 5


Step 6

Make sure that the grey shape made in the previous step stays selected, send it to the back (Shift + CTRL + [ )

Focus on the Appearance panel and add two new fills using the Add New Fill button (indicated by the little, blue arrow in the following image).

Select the bottom fill, lower its Opacity to 10% and go to Effect > Path > Offset Path. Enter a 3px offset and click OK.

Go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK.

Go back to the Appearance panel, select the middle fill, lower its Opacity to 10% and go to Effect > Path > Offset Path. Enter a 3px Offset and click OK.

Return to the Appearance panel, select the top fill, lower its Opacity to 25% and go to Effect > Path > Offset Path. Enter a 1px Offset and click OK.

How to Create a Coins Icon in Adobe Illustrator 6


Step 7

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set to 1px.

Select the bottom, green shape and make two copies in front (CTRL + C > CTRL + F > CTRL + F).

Select the top copy and move it 1px up using the up arrow from your keyboard.

Reselect both copies, open the Pathfinder panel (Window > Pathfinder) and click the Minus Front button from the Pathfinder panel.

Fill the resulting shape with R=127 G=128 B=129, lower its Opacity to 15% and change the Blending Mode to Color Burn.

How to Create a Coins Icon in Adobe Illustrator 7


Step 8

Select the bottom, green shape and make two copies in front (CTRL + C > CTRL + F > CTRL + F).

Select the top copy and move it 3px up using the up arrow from your keyboard.

Reselect both copies and click the Minus Front button from the Pathfinder panel.

Fill the resulting shape with R=127 G=128 B=129, lower its Opacity to 10% and change the Blending Mode to Color Burn.

How to Create a Coins Icon in Adobe Illustrator 8


Step 9

Reselect that bottom, green shape and focus on the Appearance panel. First, replace that flat color used for the fill with the linear gradient shown in the following image. The white numbers from the Gradient image stand for Location percentage.

Next, you need to add a second fill for this shape using that same Add New Fill button from the bottom of the Appearance panel. Select this new fill, lower its Opacity to 20%, change the Blending Mode to Soft Light and add the pattern saved in the second step.

Make sure that this shape stays selected, open the Graphic Styles panel (Window > Graphic Styles) and simply click the New Graphic Style button (indicated by the little, blue arrow in the following image).

How to Create a Coins Icon in Adobe Illustrator 9


Step 10

Enable the Snap to Grid (View > Snap to Grid). For this step you will need a grid every 1px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.

Using the Ellipse Tool (L), create a 60px circle and place it as shown in the first image. Fill it with none, but add a 3pt stroke. Set its color to R=255 G=222 B=23, align it to inside and then go to Object > Path > Outline Stroke.

Switch to the Type Tool (T) and simply click on your Artboard to add a “V”. Use the Copperplate Gothic Bold font with the size set at 35pt and the color to R=255 G=222 B=23. Make sure that this piece of text is selected and hit Shift + CTRL + O (or go to Type > Create Outlines).

Select both shapes made in this step, pick the Selection Tool (V), click on the border of the circle (it should get emphasized) then click on the Horizontal Align Center and Vertical Align Center buttons from the Align panel. In the end things should look like in the fourth image.

Reselect both yellow shapes and turn them into a compound path (Object > Compound Path > Make or CTRL + 8).

How to Create a Coins Icon in Adobe Illustrator 10


Step 11

Return to “gridline every 5px”, simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.

Make sure that your yellow compound path is still selected and go to Effect > 3D > Extrude & Bevel. Enter the properties shown in the following image, click OK and go to Object > Expand Appearance.

How to Create a Coins Icon in Adobe Illustrator 11


Step 12

Focus on the Layers panel, select the group made in the previous step and hit Shift + CTRL + G three times.

Select only the shapes that make up that yellow “V” and Group them (CTRL + G).

Keep focusing on the Layers panel and turn off the visibility of this new group by clicking on that little eye icon.

How to Create a Coins Icon in Adobe Illustrator 12


Step 13

Duplicate the visible, yellow shapes (CTRL + C > CTRL + F). Select these copies and click the Unite button from the Pathfinder panel. Fill the resulting shape with white.

Duplicate (CTRL + C > CTRL + F) that dark green shape. Select this copy along with the white shape made in this step and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=39 G=170 B=225.

How to Create a Coins Icon in Adobe Illustrator 13


Step 14

Disable the Snap to Grid (View > Snap to Grid). Reselect the blue shape and make two copies in front (CTRL + C > CTRL + F > CTRL + F).

Select the top copy and move it 1px up using the up arrow from your keyboard.

Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 20% and change the Blending Mode to Soft Light.

How to Create a Coins Icon in Adobe Illustrator 14


Step 15

Reselect the blue shape and make two copies in front (CTRL + C > CTRL + F > CTRL + F).

Select the top copy and move it 3px up using the up arrow from your keyboard.

Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 10% and change the Blending Mode to Soft Light.

How to Create a Coins Icon in Adobe Illustrator 15


Step 16

Reselect the blue shape and make only one copy in front (CTRL + C > CTRL + F).

Select the top copy and move it 1px down using the down arrow from your keyboard.

Reselect both copies and click the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its Opacity to 25% and change the Blending Mode to Soft Light.

How to Create a Coins Icon in Adobe Illustrator 16


Step 17

Select the remaining, green shape and replace the green with the linear gradient shown in the following image.

How to Create a Coins Icon in Adobe Illustrator 17


Step 18

Focus on the visible, yellow shapes. Select the bottom path and simply add the graphic style saved in the ninth step.

Keep focusing on this thin path, go to the Appearance panel and add a third fill. Select it, change the Blending Mode to Soft Light and add the linear gradient shown in the following image. Remember that the white numbers from the Gradient image stand for Location percentage while the yellow zeros stand for Opacity percentage.

How to Create a Coins Icon in Adobe Illustrator 18


Step 19

Select the top, thin, yellow path and replace the yellow with the linear gradient shown in the following image.

How to Create a Coins Icon in Adobe Illustrator 19


Step 20

Select the remaining yellow path and make two copies in front (CTRL + C > CTRL + F > CTRL + F).

Select the top copy and move it 1px down.

Reselect both copies and click the Minus Front button from the Pathfinder panel. Ungroup (Shift + CTRL + G) the resulting group, remove the bottom path and then fill the remaining shape with white and change its Blending Mode to Soft Light.

How to Create a Coins Icon in Adobe Illustrator 20


Step 21

Select the remaining yellow path and make two copies in front (CTRL + C > CTRL + F > CTRL + F).

Select the top copy and move it 1px up.

Reselect both copies and click the Minus Front button from the Pathfinder panel. Ungroup (Shift + CTRL + G) the resulting group, remove the bottom path and then fill the remaining shape with black, lower its Opacity to 50% and change the Blending Mode to Soft Light.

How to Create a Coins Icon in Adobe Illustrator 21


Step 22

Select the remaining yellow path and replace the yellow with the linear gradient shown in the following image.

How to Create a Coins Icon in Adobe Illustrator 22


Step 23

Focus on the Layers panel and turn on the visibility for that group of yellow shapes made in the twelfth step.

Select the “V” path, replace the yellow with the linear gradient shown in the first image then make two copies in front (CTRL + C > CTRL + F > CTRL + F).

Select the top copy and move it 1px down.

Reselect both copies and click the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a compound path (CTRL + 8), fill it with the linear gradient shown in the third image, lower its Opacity to 75% and change the Blending Mode to Soft Light.

How to Create a Coins Icon in Adobe Illustrator 23


Step 24

Select the remaining yellow shapes, click the Unite button from the Pathfinder panel then hit CTRL + 8. Fill this new compound path with the linear gradient shown in the following image.

How to Create a Coins Icon in Adobe Illustrator 24


Step 25

Reselect that “V” path and duplicate it (CTRL + C > CTRL + F).

Select this copy along with the compound path made in the previous step and hit the Vertical Align Bottom button from the Align panel. Make sure that only the shape made in this step is selected.

Focus on the Appearance panel and replace the existing linear gradient with R=127 G=128 B=129.

Move to the Layers panel, drag this grey path below the two shapes that make up the “V” and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the left window (in the following image), click OK

Go again to Effect > Stylize > Drop Shadow. Enter the properties shown in the right window (in the following image) and click OK.

How to Create a Coins Icon in Adobe Illustrator 25


Step 26

Enable the Snap to Grid (View > Snap to Grid). For these final steps you will need a grid every 1px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.

Select all the shapes made so far and Group them (CTRL + G).

Duplicate this new group (CTRL + C > CTRL + F) and focus on the Layers panel. Open this new group and simply remove the bottom shape.

Reselect the entire group copy and drag it a few pixels up and to the left as shown in the second image. Again, the Snap to Grid option will ease your work.

How to Create a Coins Icon in Adobe Illustrator 26


Step 27

Repeat the technique mentioned in the previous step, add some new coins and randomly move them to the left or to the right.

How to Create a Coins Icon in Adobe Illustrator 27


Step 28

Finally, you can easily recolor your coins using the Recolor Artwork option. Select your coins and go to Edit > Edit Colors > Recolor Artwork. Go to the Edit section, check the Recolor Artwork box and the Link harmony colors button, adjust the Brightness slider then drag the color handles roughly as shown in the following images.

How to Create a Coins Icon in Adobe Illustrator 28 How to Create a Coins Icon in Adobe Illustrator 28 How to Create a Coins Icon in Adobe Illustrator 28


And We’re Done!

Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques to your future projects.

How to Create a Coins Icon in Adobe Illustrator

]]>
http://www.indscoop.com/how-to-create-a-coins-icon-in-adobe-illustrator/feed/ 0 2106
3d Isometric Vector Box Icon Tutorial http://www.indscoop.com/3d-isometric-vector-box-icon-tutorial/ http://www.indscoop.com/3d-isometric-vector-box-icon-tutorial/#respond Tue, 08 Apr 2014 11:36:16 +0000 http://www.techinfolabz.com/?p=2096 […]]]> What is Isometric Anyways?

Isometric projection is a 3d method, being a form of ortographic projection; representing a 3 dimensional object in 2 dimensions.

In a bit simpler english; we can make 2d objects easily converted to 3d objects by adding equally measured perspectives. That’s what we will do to create our 3d vector icon =)

Here is what we will try to achieve:

final

Phase 1: Making the Square into a 3d Box with Isometric Projection

1– Okay. To do that, we will need a square first.

Open a new Illustrator document, preferably in cmyk color and draw a 100pt x 100pt square:

01_draw_a_square

2– Next, we will need to duplicate that square 2 times to prepare the front left and front right sides of the box imitation:

02_create_sides

3– Now we will rotate our top side isometrically to build the top side of the box.

To do that, let’s go to effect > 3d > rotate > select isometric top:

03_rotate_top

4– Ok now let’s do the same for the front left side with one difference; the rotation will be isometric left:

04_rotate_fleft

5– Same goes for the fron right side; rotating isometric right:

05_rotate_fright

6– Now let’s  object > expand appearance them to make the 3d rotated sides more editable:

06_expand

7– We can now put them all together, to form a box:

07_put_together_the_sides

Since we are almost done with the basic shape, we can move along with the effects to apply on it.

]]>
http://www.indscoop.com/3d-isometric-vector-box-icon-tutorial/feed/ 0 2096
Excellent Tutorials for Designing Icons in Illustrator and Photoshop http://www.indscoop.com/excellent-tutorials-for-designing-icons-in-illustrator-and-photoshop/ http://www.indscoop.com/excellent-tutorials-for-designing-icons-in-illustrator-and-photoshop/#respond Tue, 08 Apr 2014 11:11:05 +0000 http://www.techinfolabz.com/?p=2014 […]]]> I have a schedule of items and collections that I do and perhaps somehow made public. This time I got to make a collection of tutorials that promise to get into the vast field of designing and creating vector icons using Photoshop, Inkscape, Illustrator or even GIMP, is 60 and I hope you enjoy them, I have done several already. Remember that no matter which program you have important knowledge and creativity, choosing a good concept and image of the icon, if you can draw it before and vectorized then never make any a rush. I invite you to continue reading and if any tutorial you like do not forget to visit.

Create a Speed Gauge and Watch Icon [Photoshop]

In this tutorial, we’ll create a Speedometer/Gauge icon in photoshop.

How to design a Pumpkin Day Thanksgiving [Photoshop]

In this tutorial learn how to create a very realistic pumpkin as an icon using only filters and layer styles. Tutorial is a pretty basic written for very advanced users.

Design a 3D Baseball Cap [Photoshop]

Learn how to design a cap ( cap, hat, shirt ) in Photoshop, baseball type using Photoshop, it is very realistic and can follow different ways, will be conducted primarily using the pen tool and some tricks for experts.

Creating an icon of a former Radio [Photoshop]

I still remember when my grandfather’s house I saw this kind of radios, called vintage radios, as in this tutorial will create one from scratch using shapes, gradients, patterns and coating techniques.

Design a 3D Box [Photoshop]

Here you learn how to create a very realistic and creative icon in a box with 3 dimensions and some documents simulating the type of files. DOC. Beautiful yellow box very well polished.

Simple icon Cup of Coffee [Photoshop]

In this tutorial we’ll be going though creating a semi-photo realistic coffee cup, using shapes and textures, gradients..

Create a Microsoft Zune [Photoshop]

In this tutorial you will learn, with very simple (few) steps to create a famous Zune, the Microsoft player, you will learn with simple shapes and layer styles to make a false player in just seconds or minutes depending on your skill.

Drawing Mircosoft’s XBOX 360 [Photoshop]

This tutorial is going to teach you how to draw a Mircosoft’s XBOX 360 console in photoshop using a reference image, simple techniques such as the gradient tools and the pen tool. You are expected to have some experience with both of these two tools to successfully apply and follow this tutorial. I am going to trace everything over this hi-resolution picture of the XBOX that I found. By the time you’re done, your finished work will look something like this.

Adobe Photoshop CS3 Style Icons [Photoshop]

In this tutorial I will show you how to create the Adobe CS3 style icons using some basic gradients and layer styles.

LG LCD Monitor Icon [Photoshop]

Another tutorial for designing electronic devices, this time is to create a television LG type HDTV with a view amazing. Something basic but you can improve it.

Design a Software box [Photoshop]

Well, all we ever dreamed of having our software, but we also wanted to create a kind of 3D box representing a product, it is possible to see this tutorial, realistic, with good depth and presentation, a tutorial missed.

Create a Slick Black iMac  [Photoshop]

Some months back before the latest iMacs were released, I was musing as to what a black iMac might look like. Being a Photoshopper, I decided to try making one. After posting it on a blog, the image went viral and started appearing on Mac and technology blogs and my site was inundated with traffic. Today if you look up Black iMac in a Google search you’ll see lots of sites using my image. Today I’ll show you how I made that picture.

Create a Mobile Phone Styled Like the HTC Touch Diamond [Photoshop]

I must admit that there is no other love for me rather than the iPhone but when I first saw the HTC Touch Diamond mobile I was amazed because it looks so good. It looks so good that I decided to write a tutorial to show you how I made it. This will be a long tutorial so go get some coffee for this.

Create a High-Gloss Graduation Hat Icon Design [Photoshop]

Photoshop is great to use for creating quality icon designs. In this tutorial, I will teach you how to make a professional, shiny, clean graduation hat icon. The techniques in this tutorial will help you graduate to the next level in icon design.

How to Create a Basic House Icon [Photoshop]

In this tutorial, you’ll go through easy steps and techniques to design a simple yet attractive house icon. It’s easy to follow and to play with. There are no intricate curves or complex brush work. Just simple shapes along with layer styles will do the complete job. The aim of the tutorial is to get familiar with the correct use of colors and efficient use of layer styles. I am sure you’ll enjoy following it. Let’s jump in!

Ice Cream Logo Icon [Photoshop]

Today I am telling you about How to Create Photoshop Ice Cream Logo Icon..

How to Illustrate a Delicious Ice Cream Bar [Photoshop]

In this tutorial, I’ll show you how to draw an ice cream bar. Throughout this tutorial we’ll have a look at various drawing techniques. We’ll be creating everything within Photoshop from start to finish, except the font used. Let’s jump into this tutorial.

Design USB portable speaker logo icon [Photoshop]

Today I will show you how to create a Photoshop design USB portable speaker logo icon in photoshop..

3D Mp3 Player [Photoshop]

Another device over USB. Learn how to create a portable MP3 player from scratch using fairly detailed figures and transformations..

How to Create a Super Shiny Pencil Icon [Photoshop]

The Pencil is one of the visual metaphors most used to express creativity. In this tutorial, I’ll show you how to draw a pencil icon. We’ll have a look at gradients, selection tools, and basic transform operations. Let’s have some fun with this.

Creating a film icon [Photoshop]

The film is very common for a director to have one of these, used to indicate the beginning or end of a scene, now you can design one in 3D real pretty, perfect for your site cinema.

Skype Buddy Icon [Photoshop]

Learn to draw skype buddy icon with this tutorial. Final output of the skype buddy icon can be seen below..

Dish TV Icon [Photoshop]

Here I will teach you about How to Create Photoshop Dish TV Icon..

Angry Emoticon [Photoshop]

Learn about special effects while converting an ordinary orb into a fantasy art piece in this Adobe Photoshop tutorial.

Ancient Inkpot Logo Icon [Photoshop]

Today I am telling you about HOw to Create Photoshop Ancient Inkpot Logo Icon..

Puma Sheet Torch Logo Icon [Photoshop]

Today I am telling you about How to Create Photoshop Puma Sheet Torch Logo Icon..

Create an Adobe Box Icon in [Photoshop]

Create an Adobe box Icon in Photoshop, to fill your dock with new icons. Learn techniques on brushes, blur, layer mask and blend modes.

Realistic Postal Cardboard Box [Photoshop]

Here I am telling you about How to Create Photoshop Postal Packet Logo Icon..

Electronic Torch Light Icon [Photoshop]

Today I will teach you about How to Create Photoshop Electronic Torch Light Icon..

Laser Printer Model [Photoshop]

Here I am telling you about How to Create Photoshop Laser Printer Model..

Recreate the Famous Yahoo! Smiley [Photoshop]

In this easy Photoshop tutorial I’m going to try and teach you how to recreate the famous Yahoo! smiley face, you know, the one that’s all over the Yahoo website?

Illustrate a Traffic Cone Icon [Photoshop]

Previously I showed you how to illustrate a construction helmet icon. Today we’ll be drawing a traffic cone, another handy icon for “under construction” elements. Our cone icon is inspired by one I saw on the VLC Player site recently.

Vista Error Icon [Photoshop]

In this Photoshop tutorial I’ll show you how to create Windows Vista icons using a few basic layers, creative layer styles and some web 2.0 gradients.

Create a Shiny Lock Icon Design [Photoshop]

A popular icon that you can find on the internet is the lock icon. It is widely used to identify secure Web pages. It often indicates password fields for secure files. Wherever you wish to place a lock icon, this tutorial will show you how to create an attractive one for you to use!

How to Create a Van Icon [Photoshop]

This is another icon I have created with Negreu Andreas. We wanted to create an icon that can be used for a game maybe or a Mac app of some sort. Before we started we searched the web for photography with similar vans, then made some ideas, and a quick sketch. After that we started working. Let’s review the process!

How to Create a Moka Express Icon [Photoshop]

The staple of every Italian breakfast is home espresso coffee, brewed with the iconic “Moka Express” pot. In this tutorial, we’ll create a Moka entirely from scratch using shapes, layer effects and a bunch of productivity-enhancing tips. We will then proceed to turn our design into a Leopard and Vista-ready professional icon. So get your coffee mugs ready and let’s start brewing!

Create a beautiful, furry monster vector [Illustrator]

Changing program Illustrator, we found this beautiful tutorial to create the fluffy monster with the image, easy to follow (relatively) slow to do something perfect and very loanable to alter the result to create an original and proper.

RSS icon beginner [Illustrator]

Includes video tutorial and text with images, this tutorial for beginners will teach you to create the classic icon RSS Feed or with simple steps, using shapes and transformations .

How to create the sound of Apple Safari [Illustrator]

If you have MAC or use Safari to browse you have seen this icon, then learn to do, is a complex tutorial but if it can be done while being a beginner, learn to create vector shapes and pen tool.

IM Icons Translucent [Illustrator]

The latest versions of MSN Messenger comes with a 2 personal icon translucent each other, because with this tutorial will create an effect of transparency equal to that of Messenger.

How to create an iMac and a photorealistic Mouse Magic [Illustrator]

As you note, the icon of iMac looks pretty realistic to achieve this will have to consider using good prospects, degraded and have a good knowledge of the tool pen.

Create a Detailed Camera with Photo Icon [Illustrator]

This tutorial will show the intermediate Adobe Illustrator artist how to make a sleek web 2.0 style icon. You should have a basic understanding of Adobe Illustrator tools before you begin this tutorial, as the tutorial moves at a rapid pace.

Frozen Fun People [Illustrator] – Part 2

If you’ve ever seen two people together in a classic icon, now you see the same thing in a bucket of ice, really fun, this tutorial was segmented into two due to its complexity and different steps to achieve, it takes many strokes but the result worth the time.

How to Design a Set of Multicolored Buddy Icons [Illustrator]

In this Illustrator tutorial, I’ll show you how to create a set of multicolored buddy icons. This tutorial uses some basic shapes, gradients, Feather, and Illustrator’s powerful Live Color feature. These techniques are easily translated into other designs and illustrations.

iTune Icon [Illustrator]

The challenge of this tutorial is to use various Blending modes and blending techniques to replicate the iTune icon. This tutorial is a good exercise to master your Blend techniques.

Creates a very funny Twitter icon [Corel Draw]

Although they are quite used on websites, and more on blogs, it is always essential to have on hand icons networks social, better if they are very creative or droll. Using Corel Draw (you need to know right away) learn to draw the bird’s image in 11 steps.

Draw a box of delicious Chinese food [Illustrator]

This tutorial will demonstrate how to craft a delicious Chinese food icon set. This tutorial requires a generous command of Adobe Illustrator’s tools. Let’s dig into this yummy icon design tutorial, which includes numerous vector illustration techniques.

Abrakadabra and the Hat [Illustrator]

The hat is a unique element of a magician, the most common is having a rabbit inside . In this tutorial you will use tools like the pen, the Pathfinder and other tools of Illustrator.

How to Create a Juicy RSS Feed Icon [Illustrator]

Let’s learn how to make a unique RSS feed icon. This tutorial requires a familiarity with Adobe Illustrator’s basic tools as we’ll use the gradient mesh tool and make light use of Illustrators mapping feature.

Geek glasses icon [Illustrator]

In this tutorial, we’ll show you how to make a cool, or should we say geeky, glasses icon. You should be versed in Adobe Illustrator’s tools to complete this tutorial. You’ll learn how to take creative license and create an illustration that uses a photo reference, but differs a bit in the final design.

Create An Aperture Style Camera Lens Icon [Illustrator]

In this tutorial, we’ll create a detailed camera lens similar to the one used as the logo for Apple’s Aperture photo-editing software. A camera lens is good for a software icon, logo, or just as a graphic for use in any design. Although, the image appears detailed, the process of creating it involves little more than simply layering objects with different fills and gradients to give a three-dimensional illusion.

How to Create a Vector Light Bulb Icon with Inkscape [Inkscape]

Today we’ll be learning how to create a vector light bulb icon with the free, open source vector program Inkscape. We’ll be following a Tango style of design for this project. Read on to learn more about the Tango Desktop Project and to learn how to create this icon.

Draw a realistic vector guitar [Inkscape]

The free software makes theirs vector to allow us to follow this tutorial that takes as its main form an electric guitar and the vectorized with extreme detail to arrive at a vector rather good looking and successful, all with a free program like Inkscape.

Make a Handy 3D Vector Calendar Icon [Illustrator]

Learn to make a handy calendar icon to use on your blog, website, or print projects. We’ll use Illustrators Path and 3D tools to create this design. Also, a simple page curl effect will be demonstrated as well. Let’s jump into this tutorial.

Design a Vector Audio Speaker Icon In Illustrator [Illustrator]

In this intermediate tutorial, I’ll show you how to create a vector speaker icon. When you break down the elements you’ll find it fairly easy. We’ll be using some ellipses with gradients, the Grid Tool, and the Mesh Tool to create this icon design.

How to Make a Vector Military Cap Icon [Illustrator]

This tutorial will show the intermediate-to-advanced Adobe Illustrator artist how to make a realistic military style cap icon using predominately gradients, blends, and the Gradient Mesh Tool. We’ll be using a photo reference to base this illustration on, though utilizing creative judgement throughout the process.

How to Create an Alarm Clock Icon [Illustrator]

With simple shapes and gradients, this easy tutorial will show you how to create an alarm clock icon. We’ll be using Illustrator CS4 for this tutorial, but those of you with older version should be able to follow along as well. Let’s jump into this tutorial, which beginning illustrators will find especially useful!

How to Create a Vector Sketchbook [Illustrator]

In this tutorial, I will show you how to create a customizable vector sketchbook. This intermediate tutorial uses some basic shapes, Shear transforms, and Effects to create a leather texture. Let’s get started!

Icon design tutorial: How to make a Calendar icon [Illustrator]

In this tutorial we’re going to show you how we made the Calendar Icon from our most popular icon set “Coquette”.

Volks Logo [GIMP]

Today I’m going to teach you how to recreate the Volkswagen logo. Now generally, logos are made in a scalable vector graphics program such as Adobe Illustrator or Inkscape so that logos can be resized without any quality loss, but for the sake of this tutorial, I will show you in the Gimp. This tutorial is based off of a Photoshop tutorial by Dr Diablo at RepublicOfCode.com. Let’s get started!

]]>
http://www.indscoop.com/excellent-tutorials-for-designing-icons-in-illustrator-and-photoshop/feed/ 0 2014
25 Illustrator Techniques Every Designer Must Know http://www.indscoop.com/25-illustrator-techniques-every-designer-must-know/ http://www.indscoop.com/25-illustrator-techniques-every-designer-must-know/#respond Fri, 21 Mar 2014 06:55:46 +0000 http://www.techinfolabz.com/?p=1984 […]]]> Like so many others, I began my design career by experimenting with Adobe Photoshop. At the time bitmap graphics were more accessible and more easy to understand. Vector graphics, Adobe Illustrator and especially bezier curves contained a shroud of mystique, and I was having too much fun with Photoshop to see what was behind Illustrator’s magic curtain. Fast forward a few years later when I began to dabble in logo design, and suddenly Illustrator became the go-to tool. What amazed me was how much I had missed out on by not picking up Illustrator along side Photoshop in the beginning.

So now here we are using Illustrator on a daily basis to produce incredible vector illustrations, but like Photoshop, there are many tools within illustrator that are often overlooked. So we decided to put together this handy guide of 25 essential tips for Adobe Illustrator.

Get to Know the Tools Panel

The panel appears on the far left side when you open Illustrator. The panel can be moved around by dragging it’s title bar. The tools found here are some of the most important within Illustrator. You’ll use these tools to create and manipulate objects on the art board.

Some of the tools have options when you double click them, and some have hidden tools when you click and hold the mouse down over them. These are indicated by small black triangle in the bottom right of the tool icon.

Below the tool icons are thumbnails displaying the current colors for fill and shape. You can swap these colors by pushing (X) on the keyboard. You can also reset them back to black and white by pushing (D).

Also, another very important set of buttons on this panel are the Draw Normal, Draw Behind and Draw Inside options. These are handy buttons to know when drawing objects on the art board.

Drawing like a Pro with with the Pen and Pencil Tools

Pencil Tool

The Pencil Tool lets you draw free form like a pencil on paper. It will create open or closed paths, and will place points anchor points as you draw. You can’t determine where the anchor points are positioned but you can adjust them after you are done drawing.

The Pencil too is great for for creating a sketch look and feel. It’s not as precise as the Pen Tool, but that’s the whole point.

You can double-click the Pencil Tool icon to adjust the following settings:

Fidelity – Controls how often anchor points are added to the drawing path and how far you have to move your cursor before a new point is added

Smoothness – Controls how smooth the path is. The higher the number here the more points are added to the path as you draw, resulting in a more accurate line.

Fill New Pencil Strokes – Simply adds a fill color to the line after you draw it. This results in more of a shape than a line.

Keep Selected – Controls whether or not the line should be selected or unselected after your done drawing it.

Edit Selected Paths – Determines whether you will be merging with an existing path if your new line gets within a specified distance of it.

Within X Pixels – Determines how close your new line must be to an existing path to merge.

Pen Tool

The Pen Tool is the meat and potatoes of Illustrator. It takes a little bit of practice to understand how to properly use the Pen Tool. But once you’ve mastered placing and editing anchor points you can draw or trace anything you desire. Anchor points are the heart of drawing within Illustrator.

The basic concept of the Pen Tool is clicking to add points versus drawing a line. As you add points Illustrator adds the line between the points automatically. You can then edit the lines by clicking and dragging the anchor points and their handles.

For more information and examples using the Pen Tool visit the Adobe Illustrator Reference Manual.

Keyboard Shortcuts to Make Drawing Easier

Move a shape while drawing it (spacebar + mouse drag)
Draw from the center of a shape (Option + mouse drag)
Increase or decrease polygon sides, star points, arc angle, spiral winds, or flare rays (mouse drag + up or down arrow keys)
Switch through drawing modes (shift + D)
Join paths (Cmd + J)

Understanding Perspective Drawing

If you’re a comic book or cartoon illustrator then you already have a sold grasp on perspective drawing. If you’re a graphic designer the concept may be new to you, but with a little practice it’s easy to master within Illustrator.

The concept of perspective drawing revolves around vanishing points and how a 3 dimensional scene is naturally perceived by the human eye. For example, a long straight road will appear to vanish in the distance. Objects will appear smaller the further away they are, etc…

Starting in CS5 Adobe introduced a slew of new features that allow you to control perspective drawing like never before.

Let’s take a closer look

In Illustrator click (View | Perspective Grid | Show Grid) or (Cmd + Shift + I) to show the Perspective Grid. While the grid is in view you can add shapes that will automatically adjust to perspective view. Using the Perspective Selection tool (shift + V) you can then edit the grid placement and adjust your objects all within perspective.

Using the Eraser Tool to Fine Tune Your Illustrations

Once you’ve filled your art board with illustrations, how do you erase what you don’t want? Erasing in Illustrator is a little different than Photoshop. There are three common methods for erasing artwork in Illustrator.

Path Eraser Tool (located under the Pen Tool)

The path eraser tool, and with a single smooth motion click and drag it along the segment of the path you want to erase.

Delete Anchor Point Tool (-)

Select this tool and simply click the anchor points you want to remove. The path will readjust once the point is removed.

Eraser Tool (shift + E)

This is one is the closest to the PS equivalent. Select this tool and click and drag it across the portion of a shape that you would like to remove.

Perfect Placement with Rulers, Grids, Guides and the Align Panel

Illustrator makes aligning objects a snap. There is a wide variety of tools to help us place objects in exact position. Just like in Photoshop the rulers (Cmd + R) and guides are available. There is also a handy grid (Cmd + “) if you need it. But most importantly let’s take a look at the Align Panel.

The Align Panel contains an array of  options to align and distribute objects. This panel is essential if you need your artwork to align perfectly.

Using Illustrator as the Ultimate Type Tool

Illustrator makes it incredibly easy to work with type. Just view the options under the type tool (T) to get started.

One of the of the most useful tools is Type on a Path. First draw a path of any shape, and select the Type on a Path Tool. Then select the path with your cursor and begin typing. There are some excellent opportunities for type design using this tool.

Also note, that the usual type options are available from the Character Panel ((Cmd + T).

Using Swatches and Color Groups to Stream Line Color Management

The swatches panel contains colors, tints, gradients, and patterns that can be saved separately from your document. Why is this useful? Let’s say that your working on a project that contains 4 colors plus a gradient and two seamless patterns for a client. This is print project 1 of 8 that the client has requested, and you know that you will be using these exact colors over all of these pieces. You can simply create a new color group by choosing it from the panel drop down menu, then drag and drop each color to the group, or choose “Add Selected Colors” from the drop down.

Once your colors and gradients are contained within the panel you can save them from the drop down menu within the swatches panel.

Did you know?
You can save swatches between Illustrator, InDesign and Photoshop. Simply save the swatch library for exchange. The colors will appear the same between applications as long as your color settings are synchronized.

Adding One Click Artwork using Symbols

Symbols in Illustrator provide an excellent way to reuse artwork from one source. For example, let’s say you’re designing a user interface, and the design contains 10 12 buttons, and halfway through the design you decide to change the button style slightly. Since you’ve created all of your buttons from one initial symbol, all you have to do is edit the original to change all instances of the button. This can be an incredible time saving tool.

To create your own symbols

Simply drag your artwork to the symbols panel and the new symbol dialog box will appear, where you can name your symbol. The symbol type defaults to Movie Clip. You can set the registration point, align to grid, and utilize 9?Slice Scaling if you plan to export for Flash.
To edit a symbol simply double click the thumbnail in the symbol library or an instance on the document. Any changes made to the symbol will be saved and applied to all instances.
Also note, that you can save Symbol Libraries just as you would with swatches so that you can use symbols between documents.

Did you know?
You can set the symbol type to MovieClip. This comes in handy when exporting to Flash.

Filling Your Shapes with Gradients, Meshes and Patterns

Gradients

Gradients in Illustrator can be added from the gradient panel (Window | Gradient). In the Gradient panel, the Gradient Fill box thumbnail displays the colors and type of the current gradient. When you click the thumbnail, the selected object on the art board is filled with the gradient.
Gradients can also be added with the Gradient Tool (G), which provides some of the same features as the Gradient Panel except they are directly over the object on the art board. With the slider you can modify the angle, location, and spread of a linear gradient or the focal point and origin of a radial gradient. You can also add and edit color stops right from the slider when you hover the mouse over it.

Meshes

When a mesh object is created it allows that object to contain multiple colors which can flow in different directions and transition smoothly from one point to another. Multiple lines cross the object and provide a way to easily manipulate color transitions on the object. Where these lines cross a mesh point is created. Mesh points appear as diamond shapes and act similar to anchor points but with the capability of accepting color. You can add and delete mesh points as needed.
To convert an object to a mesh, simply select the Mesh Tool (U), choose a fill color for the mesh, and begin click on the object to add mesh points.

Patterns

Patterns in Illustrator are saved in the Swatches Palette. Anything can be saved as a pattern, but most likely you will be creating a seamless design. To create a new pattern simply choose (Edit | Define Pattern). Patterns can be saved along with colors and gradients in a Swatch Library.

Ultimate Shape Manipulation using Envelopes

Envelopes are objects that reshape selected objects. You can make an envelope out of an object or you can use a preset warp shape or a mesh grid as an envelope.

To distort an object using an Envelope

Select an object. Choose (Object | Envelope Distort | Make With Warp or Make with Mesh). To use a object as the shape of the envelope, make sure two objects are selected, the top most object being the envelope shape, and select (Object | Envelope Distort | Make With Top Object).

Then edit any anchor point on the envelope with the Direct Selection Tool. This gives you the ability to fine tune the object to whatever shape you desire.

Keyboard Shortcuts for Editing Shapes

Switch Pen tool to Convert Anchor Point tool (alt)PC (option)Mac
Switch between Add Anchor Point tool and Delete Anchor Point tool (alt)PC (option)Mac
Move current anchor point while drawing with Pen tool (spacebar + mouse drag)
Cut a straight line with Knife tool (alt + mouse drag)PC (option + mouse drag)Mac
Cut at 45° or 90° with Knife tool (shift + alt + mouse drag)PC (shift + option + mouse drag)Mac

Take Your Illustrations to the Next Level with Brushes

Brushes are simply stylized paths in Illustrator. There are 5 types of brushes available.

1. Calligraphic brushes – Create strokes that resemble those drawn with the angled point of a calligraphic pen.
2. Scatter brushes – Disperses copies of an object along a path.
3. Art brushes – Stretch a shape evenly along the length of a path.
4. Bristle brushes – Create brush strokes with the appearance of a natural brush with bristles.
5. Pattern brushes – Paint a pattern that repeats along a path. Pattern brushes can include up to five tiles, for the sides, inner corner, outer corner, beginning, and end of the pattern.

Creating Your Own Brushes for Ultimate Customization

The power of brushes in Illustrator lies in creating your own set of custom brushes from artwork you’ve created. For example, If you have a set of charcoal pencils you use for sketching, and you’d like the same effect within Illustrator, you could scan dots made with your pencils, scan and vectorize them, and create your own set of charcoal pencil brushes to use within Illustrator.

To create a new brush

Select the artwork you want to use on the art board, then Click the New Brush button on the Brushes Panel, or drag the selected artwork to the Brushes panel. From the pop up window that appears select the type of brush you want to create, and click OK. Each brush type has it’s own settings. Play with these to create a multitude of different brush behaviors from the same piece of art.

Painting with Live Paint

Live paint treats your art board as though it were a coloring book, meaning that all paths are on the same surface versus in front of, and behind each other. The paths will be used to divide the artwork into areas that can be colored. Once you’ve created a Live Paint group each path will remain editable, and Illustrator will adjust your colors to the path if you decide to edit the shape. It’s sort of like editing a coloring book page after you’ve colored it.

To create a Live Paint Group

Select one or more paths or  compound paths, then choose (Object | Live Paint | Make). Then select the Live Paint Bucket tool and click the selected object.

Trace Your Own Hand Drawn Artwork Using Live Trace

Live trace is an incredibly powerful tool. In my mind it lengths the outside world to the vector world of illustrator. If you’re used to drawing objects by hand and then scanning and editing them in Photoshop, then try the same process in Illustrator by first running your hand drawn sketch through Live Trace.

To use Live Trace

Import your bitmap (scanned) artwork on the art board by using (File | Place). With the artwork selected got to (Object | Live Trace | Tracing Options…). There are several presets within the Tracing Options window, or you can use the controls to fine tune your own settings. Check the preview check box to see your settings applied in real time. When you are satisfied click the Trace button.

After your object is traced click (Object | Expand) to turn your artwork into editable paths.

Did you know?
From within the Tracing Options window you can choose Fills or Strokes. So if you’re bringing a scanned line drawing into Illustrator you can convert it to strokes, and edit then you can edit the path as if you’ve created it from scratch in Illustrator.

Non-Destructive Design with Appearance Attributes

Appearance Attributes are similar to adjustment layers in Photoshop. Basically its Illustrator’s answer to non-destructive design. Appearance attributes are properties applied to the look of an object that do not effect its underlying structure.  If you apply an appearance attribute to an object and then decide to remove it later, it does not change the underlying object or any other attributes applied to the object.

Take a peak at the Appearance Panel (Window | Appearance). From within this panel you can control EVERYTHING about an object or group of objects. Get to know this panel and understand how to use it. It will make a huge difference in your workflow and how your vector artwork is structured.

Saving and Reusing Styles with the Graphic Styles Panel

Graphic styles in Illustrator are similar to Layer Style in Photoshop. So if you are familiar with Layer Styles then this concept is not new to you. With graphic styles you can save all of the attributes you have applied to an object. For example, say you have applied a gradient fill and stroke color, altered the objects transparency, and apply a drop show effect. Now simply drag this object to the Graphic Styles Panel and a new style will be created that you can then apply to other objects.

Note that you can save a group of graphic styles for use in other documents just as you would a group of swatches from the Swatches Panel.

Adding a Professional Touch with Special Effects

Special effects can be added to an object in much the same way you would in Photoshop. You can apply these effects by selecting an object and choosing an effect from the Effect menu.

Remember that all effects can be edited from the Attributes Panel. See above for details.

Automating Tasks to Make Your Life Easier within Illustrator

Actions

If you’ve read our previous Mastery post on Photoshop then you are already familiar with actions. They work the same way in Illustrator. Basically, and action is a recorded series of tasks that you can run over and over again with the click of a single button.

To create an action simply open the Actions Panel and click the New Action Button. Once you push Record all of your tasks will be recorded until you press the stop button on the Actions Panel.

This is an incredibly powerful feature to add to your work flow. For example, if you had a series of 45 button files that all needed to be resized and have a drop shadow applied. You could set that up as an action and apply it with the click of a button versus doing it all by hand.

Data Driven Graphics

Data-driven graphics make it possible to produce multiple versions of your artwork. For example, you work at a company with a sales staff of over 100+ employees, and you’ve designed a new business card for the entire sales staff. Instead of hand placing each employees data on the card, you can set the design file up as a template and use a script to populate the data (name, phone, email, photo) from the company database.

You can turn any piece of artwork into a template for data-driven graphics within Illustrator. All you need to do is define which objects on the art board are dynamic (changeable) using variables. This is incredibly handy if you are a designer within a production team. You can create a template that gives you control over the dynamic elements of your design. When you hand your template over for production, you can be sure that only the variable data will change.

]]>
http://www.indscoop.com/25-illustrator-techniques-every-designer-must-know/feed/ 0 6883
7 web design mistakes to avoid in Photoshop http://www.indscoop.com/7-web-design-mistakes-to-avoid-in-photoshop/ http://www.indscoop.com/7-web-design-mistakes-to-avoid-in-photoshop/#respond Sun, 09 Mar 2014 12:55:57 +0000 http://www.techinfolabz.com/?p=1700 […]]]> You’ve landed a nice web design project and now it’s crunch time. It’s time to work long, time to work hard, and time to deliver the goods. But before you hand over the finished product, make sure you avoid these 7 mistakes in Photoshop.

1. Avoid designs with jagged pixels (use anti-aliasing for text)

anti-aliasing

Anti-aliasing makes your pixels smooth and crisp. Not using this basic Photoshop feature for your text layers is pure heresy, and it makes your design look like it was made in 2002 due to all the jagged pixels. To solve this issue simply access the Character panel from ‘Window’, then choose an option depending on your needs. I find “Smooth” works best in most situations.

Tip: Make sure all your text layers are set to the same anti-aliasing style. For example, don’t set some on crisp, some on sharp and a few on strong — consistency is key.

2. Avoid a messy workflow (use folders to organize your layers)

folders

If you break this fundamental rule, you’re going to start hating everyone… included yourself. First of all, think of the developer who needs to sort through your layers to find the ones he needs. Then, consider how you might want to reuse some elements (header, footer, etc.) in another design. You’re going to have a major headache finding them, so save yourself the trouble and organize everything in properly-labeled folders.

Tip: Things like hover states and hidden drop-down menus can be color-coded so you don’t delete them by accident. It also helps the developer find them. To do that, simply right-click above the eye symbol next to your folder in the layers panel and choose one of the colors.

color-code

3. Avoid forgetting hover/down states (add it to buttons & menus)

hover

Hover/down states is one of the most overlooked things in web design. Since this isn’t something clients actively request, most web designers simply forget to include them. It’s not time-consuming or very demanding, yet people simply overlook them because they’re trying to get the project completed as soon as possible. Please take a few extra minutes and include these additional states in your final .psd. Attention to detail can set you apart from the competition.

Tip: You can quickly create hover/down states by using a Brightness/Contrast adjustment layer.

4. Avoid big file sizes (rasterize all smart objects)

smart

Smart objects are absolutely amazing, but they also eat up quite a lot of space. Don’t be surprised to see web design .psd files that are well over 200 mb because they’re jam packed with smart objects. While they may be useful in the design stage, they aren’t particularly helpful to anyone once the client signs off. Of course there are exceptions, yet in most cases it’s far better to rasterize your smart objects. You can easily reduce the .psd file size up to 90%!

Tip: Easily identify your smart objects by using “filter for smart object” tool in the top part of the layers panel (feature available in Photoshop CC).

5. Avoid only using common fonts (use modern fonts too)

font

Arial has its place in web design and nobody is suggesting you should take it off your list. But with many great choices like Google Webfonts, Adobe Typekit, FontSquirrel and more, you’d be a fool not to spice up your typography game. Plus, most of these are lightweight, free, and can be implemented by using only a few lines of code, so it’s a shame not to use them.

Tip: Make sure to explore all the weights a font family has to offer — using them wisely will surely enhance your design.

6. Avoid cramming elements together (create more whitespace)

cluttered-website

The reason I love designing websites in Photoshop is that I have full control over everything — like how much whitespace and breathing room I’d like to keep between elements. Even if your client has odd requests, like fitting 90% of the site above the oh-so-dead fold, you still have complete control over the outcome. So, use adequate space between your elements and it will make your design look much better.

Tip: If the end design looks amazing, the client won’t have much to say about the fold or anything else. But make sure you’re prepared to back up your choices with sound explanations.

7. Avoid forms that aren’t user-friendly (take time designing them)

forms

Forms aren’t all that exciting if you’re not into UI design, but for clients a great-looking field can mean the difference between a lead and a missed opportunity. Take the time to properly design your forms, from top to bottom, and include hints, error and success messages. This will surely score you high points with your clients.

Tip: Make sure to use Shift while arranging your fields so you keep spacing consistent. This sets your distances in increments of 10px, so you end up with a great looking forms.

]]>
http://www.indscoop.com/7-web-design-mistakes-to-avoid-in-photoshop/feed/ 0 1700
100+ amazing tutorials about Icon Designs http://www.indscoop.com/100-amazing-tutorials-about-icon-designs/ http://www.indscoop.com/100-amazing-tutorials-about-icon-designs/#respond Fri, 08 Nov 2013 09:34:13 +0000 http://www.techinfolabz.com/?p=929 […]]]> Designing an icon can be tricky as it is very important to balance good design and color with clarity. An icon, no matter how artistically designed will lose its value if it does not communicate to the viewer.

Effective icon designs

1. Create a theme: Although it is important for icons to stand out from each other, it is important to include a common design element. These elements can be based on color, perspective, size or light and shade.

2. Keep it simple: The function of an icon is clearest when the least number of elements are used in the design. Adding too many elements or trying to make the icon look realistic might make it too complicated to understand thereby defeating the purpose.

3. Consistency in shadows, light and reflection: Ensure that all the icons in the group are consistent with each other. If the light is acting from a specific direction, use the same direction for all other icons and add shadows and reflections accordingly. Use a simple perspective and ensure that all icons are drawn from the same angle.

Mistakes to avoid

1. Ambiguous and disarrayed designs: The efforts to create a set of icons that follow a theme may go waste if the icons look too similar. This will confuse the viewer and won’t serve the purpose. Similarly, if icons are too different from each other, the output will not be aesthetically pleasing and can be off-putting.

2. Cluttered icons: Adding too many elements or unnecessary design in the icon can confuse and irritate the viewer. The icon should be equally clear when resized. As icons are usually very small in size, it is important to keep it clean and easily understandable.

3. Unclear metaphors: While taking the creative approach to icon designing could get you great results; they may not always be as effective. Ensure that the designs you choose for icons are universally recognizable.

Want to learn more on how to design Icons from scratch, check out these 100+ amazing tutorials!

Create a Magnifying Glass Icon in Photoshop CS4

Create a Magnifying Glass Icon in Photoshop CS4

In this tutorial, we’ll combine simple vector shapes, layer styles and generous amounts of shininess to create the perfect magnifying glass for all your search icon needs. Let’s get started! – Author: Andrea Austoni

Design a Vintage Radio Icon in Photoshop

Design a Vintage Radio Icon in Photoshop

In this Photoshop Tutorial, you’ll learn how to design an old vintage radio using simple shapes, gradients, patterns and textures. – By Jurgis Narvils

How to Create an Alarm Clock Icon

How to Create an Alarm Clock Icon

With simple shapes and gradients, this easy tutorial will show you how to create an alarm clock icon. We’ll be using Illustrator CS4 for this tutorial, but those of you with older version should be able to follow along as well. – Author: Rype

How to Create A Swanky Coffee Table Icon in Photoshop

How to Create A Swanky Coffee Table Icon in Photoshop

How to Create A Swanky Coffee Table Icon in Photoshop

How to Design a Custom Newspaper Icon – Vector Plus Tutorial

How to Design a Custom Newspaper Icon – Vector Plus Tutorial

How to Design a Custom Newspaper Icon – Vector Plus Tutorial

New Quicktime Icon in Photoshop

New Quicktime Icon in Photoshop

Apple is about to release their new version of Mac OS X, code-named as Snow Leopard. With this new release there will be a totally new version of Quicktime. One thing that is really cool is the new icon for the app. Because of that I decided to play a bit with Photoshop to reproduce the effect. – By Fabio Sasso

Draw a Speaker Icon in Photoshop Part 1

Draw a Speaker Icon in Photoshop Part 1

This tutorial is contributed by Sohan Negi and will show you in every details on how we can create a set of speakers icon from scratch in Photoshop. As this is the longest tutorial ever, it was split into Part 1 and Part 2. – By Sohan Negi

Design a Realistic 3D Baseball Cap in Photoshop

Design a Realistic 3D Baseball Cap in Photoshop

In this Photoshop tutorial, I will show you how to create a realistic 3D Baseball cap in Adobe Photoshop using the Pen tool, brushes and some nifty tricks. – By Cucu Tudor Ionel

Design a Stylish Mail Icon in Photoshop

Design a Stylish Mail Icon in Photoshop

I have worked on this new tutorial with Cucu Tudor. In this tutorial you will learn how to create a glossy mail icon that can be used for your apps or websites. – By Constantin Potorac

How to Create a Golden, Vector Compass in Illustrator

How to Create a Golden, Vector Compass in Illustrator

How to Create a Golden, Vector Compass in Illustrator

Create an Adobe Box Icon in Photoshop

Create an Adobe Box Icon in Photoshop

Create an Adobe box Icon in Photoshop, to fill your dock with new icons. Learn techniques on brushes, blur, layer mask and blend modes. – Via drawingclouds.com

Create a Fun Icon of Frozen People on Ice – Part II

Create a Fun Icon of Frozen People on Ice – Part II

Create a Fun Icon of Frozen People on Ice – Part II

Icon Design Tutorial – Designing a New Icon In Illustrator

Icon Design Tutorial – Designing a New Icon In Illustrator

Icon Design Tutorial – Designing a New Icon In Illustrator – Via designreviver.com

Create a Dock Icon Folder in Photoshop

Create a Dock Icon Folder in Photoshop

Create a dock icon folder in photoshop, customize it and fill your dock with all your favorite folders. – Via drawingclouds.com

Glossy RSS icon

Glossy RSS icon

In this tutorial we are going to create a colorful RSS icon for your blog. – By ART-D

Create a Stylized GPS Icon

Create a Stylized GPS Icon

Location based software and peripherals are very popular these days. So, In this beginner/intermediate Illustrator tutorial, I will show you how to create a stylized GPS icon using simple shapes and gradients. Using these basic techniques, you can easily create other icons, logos, and illustrations. – Via vectips.com

Design a Vector Audio Speaker Icon In Illustrator

Design a Vector Audio Speaker Icon In Illustrator

Design a Vector Audio Speaker Icon In Illustrator

Create an iMac – Design Your Desk – Part 2

Create an iMac – Design Your Desk – Part 2

In part two of our seven part series called “Design your desk”, we’re going to be looking at the creation of your computer’s horsepower – The Tower – or in this case, an iMac. As usual, this tutorial will cover everything from drawing the basic shape, to shading and shadowing. – Via psvibes.com

How to Create a Van Icon in Photoshop

How to Create a Van Icon in Photoshop

How to Create a Van Icon in Photoshop

How to Create a Yellow Submarine Icon with Gradient Meshes – Vector Plus Tutorial

How to Create a Yellow Submarine Icon with Gradient Meshes – Vector Plus Tutorial

How to Create a Yellow Submarine Icon with Gradient Meshes – Vector Plus Tutorial

How to Create a Gearbox Settings Icon Using Simple Shapes

How to Create a Gearbox Settings Icon Using Simple Shapes

How to Create a Gearbox Settings Icon Using Simple Shapes

How to Create a Transparent Battery Icon

How to Create a Transparent Battery Icon

How to Create a Transparent Battery Icon

Craft a Delicious Chinese Food Icon

Craft a Delicious Chinese Food Icon

Craft a Delicious Chinese Food Icon

Draw a Classy 3D Poker Chip in Photoshop

Draw a Classy 3D Poker Chip in Photoshop

In this tutorial we are going to illustrate a 3D Poker Chip in Adobe Photoshop starting from scratch. New Photoshop users should consider running through our Pen Tool guide first! – By Federico Sportelli

Create a Cute Panda Bear Face Icon

Create a Cute Panda Bear Face Icon

Lately, I have been working on some children illustrations, creating some über cute creatures. In the following easy tutorial, I’ll show you how to create a cute panda bear face icon all from ellipses (well, actually there is one rectangle for the background). – Via vectips.com

paint brush logo icon in Photoshop

paint brush logo icon in Photoshop

Today I will show you how to create a Photoshop design paint brush logo icon in photoshop. – Via tutorialagent.com

panic button logo icon in photoshop

panic button logo icon in photoshop.

Today I am telling you about How to Create Photoshop design panic button logo icon in photoshop. – By gnews

Glossy Black Button Icons

Glossy Black Button Icons

Today’s Etc Tutorial is a glossy black button icon. We will also be creating the accompanying spot light background effect. The check mark is a standard Photoshop shape. – By Tutorials Etc

Making a Photoshop Shield

Making a Photoshop Shield

Making a Photoshop Shield

How to Illustrate a Brain Icon for OSX and Vista

How to Illustrate a Brain Icon for OSX and Vista

How to Illustrate a Brain Icon for OSX and Vista

Handy Web 2.0 Icons In Photoshop

Handy Web 2.0 Icons In Photoshop

Handy Web 2.0 Icons In Photoshop

Photoshop Tutorial: Design the Mac OS X Leopard Folder

Photoshop Tutorial: Design the Mac OS X Leopard Folder

Learn how to create the popular Mac OS X Leopard Folder icon using Photoshop in just Ten Easy steps. Comes with a PSD, useful brushes and custom shapes! – By Shashank Tejura

How to Create a Moka Express Icon

How to Create a Moka Express Icon

How to Create a Moka Express Icon

Cubite graphics icon

Cubite graphics icon

Today I will show you how to create a Cubite graphics design logo icon Photoshop in Photoshop. – By tutorialagent.com

Create a High-Gloss Graduation Hat Icon Design

Create a High-Gloss Graduation Hat Icon Design

Photoshop is great to use for creating quality icon designs. In this tutorial, I will teach you how to make a professional, shiny, clean graduation hat icon. The techniques in this tutorial will help you graduate to the next level in icon design. – Author: Constantin Potorac

How to Create a Magic Wand Icon

How to Create a Magic Wand Icon

How to Create a Magic Wand Icon

MP3 player icon

MP3 player icon

Today I will show you how to create a Photoshop design sell MP3 digital player logo icon in Photoshop. – Via tutorialagent.com

Creating A Vector Style MacBook From Scratch

Creating A Vector Style MacBook From Scratch

This tutorial is quite a long one, so I would go get a drink now if I were you, OK we are going to make a MacBook Pro in Photoshop using shapes and different blending options, combining these two simple things we get a realistic vector outcome which can be used in many different situations, so…let’s begin – By Steve Tolley

Sony playstation Icon

Sony playstation Icon

Today I will show you how to create a Photoshop design sony playstation logo icon in photoshop. – Via tutorialagent.com

Photoshop Gold Ipod Shuffle Icon

Photoshop Gold Ipod Shuffle Icon

In this tutorial,I am telling you about How to Creae Photoshop Gold Ipod Shuffle Icon. – Via tutorialtown.com

Make a 3D Vector Film Roll, Drawn In Perspective

Make a 3D Vector Film Roll, Drawn In Perspective

Make a 3D Vector Film Roll, Drawn In Perspective

Compact Disc Icon

Compact Disc Icon

The icon were going to be creating is all done using shape layers which means you can resize up and down without loss of quality. Were going to start off with a fairly big canvas so create a new document 600 x 600 pixels, fill your background with any color, ive opted for a nice blue gradient background. – Author: Richard Carpenter

Simple Coffee Cup Icon Photoshop Tutorial

Simple Coffee Cup Icon Photoshop Tutorial

In this tutorial we’ll be going though creating a semi-photo realistic coffee cup, with some nice frothy coffee. – By Alex Rogahn

Halloween Pumpkin Icon

Halloween Pumpkin Icon

This tutorial will show you how to draw a pumpkin, with a scary cut out face for Halloween. – By ART-D

Photoshop Video Game Mario Icon

Photoshop Video Game Mario Icon

Here I will teach you about How to Create Photoshop Video Game Mario Icon – Via tutorialqueen.com

Carbon Style Icon

Carbon Style Icon

Right lets get started create a new document im using 600×200 but you can use what ever size you want depending on how many icons you want. Im also using a nice bright background so i can see everything abit more clearly. Select the rounded rectangle tool, change all the settings in the top tool bar to reflect the image below. – Author: Richard Carpenter

Design Float Circle Icon (AI Tutorial)

Design Float Circle Icon (AI Tutorial)

Finding the right icons isn’t always easy and in this case i had the perfect socialbookmarking icon set by fasticon, except one problem, it was missing a Designer float icon! so i decide to create one my self. – Via qbrushes.com

iTune Icon

iTune Icon

The challange of this tutorial is to use various Blending modes and blending techniques to replicate the iTune icon. This tutorial is a good exercise to master your Blend techniques. – Via ndesign-studio.com

Sleek Icon Design

Sleek Icon Design

Today were going to be creating a colorful image icon from scratch, the icon features a colorful design in a shiny metal like border the icon also used a bokeh effect. – About The Author: Richard Carpenter

Design a 3D Box Icon in Photoshop

Design a 3D Box Icon in Photoshop

In this tutorial I’ll explain step by step how to create a sleek Box Icon in Adobe Photoshop for use in apps or websites. I would like to thank Luca Vlad(Wlady) for collaborating with me in creating this tutorial! – Cucu Tudor Ionel

How to Create a Super Shiny Pencil Icon

How to Create a Super Shiny Pencil Icon

The Pencil is one of the visual metaphors most used to express creativity. In this tutorial, I’ll show you how to draw a pencil icon. We’ll have a look at gradients, selection tools, and basic transform operations. Let’s have some fun with this. – Author: Eren Goksel

Custom Hard Drive Icon

Custom Hard Drive Icon

In this tutorial il show you how to create a custom hard drive icon in various colors. – Author: Richard Carpenter

Create a Vector Lock Icon Design

Create a Vector Lock Icon Design

Create a Vector Lock Icon Design

Photoshop Pedometer Icon

Photoshop Pedometer Icon

Photoshop Pedometer Icon

3D Mp3 Player

3D Mp3 Player

3D Mp3 Player – Author: Richard Carpente

Photoshop Film Clapper Logo Icon

Photoshop Film Clapper Logo Icon

Today I will teach you about How to Create Photoshop Film Clapper Logo Icon. – Via tutorialqueen.com

Vista Error Icon

Vista Error Icon

In this Photoshop tutorial I’ll show you how to create Windows Vista icons using a few basic layers, creative layer styles and some web 2.0 gradients. – Via pshero.com

Creating an XP Style Monitor Icon

Creating an XP Style Monitor Icon

Creating an XP Style Monitor Icon

How To Create A Vector Wacom Tablet In Illustrator

How To Create A Vector Wacom Tablet In Illustrator

How To Create A Vector Wacom Tablet In Illustrator

How To Create An Academy Icon From Simple Shapes

How To Create An Academy Icon From Simple Shapes

How To Create An Academy Icon From Simple Shapes

Make a Handy 3D Vector Calendar Icon

Make a Handy 3D Vector Calendar Icon

Make a Handy 3D Vector Calendar Icon

How to Create a Vector Safari Compass in Illustrator

How to Create a Vector Safari Compass in Illustrator

How to Create a Vector Safari Compass in Illustrator

How to create a Television Icon

How to create a Television Icon

How to create a Television Icon

How to Create Shiny, Vector Dice in Illustrator

How to Create Shiny, Vector Dice in Illustrator

How to Create Shiny, Vector Dice in Illustrator

How to Create an Energy Saving Bulb in Illustrator

How to Create an Energy Saving Bulb in Illustrator

How to Create an Energy Saving Bulb in Illustrator

How to Draw A Realistic Vector Light Bulb From Scratch

How to Draw A Realistic Vector Light Bulb From Scratch

How to Draw A Realistic Vector Light Bulb From Scratch

Create a Glossy Volt Icon in Photoshop

Create a Glossy Volt Icon in Photoshop

Create a Glossy Volt Icon in Photoshop

LG LCD Monitor Icon

LG LCD Monitor Icon

LG LCD Monitor Icon

Create a Vector Film Slate Icon

Create a Vector Film Slate Icon

Create a Vector Film Slate Icon

Share This Icon

Share This Icon

Share This Icon

How to Make a Vector Military Cap Icon

How to Make a Vector Military Cap Icon

How to Make a Vector Military Cap Icon

Abracadabra, How to Create a Magic Hat Icon

Abracadabra, How to Create a Magic Hat Icon

Abracadabra, How to Create a Magic Hat Icon

Creating a Cool Yellow Helmet Icon

Creating a Cool Yellow Helmet Icon

Creating a Cool Yellow Helmet Icon

icon-tutorial-2nd-series-16

Create An Aperture Style Camera Lens Icon

Create An Aperture Style Camera Lens Icon

Create An Aperture Style Camera Lens Icon

Create An iPod Shuffle

Create An iPod Shuffle

Create An iPod Shuffle

Create a Speed Gauge and Watch Icon in Photoshop

Create a Speed Gauge and Watch Icon in Photoshop

Create a Speed Gauge and Watch Icon in Photoshop

Create a Cheerful Twitter Bird in Photoshop

Create a Cheerful Twitter Bird in Photoshop

Create a Cheerful Twitter Bird in Photoshop

Illustrate a Traffic Cone Icon in Photoshop

Illustrate a Traffic Cone Icon in Photoshop

Illustrate a Traffic Cone Icon in Photoshop

Designing a Sleek Pencil Icon

Designing a Sleek Pencil Icon

Designing a Sleek Pencil Icon

Icon Design Tutorial: Drawing A Pencil Icon

Icon Design Tutorial: Drawing A Pencil Icon

Icon Design Tutorial: Drawing A Pencil Icon

How to Create A Realistic Chef’s Knife in Illustrator

How to Create A Realistic Chef’s Knife in Illustrator

How to Create A Realistic Chef’s Knife in Illustrator

Create a Jaguar Style Folder Icon

Create a Jaguar Style Folder Icon

Create a Jaguar Style Folder Icon

Create a Custom Mac OSX Style Ring Binder Address Book Icon

Create a Custom Mac OSX Style Ring Binder Address Book Icon

Create a Custom Mac OSX Style Ring Binder Address Book Icon

How to Turn Glasses into a Great Geek Icon

How to Turn Glasses into a Great Geek Icon

How to Turn Glasses into a Great Geek Icon

Thermometer Icon

Thermometer Icon

Thermometer Icon

design USB portable speaker logo icon in Photoshop

design USB portable speaker logo icon in Photoshop

design USB portable speaker logo icon in Photoshop

Create a Glowing Globe Icon in Photoshop

Create a Glowing Globe Icon in Photoshop

Create a Glowing Globe Icon in Photoshop

Angry Emoticon

Angry Emoticon

Angry Emoticon

Water cooler logo icon in photoshop

Water cooler logo icon in photoshop

Water cooler logo icon in photoshop

design stainless steel shape sensor dustbin logo icon in Photoshop

design stainless steel shape sensor dustbin logo icon in Photoshop

design stainless steel shape sensor dustbin logo icon in Photoshop

Photoshop Laser Printer Model

Photoshop Laser Printer Model

Photoshop Laser Printer Model

Photoshop PC Adapter Logo Icon

Photoshop PC Adapter Logo Icon

Photoshop PC Adapter Logo Icon

design whistle logo icon in photoshop

design whistle logo icon in photoshop.

design whistle logo icon in photoshop.

Photoshop Electronic Torch Light Icon

Photoshop Electronic Torch Light Icon

Photoshop Electronic Torch Light Icon

design joy stick logo icon in photoshop

design joy stick logo icon in photoshop.

design joy stick logo icon in photoshop.

How To Draw The Billings Application Icon

How To Draw The Billings Application Icon

How To Draw The Billings Application Icon

USB Stick Tutorial

USB Stick Tutorial

USB Stick Tutorial

Create an envelpe icon with a satin feel

Create an envelpe icon with a satin feel

Create an envelpe icon with a satin feel

How to Create a Juicy RSS Feed Icon

How to Create a Juicy RSS Feed Icon

How to Create a Juicy RSS Feed Icon

Beginner Illustrator Tutorial – Create a Vector RSS Icon

Beginner Illustrator Tutorial – Create a Vector RSS Icon

Beginner Illustrator Tutorial – Create a Vector RSS Icon

Glassy & Vibrant Rss feed icon Tutorial – Vista Style

Glassy & Vibrant Rss feed icon Tutorial - Vista Style

Glassy & Vibrant Rss feed icon Tutorial – Vista Style

Adobe Photoshop CS3 Style Icons

Adobe Photoshop CS3 Style Icons

Adobe Photoshop CS3 Style Icons

Design a Detailed Compass Icon in Photoshop

Design a Detailed Compass Icon in Photoshop

Design a Detailed Compass Icon in Photoshop

Create a Wooden Stack Dock Icon in Photoshop

Create a Wooden Stack Dock Icon in Photoshop

Create a Wooden Stack Dock Icon in Photoshop

Icon design tutorial: How to make a Calendar icon

Icon design tutorial: How to make a Calendar icon

Icon design tutorial: How to make a Calendar icon

Photoshop tutorial website pill button icon design in photoshop

Photoshop tutorial website pill button icon design in photoshop

Photoshop tutorial website pill button icon design in photoshop

Make 3D Yet Flat Looking Shopping Basket Icons

Make 3D Yet Flat Looking Shopping Basket Icons

Make 3D Yet Flat Looking Shopping Basket Icons

Post Pic Monitor Icon Design – Photoshop Tutorial

Post Pic Monitor Icon Design – Photoshop Tutorial

Post Pic Monitor Icon Design – Photoshop Tutorial

Design a Glossy Download Icon

Design a Glossy Download Icon

Design a Glossy Download Icon

How to Create a Stack of Poker Chips

How to Create a Stack of Poker Chips

How to Create a Stack of Poker Chips

Crystal Clear Bubble Icons

Crystal Clear Bubble Icons

Crystal Clear Bubble Icons

Create a Shiny Lock Icon Design

Create a Shiny Lock Icon Design

Create a Shiny Lock Icon Design

]]>
http://www.indscoop.com/100-amazing-tutorials-about-icon-designs/feed/ 0 929
50 Excellent 3D Adobe Illustrator Tutorials http://www.indscoop.com/50-excellent-3d-adobe-illustrator-tutorials/ http://www.indscoop.com/50-excellent-3d-adobe-illustrator-tutorials/#respond Fri, 08 Nov 2013 06:53:57 +0000 http://www.techinfolabz.com/?p=878 […]]]> Adobe Illustrator is one of the best applications for making graphic artwork like logos, print designs and Web pages. As time goes on, more and more Illustrator techniques are introduced by talented designers and artists in the industry who achieve some of the best results on the Web. One hot trend nowadays is 3D effects. So, we’ve gathered together some 3D tutorials to give you an idea of what Adobe Illustrator offers and how to use its 3D features. This list mixes tutorials for beginners and experts.

Here then is our round-up of 50 Excellent Adobe Illustrator Tutorials for 3D artwork. You’ll learn a lot of techniques and good practices.

Adobe Illustrator 3D Tutorials

How to Create Funky 3D Springs in Illustrator
In this tutorial, learn how to create 3D springs in Illustrator.

Screenshot

Disco Ball Tutorial
In this tutorial, you’ll learn how to create a disco ball effect in Illustrator.

Screenshot

Design Gift Boxes Using Illustrator’s 3D Tools
Learn how to make a fully editable 3D ribbon and masked 3D typography. Also, you’ll create sparkles using the Symbol Tools.

Screenshot

Let’s Make a Playful Yet Robust 3D Letter Design
This tutorial is perfect for the near beginner who wants to take their skills to the next level. You will create 3D text and use depth of field to enhance a design.

Screenshot

3-D Bowl
This tutorial shows how to create a realistic 3D fruit bowl illustration with Adobe Illustrator CS2.

Screenshot

Illustrator Tutorial – 3D lighted text effect
In this tutorial, you’ll learn how to create 3D text and then apply some brushes to get a neat, futuristic spacey effect.

Screenshot

How to Create an Open Book with Illustrator’s 3D Extrude & Bevel Tool
In this tutorial, you’ll learn how to create an open book mostly using Illustrator’s 3D Extrude and Bevel Tool. You’ll create open pages with graphics and then add a wavy background.

Screenshot

3-D Blue LCD Alarm Clock
Create a 3D neon-blue digital LCD clock in Illustrator, with a final step in Photoshop. This tutorial covers the Illustrator portion. Some skills you’ll learn here are creating perspective, blending and adding gloss.

Screenshot

Create a Milk Bottle with a Funny Cow Label
In this tutorial, you will create a 3D milk bottle with a cute cow label.

Screenshot

3-D Charts in Adobe Illustrator CS
Create a 3D pie chart with transparency and highlights so that the graphic looks like semi-opaque plastic.

Screenshot

Make 3D Yet Flat-Looking Shopping Basket Icons
Learn how to create a custom shopping-basket icon for your next Web design project. You’ll need a solid understanding of Adobe Illustrator’s tools to complete this tutorial.

Screenshot

How to Make a Vector Military Cap Icon
This tutorial shows the intermediate-to-advanced Adobe Illustrator artist how to make a realistic military-style cap icon using mainly gradients, blends and the Gradient Mesh tool.

Screenshot

Rendering a 2-D Spark Plug Diagram from 3D Components in Illustrator
This tutorial takes you through building a 3D spark plug from multiple components and then expanding the image into a 2-D vector diagram.

Screenshot

Cool 3D Logo
In this tutorial, you’ll learn how to create a company logo with a cool 3D style.

Screenshot

Create a Checkered 3D Chess Figure Scene
In this tutorial, you’ll learn how to create a 3D chess scene with the help of the 3D Revolve tool and gradient masks.

Screenshot

Big 3D Graffiti Tutorial
An easy step-by-step tutorial on creating 3D graffiti artwork in Adobe Illustrator.

Screenshot

3-D Graphs
This tutorial shows you how to create 3D graphs in Adobe Illustrator CS2 with ease.

Screenshot

3-D Flower Pot
Create a 3D flower pot, including soil and flower, in this tutorial.

Screenshot

Make a Handy 3D Vector Calendar Icon
Make a handy calendar icon to use on your blog, website or print projects. You’ll use Illustrator’s Path and 3D tools to create this design.

Screenshot

Create and Color an Eco Easter Egg in Adobe Illustrator
In this tutorial, you will learn how to create an “eco”-colored egg for Easter. It is eco because no artificial colorants are used.

Screenshot

Using Swift as a Powerful 3D Illustration Tool
Learn how to create 3D illustrations using Adobe illustrator and Swift 3D .

Screenshot

Create a Rotatable Globe in Adobe Illustrator
Create a 3D globe of the earth that revolves to show countries and continents.

Screenshot

How to Make Realistic Skate Wheels in Illustrator
In this tutorial, you’ll create a set of realistic skateboard wheels and map the wheels using the 3D Revolve tool in Illustrator. You will also learn some cool tricks to add finishing touches.

Screenshot

Glossy Dice Tutorial
Create glossy dice in just seven steps. Throughout this tutorial, you’ll learn how to use the 3D features and other features in Illustrator.

Screenshot

Create a Vibrant 3D Pixel Type Treatment
This tutorial shows you how to give fonts a 3D pixelated look. Using a free font, gradients and Illustrator’s 3D filter, you will easily create a type treatment that you can apply to many other fonts.

Screenshot

Create a Can of Beans by Mapping Vectors to a 3D Object
Learn how to create a can of beans, built entirely from vectors, using the Symbols palette, the Extrude tool and Illustrator’s image mapping.

Screenshot

Working with 3D Objects and Transparencies to Make a Vector Cola Bottle Design
A tutorial that discusses how Illustrator deals with transparency in 3D objects. Learn how to create a plastic cola bottle.

Screenshot

3-D Logo
This tutorial shows you how to make 3D gradient logo in minutes. This technique is great for making 3D graphic objects and icons.

Screenshot

3-D Hammer Using Illustrator
This tutorial show how to create a 3D hammer in 10 steps.

Screenshot

Drawing a Vase in Illustrator Tutorial
In this tutorial, you’ll create a 3D vase using paths and 3D revolve options.

Screenshot

Turn a Boring Bar Graph into a 3D Masterpiece
In this tutorial, you’ll plot an accurate bar graph using Adobe Illustrator’s Graph tool and render the graph to give it added visual appeal.

Screenshot

Fun with AI’s 3D tool
A tutorial exploring more of the 3D tools in Illustrator.

Screenshot

Create a 3D Pushpin and a Paper Note in Illustrator
A tutorial on creating a 3D pushpin with the 3D Revolve tool. You will also learn how to apply highlights and create shadows for a more realistic effect, and add a paper note.

Screenshot

Creating Omspace 3D cylinder graphic in Illustrator
In this tutorial, you will create good-looking 3D cylinders and symbols.

Screenshot

Design a Business Report Cover
Build a classic design layout quickly using Adobe Illustrator. Throughout this tutorial, you’ll use the 3D tool to make a set of business buildings, and then add motion lines.

Screenshot

3-D Apple Tutorial
A tutorial on how to create a 3D apple.

Screenshot

3-D Pill
In this tutorial, you’ll learn how to create a 3D pill to cure your design headaches.

Screenshot

Create a Dream Design with 3D Typography
In this tutorial, you’ll create a dreamscape with 3D typography using Illustrator and Photoshop.

Screenshot

How to Make a Delicious Vector Orange in 9 Decisive Steps
Create a semi-realistic vector orange with simple shapes and tools and multiple effects.

Screenshot

Craft a Delicious Chinese Food Icon
This tutorial demonstrates how to craft a delicious Chinese food icon set, along with numerous vector Illustration techniques. You’ll need a strong command of Adobe Illustrator’s tools for this one.

Screenshot

Create a Colourful 3D Text Explosion
Create a 3D text explosion using Illustrator, and finish it with Photoshop.

Screenshot

Adobe Illustrator in 3-D
Create a 3D can and label in Illustrator.

Screenshot

3-D Isometric Vector Icon
Learn how to create a 3D isometric vector icon in Illustrator.

Screenshot

Use the power of Illustrator to Create Cool 3D Infographics
Translate abstract data into an easy-to-understand 3D illustration with these tips.

Screenshot

3D Chess Board, King, and Pawn
Learn Illustrator’s 3D tools, Live Paint Bucket tool and pathfinders, and learn how to make a grid and show basic perspective.

Screenshot

Make a 3D Red Blood Cell Button in Illustrator
A tutorial that teaches you how to make red blood cells using the 3D effects in Illustrator.

Screenshot

3-D Effects in Illustrator CS
A tutorial focusing on basic 3D effects in Illustrator. You will learn extrusion and bevel techniques, including surface mapping and other options.

Screenshot

]]>
http://www.indscoop.com/50-excellent-3d-adobe-illustrator-tutorials/feed/ 0 878
60 Effective Text Effects – Adobe Illustrator Tutorials http://www.indscoop.com/60-effective-text-effects-adobe-illustrator-tutorials/ http://www.indscoop.com/60-effective-text-effects-adobe-illustrator-tutorials/#respond Fri, 08 Nov 2013 06:51:16 +0000 http://www.techinfolabz.com/?p=817 […]]]> Learning new techniques or styles will add extra dimension to your creativity. Creativity is synonym of designing and if you are a designer then it is essential to have the creative thinking and skills to create magic in your design. Adobe Illustrator is a leading vector graphics editor which provides an excellent opportunity to create wonderful text effects. In this post we have compiled a massive list of best useful text effect tutorials we found on the web. There are several different types of illustrator tutorials for beginners, typographic effects, how to create 3d text effect in illustrator and all the latest tips and tricks you need to know. So, if you are looking for extra help with your design skills, I strongly encourage you to give them a try.

Create a Molten Metal Text Effect in Illustrator

text-effect-tutorial

Create a Vector Cross Stitch Effect

text-effect-tutorial

Retro 3D Arcade Text Effect in Illustrator

text-effect-tutorial

How to Create a Vector Glitter Text Art Effect

illustrator-text-effects

How to Create a Gloomy Jail Wall Text Effect in Illustrator

illustrator-text-effect

Create a Vector Grass Text Effect

text-effect-tutorial

Create a Stylish, Vector Hair Typography Illustration

illustrator-text-effect-tutorials

Create a Retro Folded Text Effect in Illustrator

illustrator-tutorial

Learn to Create a Variety of Beveled Lettering

illustrator-text-effect-tutorials

Paint Roller Illustration with a Grungy, Paint Text Effect

illustrator-text-effect-tutorials

How to Create a Bone Calligram with Art Brushes

text effect tutorial

Create a Dark Text Effect in Adobe Illustrator

text-effect-tutorial

Create An Editable Metal Type Treatment

text-effect-tutorial

Create a 3D Newspaper, Text Effect in Illustrator

text-effect-tutorials

Create Elegant, Glassy, 3D Typography

text-effect-tutorial

Stylish text effect tutorial using Illustrator

text-effect-tutorial

Create the Letter S in the Shape of a Slinky Toy

text-effect-tutorial

Create a Trendy Retro Type Treatment

text-effect-tutorial

How to Create 3D Type in Perspective in Illustrator

illustrator-tutorial

How to Create a Fun 3D Plastic Text Effect

text-effect-tutorials

Create 3D Text in Adobe Illustrator

text-effect-tutorial

Make a Playful Yet Robust 3D Letter Design

text-effect-tutorials

Create a Stitched Type Effect

text-effect-tutorial

Create a Lace Text Effect in Adobe Illustrator

Text-effect-tutorials

Illustrator Tutorial: Bling Bling Text Effect

text-effect-tutorial

Illustrator Tutorial: Rusty Metal Text Effect

illustrator-text-effect-tutorials

Animal Print Text Effect with Adobe Illustrator

text effect tutorial

Create a Simple Blood Text Effect

text-effect-tutorials

How to Create a Colorful, 3D Text Effect

text-effect-tutorial

Create a Furry Calligram in Illustrator

illustrator-text-effect-tutorials

Create a 3D Grungy Text Effect in Illustrator

illustrator-text-effects

Create a Mummy Text Effect

illustrator-text-effect-tutorials

Creating an Environmentally Friendly Green Type Treatment

text-effect-tutorial

Create a Green Viscous Text Effect

text-effect-tutorial

How to Create a Glossy, Colorful Text Effect

text-effect-tutorials

How to Create a Hand Drawn Style Text Effect

text-effect-tutorial

Create a Marker Text Effect in Illustrator

illustrator-text-effect-tutorials

Create a Bending 3D Text Effect in Adobe Illustrator

illustrator-text-effect-tutorial

Create 3D Glass Shattered Text effect

text-effect

Create a Neon Text Effect in Adobe Illustrator

text-effect-tutorial

How to Create Colorful Neon Text with Adobe Illustrator

text-effect-tutorial

Create a Sparkly Text Effect

text-effect-tutorials

Create a Smokin’ Western Type Treatment in Illustrator

text-effect-tutorial

Create a Chalkboard Type Treatment

illustrator-text-effect-tutorials

Create a Slick Golden Text Effect with Adobe Illustrator

illustrator-text-effect-tutorials

Create a Delicious Chocolate Text Effect

text-effect-tutorial

Create an Old Font Text Effect in Illustrator

text-effect-tutorials

Create a Simple Origami Style Typography in Illustrator

text-effect-tutorial

Create a Jar Illustration and Splashy, Purple Text Effect

text-effect-tutorial

Create a Richly Ornate Typographic Illustration

illustrator-text-effect-tutorials

Make a Wooden Text Effect

text-effect-tutorials

Create a Glossy, Smooth Text Effect

text-effect-tutorial

Create a Silky Ribbon Text Effect

illustrator-tutorial

Create a Folded Paper Text Effect

text-effect-tutorial

Create Impossible Text and Apply Blueprint Effect to It

text-effect-tutorials

How to create a glassy text effect in Illustrator

text-effect-tutorials

The Power of the Average Command: Creating Swirly Type

text-effect-tutorial

Create a Stylish Colorful Text Effect in Illustrator

text-effect-tutorial

Create Fun, Eye-catching Text with Adobe Illustrator

illustrator-text-effect-tutorials

]]>
http://www.indscoop.com/60-effective-text-effects-adobe-illustrator-tutorials/feed/ 0 817
3D Lighting and Shading in Illustrator http://www.indscoop.com/3d-lighting-and-shading-in-illustrator/ http://www.indscoop.com/3d-lighting-and-shading-in-illustrator/#respond Wed, 06 Nov 2013 09:36:14 +0000 http://www.techinfolabz.com/?p=810 […]]]> Adobe Illustrator’s 3D effects have some sophisticated settings that allow you to add lighting and adjust surface properties of 3D vector objects. Understanding how to use these settings can help you to recreate realistic materials such as plastic and gold, and achieve some interesting “ultra-shiny” lighting effects fairly quickly. In this tutorial, we’ll explore these 3D lighting and shading effects. Surface Shading Types The first setting that has a big impact on your 3D object’s appearance is the surface shading type. There are four types to choose from, and each has a distinct look, as illustrated below. Here’s how to create a little person icon using these different surface types: First, draw with the Pen tool shape 1 for the head and body, and then shape 2 for the arms. Next, give them a nice cyan fill from the Swatches panel. Select them and turn these 2D shapes into 3D objects by applying the 3D Revolve effect. Do this by clicking on the menu Effect > 3D > Revolve. In the 3D Revolve Options dialog box that pops up, simply select a surface type from theSurface dropdown menu.

The surface dropdown menu has four different surface shading types Plastic Shading is very shiny and is the only surface type that has highlights, so it is suitable for illustrating objects that have a glossy or reflective surface. Diffuse Shading has a soft matte look since it has no highlights, so it is great for cardboard or wood. Wireframe completely ignores the fill color and renders the 3D object as transparent, with lots of black thin lines outlining its geometry. This is especially useful for a technical or blueprint look. No Shading does not have any lighting options and paints all surfaces of the 3D object the same color as the 2D object. This makes the 3D object look completely flat. So in this case, our person icon looks silhouetted. Adding Lights and Creating an Ultra-shiny Effect Now that we know the different surface shading types, select Plastic Shading from this menu and move swiftly on to the Light Sphere directly below it. If you cannot see all the surface and lighting settings, click the More Options button to reveal them.

Click the More Options button to reveal all the surface and lighting options The Light Sphere is where you can position lights to illuminate your 3D object. Lights are represented by little dots, and you can move them by clicking on a light and dragging it around the sphere surface. To place a light behind the sphere just click the Move selected light to back of objectbutton. By default there is only one light, but you can add new lights by clicking on the New Light button. Each light will produce a highlight, so the more lights that you have, the brighter our person icon becomes. Let’s add six lights and position them around the sphere like I’ve done below. Next, increase the Ambient Light setting slightly so the lighting all around the 3D object is much brighter. I’ve moved it from the standard 50% to 69%. Finally, increase the Highlight Intensity value all the way up to 100% to make the highlights really stand out. Our cyan plastic person has now changed into someone that is much more shiny and attractive!

Shading Color and Creating Gold The shading color is the color that is mixed with the main color of your 3D object, and it is most visible in the shadow areas. By default 3D objects are shaded with black, but in reality not all objects are black in their shadow areas. Fortunately, by selecting the Custom option in the Shading Color dropdown menu, we can change this. Simply click the color box next to this and a color chooser dialog box will pop up for you to choose a different color.

Changing the shading color In the example above, I have used the Type tool to create a dollar sign by typing this sign on the keyboard. Next, set the fill color to a dark yellow using the Swatches panel and apply the 3D Extrude & Bevel effect to it by clicking on the menu Effect > 3D > Extrude & Bevel. The first dollar sign is shaded with black, and has shadow areas that are slightly too dark for gold. By changing the shading color to a burgundy-brown, we instantly get a more convincing gold look. The same technique was also used below to create a gold base for a globe – I chose a nice chocolate-brown shading color and used the standard one light.

A revolved dark yellow shape with a brown shading color produces gold There are many more lighting effects and surface materials you can create, once you get the hang of it. Now that you’re familiar with the main settings, start experimenting with them to see what you can create for yourself. Give it a try!

]]>
http://www.indscoop.com/3d-lighting-and-shading-in-illustrator/feed/ 0 810
Magnifying Glass Tutorial for Adobe Illustrator http://www.indscoop.com/magnifying-glass-tutorial-for-adobe-illustrator/ http://www.indscoop.com/magnifying-glass-tutorial-for-adobe-illustrator/#respond Wed, 06 Nov 2013 09:19:05 +0000 http://www.techinfolabz.com/?p=767 […]]]> In this tutorial we will be learning how to create a Magnifying glass in perspective in Adobe Illustrator. When it comes to creating semi-realistic vector illustrations the most important items are to find the easiest way to create them, make sure to create reliability and to try to keep from creating objects with too many anchor points in order to avoid an obstacle in the printing process.

In this tutorial we wont use some of the amazing Illustrator features within the 3D Effect. Using them would make the creation process much easier for sure, but on the other hand there are a few disadvantages we would like to avoid (creating numerous anchor points as previously mentioned). We will try to create a magnifying glass just with the Pen Tool (P) and a few ellipses. Some details will helps us to improve the illustration.

We will be creating this.

Creating the Head of the Magnifying Glass

Since we are creating a magnifying glass in perspective we will start with the ellipse. Grab the Ellipse Tool (L) and create the ellipse as it is shown in the picture below.

Grab the Selection Tool (V) and rotate this ellipse.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the ellipse and move the copy to the left.

With the Direct Selection Tool (A) select the anchor point on the right side. Hit the Delete key on the keyboard to remove it. Make sure to match end points of the curved path and the red ellipse.

Now we have to close the path. Select the Pen Tool (P) from the Tool Panel to close the path. Send the new shape behind the ellipse (Shift + Ctrl / Cmd + [).

Select the ellipse and under the Object select Path > Offset Path. Set the value for Offset to -5 pt.

Repeat the previous step and offset the smaller ellipse for another -5 pt. Grab the Selection Tool (V) and move the smallest ellipse to the left lower corner, as it shown on the picture below.

Applying a Color Gradients

Now, it is time to apply some nice color gradients. We have to simulate the look of the metal frame and the look of the magnifying glass. On the following pictures you can see the information about color gradients you can use.

As you can see, a nice color contrast has contributed to the semi-realistic look of the metal frame.

To make the illustration more authentic there is one thing we should not forget, the metal part of the framework that can be seen through the glass.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the glass twice and move one of the copies to the left. Select both ellipses and under the Pathfinder Panel hit the Minus Front button.

You should end up with the shape like this.

Apply a linear gradient as it shown on the picture below. The gradient we are using for this part is actually the same gradient we have used for the inner part of the frame. We have adjusted the colors inside the gradient by giving them a nice bluish tone.

Two highlighted edges will improve the illustration. Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the ellipse twice that represents the inner part of the metal frame. Move one of the copies to the left 1 pixel. Select both copies under the Pathfinder Panel hit the Minus Front button. Set the Fill color of the highlight to #FFFDE5.

We will create another highlight for the outer side of the metal frame.

Grab the Ellipse Tool (L) from the Tool Panel and create a small circle. Apply a radial white-transparent gradient.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the circle from the previous step and place it on the right part of the metal frame. It will emphasize the metal look of the frame a little bit.

Group (Ctrl / Cmd + G) all the elements.

Creating the Handle

Grab the Pen Tool (P) from the Tool Panel and create the shape of the handle.

Apply the linear gradient to the handle. Just make sure to create the highlight that will follow the shape of the handle.

Select the Pen Tool (P) from the Tool Panel and create two curved paths as it’s shown on the picture below.

Select the handle and both paths and under the Pathfinder Panel hit the Divide button.

Apply the linear gradient, but make sure to create the same highlight we have created for the handle.

Use the same technique to create one more metal part of the handle.

And our magnifying glass is done. To make the illustration more interesting we will create a nice bit of additional text.

Creating Magnified Text

Let’s try to create a magnification effect. You can do it with any shape you like, but we will do it with text.

Grab the Type Tool (T) from the Tool Panel and type a word (we’ve used Noupe). You can choose any Font you like.

We will have to edit the letters a little bit. To be able to do that we have to transform them into editable shapes. Under the right click menu select Create Outlines.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the letters and Ungroup the copy (Shift + Ctrl / Cmd + G). Remove N and O from the copied word. Change the Fill color of the original letters to green (just to be able to see what we are doing, later we will set the Fill color back to black).

Select all three black letters (u, p and e), scale them up a little bit and move them to the right.

Under the Object select Envelope Distort > Make with Warp.

The Warp Options box will pop up. Set the Style to Fisheye  and the value for Bend to 25%. Hit the OK button.

If you are not quite happy with the result you have achieved, feel free to grab the Direct Selection Tool (A) and to adjust some anchor points. Under the Object select Expand. This way we will turn the letters back into an editable shape.

Now we have to duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the ellipse that represents the glass. Bring it to front (Shift + Ctrl / Cmd + ]) and remove the Stroke and Fill colors. Select the ellipse and U, P, E letters and under the Object select Clipping Mask > Make.

Ungroup (Shift + Ctrl / Cmd + G) the green letters and remove the p and e letters at the end of the word. Set the Fill color for the rest of the letters to black (#000000) and send them back (Shift + Ctrl / Cmd + [).

For the end duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the black shape of the handle, apply a nice linear gradient (#FFFFFF to # BDBDBD) and place it as it shown in the picture below.

And our magnifying glass is done!

Conclusion

This tutorial can be a nice practice for creating objects in perspective. If you are unsure how to put all the elements together, feel free to use a reference image (tracing technique can help a lot in this situation). There is one more thing I would like to encourage you about. Take your time when you are applying color gradients. Instead of using Blending Modes and transparency try to simulate a certain look by using the right combination of colors and gradients (just like we did in this tutorial with the part of the metal frame seen through the glass).

courtesy:  noupe.com

]]>
http://www.indscoop.com/magnifying-glass-tutorial-for-adobe-illustrator/feed/ 0 767
10 top After Effects resources http://www.indscoop.com/10-top-after-effects-resources/ http://www.indscoop.com/10-top-after-effects-resources/#respond Fri, 25 Oct 2013 16:34:03 +0000 http://www.techinfolabz.com/?p=717 […]]]> Want to learn After Effects? Or hone your skills in the compositing software? Then check out these top online resources.

The web is a wonderful thing. It’s full of endless resources and tutorials for people wanting to learning the art of After Effects CS6 (and previous versions). But, sometimes too much choice can be confusing so we’ve picked 10 top sites that will really help you get to grips with the compositing software.

01. Adobe TV

Get advice and training from After Effects experts at Adobe TV

If you want to learn After Effects, who better to learn from than the guys who created the software? Adobe TV offers a number of video training in everything from the basics and getting started to special effects and 3D features. And the tutorials are all taken by experts in the compositing software.

02. 3D World

Take a look at a load of awesome projects created using After Effects on our sister site 3D World

Our sister site 3D World has a wealth of tips and training in After Effects, as well as many awesome examples of work made using the software. Simply use the keyword tool to search through the site’s catalogue of useful posts for inspiration and advice.

03. Creative Cow

Use the ‘Series’ box on the right to help refine your After Effects tutorial search

Creative Cow doesn’t have the most intuitive UI we’ve ever seen but it does have many pages of links to After Effects tutorials. So, if you’re just on the look out to hone your skills in the compositing software, this is a good place to start. If you don’t have the time to trawl through each page, the site does feature a useful ‘Series’ box to help refine your search.

04. Digital Tutors

Access nearly 800 After Effects tutorials with a subscription to Digital Tutors

This giant online training library has a brilliant selection of After Effects tutorials. Digital Tutors has nearly 800 AE videos, covering lessons in everything from getting started to pipeline development. Training is aimed at users of all skill levels, so there’s something for everyone here. The site offers two free basic tutorials in the software but to access the full library a subscription is required.

05. VideoHive

There’s hundreds of pages worth of After Effects tutorials on VideoHive

VideoHive is a library of royalty free motion graphics, footage and After Effects projects. It also offers a huge selection – over 118 pages – of tutorials to choose from and there’s a keyword tool so you can refine your search. You have to pay for each tutorial, ranging anywhere from $8 to about $25. To help you decide if the one you want to access is worth the money, the site has helpfully put a star rating next to each.

06. Video Copilot

Video Copilot was founded and is run by visual effects artist and filmmaker Andrew Kramer

If it’s After Effects training you’re after then Video Copilot is a fantastic place to start. Founded and run by visual effects artist and filmmaker Andrew Kramer, the site features over 130 tutorials, which range from the basics to more complex effects for more seasoned users. Video Copilot also features a dedicated beginners section that has 10 free tutorials with everything you need to get started.

07. Ae tuts+

Learn special effects, motion graphics, filmmaking and more with aetuts+

Part of the Tuts+ network, this website offers a wealth of After Effects training from beginner to advanced. Divided into sections, users can choose to access tutorials in the areas of motion graphics, production, visual effects and workflow. Watching the videos are free but to access the source files you must be a Tuts+ premium member, subscriptions for which can be purchased from $15 per month.

08. Motionworks

At the helm of Motionworks is Australian motion graphics artist John Dickinson

After Effects tutorials, tips and training, motionworks has it all. Run by motion graphics artist John Dickinson, the site features a number of free tutorials for users of all skills, as well as training DVDs available for purchase, starting at $30. In addition to this, and if you really want to fast track your After Effects skills, Dickinson also offers personal coaching, however there are no details on the cost of this service.

09. Lynda

lynda.com was founded by expert in web graphics and design Lynda Weinman and painter and illustrator Bruce Heavin

If you haven’t got to know Lynda Weinman and Bruce Heavin’s extensive tutorial video library then you should. Although not exclusively dealing with After Effects, the Lynda website offers a wealth of training in the compositing software for the beginner to intermediate user. Some of the training is free but to access the majority of it you will need to subscribe to the site, which starts from $25 per month.

10. Sternfx

Sternfx is owned by Eran Stern who is also author of many training and video tutorials for Adobe, Digital Juice and Creative Cow

Sternfx presents an extensive library of quick and helpful tutorials for After Effects users. Using his 15-years experience with the software, Eran Stern’s website features training aimed at users of all skill levels, as well as training DVDs that can be purchased from as little as $10.

]]>
http://www.indscoop.com/10-top-after-effects-resources/feed/ 0 717