Sign up for exclusive design tips & tutorials!


Tagged with "icons - Design Tips & Tutorials"

How to Use Adobe Fireworks for Graphic Design?

Oct 11, 2012     No Comments    Posted under: Design Tutorials, Graphic Design, Website Design

Different types of graphics are designed for print and electronic media using Adobe Fireworks software. CS6 is the latest edition of Adobe Fireworks with top-rated features like pages panel, path panel, PDF export, align panel upgraded, guide measure, measurement auto shapes, 9-slice scaling tool etc… which help out in making websites and vector graphics with great ease.

Before starting the graphic designing tutorial, it is necessary to have some basic idea about how to use Adobe Fireworks. In case you are a beginner, you can still learn the design work using Adobe software.

Creating Curves

Every graphic designer should know “the making of curves”, as it is one of the main graphic design skill that can come into play any time.

While making a curve, the first step is to create a stretched rectangle. After making a rectangle, select one among the four points of the rectangle by using the sub-selection tool. While using this tool, Adobe Fireworks will warn that the object will be ungrouped; you should accept it and move ahead.

Creating Curves with Adobe Fireworks

Second step is to change the shape of rectangle by using pen tool. Using this tool, make a point on the lowest line of the rectangle (preferably at the center) and click drag. You will notice curve handles of the point appearing. Release click after the curve handles appear.

The third and final step is adjusting the curves… for this, you have to click at the point you had created in the second step and correct or fine-tune shape of the curve by pressing and dragging the curve handles.

Drop Shadow

This is a graphic effect in the Effects Panel of the Windows Properties. For applying drop shadow, you need to select the graphic and “+” option under Effects tab. When you are there, click at Drop Shadow for the effect to appear. You can change the shadow properties to make the effect look soft or crisp. For a soft shadow effect, change the properties, by changing the values of distance to 2px and softness to 5. For making it crisp, you can input the value of distance as 3px and softness as 4.

Feathering of Images

If you have an imported image where you do not want a certain section to be seen, or only parts of the picture to be displayed, then use the Image Extraction techniques available in Adobe Fireworks. One of the most popular features is feathering which will get rid of the sharp finish to generate a revised image by providing a fading in pixel radius.

Paste Inside

Any graphic can be placed in a vector shape by using the “paste inside” feature of Adobe Fireworks. For this, you need to place the graphic over the vector shape while selecting and chopping the graphic only.

Subsequently, select the vector shape and paste that particular graphic inside with Ctrl+Shift+ V buttons.  It is always advised to give a stroke and shadow to such images for making the entire graphic look better.

Adobe Fireworks CS6

Jay

Jay

I currently hold editor-level position with DesigningTips.com and Founder as well. With a group of online & offline companies under the Soofi Group in my kitty, writing for the design genre was an interesting support to DesigningTips.com. In my opinion, everyone has their taste for design, plus the scope of writing is wide and thus the contribution I make here through words would encourage me to explore this section aptly.

More PostsWebsite






Related Design Articles:

Top 10 Amazing Tattoo Ideas for Men

Oct 1, 2012     2 Comments    Posted under: Accessory Design, Design Tutorials

Tattoos among men are quite a rage these days. Different ideas are work of creative art, an insight into the personality but amazing at the same time.

There are tons of options available on the internet and in the offline world with tattoo designers for men, which you can ink on your body to try and amaze your loved ones. Pick something you like or something that matches your persona and let the artist do the rest of the work.

It could be just anything, for example; tribal drawing, sacred verses, animal sketch, superhero icons, cartoon characters, or anything else for that matter. Trust us; you should be able to tailor tattoo design as per your chuck.

Here are the top 10 tattoo designs listed below with pictures:

My Back Is A Canvas

Tribal Cross Design

Slave to The Needle

Sacred Verse Back

European Buck Mount

Japanese Style Warrior

Tiger Arm Tattoo

Expressive Faces Back

Pensacola Beach Tattoo

Wings Of The Warrior Poet

Jay

Jay

I currently hold editor-level position with DesigningTips.com and Founder as well. With a group of online & offline companies under the Soofi Group in my kitty, writing for the design genre was an interesting support to DesigningTips.com. In my opinion, everyone has their taste for design, plus the scope of writing is wide and thus the contribution I make here through words would encourage me to explore this section aptly.

More PostsWebsite

Related Design Articles:

Download Free Vector Social Media Icons

Jul 20, 2012     No Comments    Posted under: Design Tutorials, Graphic Design

The free set of 80 icons includes some of the most visited and popular social media sites on the web. They are made available in 16px and 32px vector format which can be scaled to any desired size that would fit your website layout or graphic design print materials.

Contents of the zip package: PNG format is in 16px, 24px, 32px and a vector EPS file.

vector-social-media-icons-1

Some most common free icons: Delicious, Flickr, Twitter, Retweet Button, Facebook, MySpace, StumbleUpon, Digg, Slash Dot, Mixx, Skype, Technorati, Reddit, FriendFeed, YouTube, LinkedIn, Newsvine, SlideShare, Google, Google Talk, Yahoo, Yahoo Buzz, Netvibes, AOL, Microsoft, MSN, Apple, MobileMe, App Store, Amazon, Last.fm, Mister Wong, Qik, Vimeo, Viddler, Virb, Tumblr, WordPress, Blogger, Posterous, Behance Network, Design Float, Deviant Art, Design Bump, Friendster, Bebo, Squidoo, Share This, RSS, and Email.

vector-social-media-icons-2

More vector icons for you: Google Buzz, Picasa, Bing, Meetup, Ebay, Feedburner, WordPress (blue version), Drupal, Gowalla, ICQ, Metacafe, Yelp, Xing, PayPal, Heart, Star, Podcast, and various color buttons (create your own).

vector-social-media-icons-3

And here are some more free icons: IconDock, Foursquare, Coroflot, Ember App, Hyves, and Identi.

vector-social-media-icons-4

More icons included: Twitter bird, Dribbble, Github, AddThis, Dopplr, Forrst, Scribd, Photobucket, Daytum, App Store, iTune, W3, Blip, Soundcloud, Smugmug, Wikepedia, Spotify, gdgt, and Gowalla.

vector-social-media-icons-5

More vector icons added: Instagram, Pinterest, Grooveshark, 500px, Stackoverflow, iMessage, Foodspotting, About.me, Etsy, Quora, and Google Plus.

social-media-mono-icons-black

And finally, here are some social media mono icons in black.

Download free icons now from IconDock.com –  Vector Social Media Icons

Icons License Info – Please feel free to use them for whatever purposes (commercial or personal). If you use these icons, an optional link to www.icondock.com would be cherished. Please note that the company logos displayed in the icons are exclusive copyright of their respective owners.

Jay

Jay

I currently hold editor-level position with DesigningTips.com and Founder as well. With a group of online & offline companies under the Soofi Group in my kitty, writing for the design genre was an interesting support to DesigningTips.com. In my opinion, everyone has their taste for design, plus the scope of writing is wide and thus the contribution I make here through words would encourage me to explore this section aptly.

More PostsWebsite

Related Design Articles:

Download Free Google Plus Icons

Jul 20, 2012     No Comments    Posted under: Design Tutorials, Graphic Design

Free Google Plus Icons

We always get inquiries from the graphic designer community on where to find and download free icons of Google Plus. We have done little bit of research and found a set of icons in the following two formats: EPS & PNG in 16px & 32px file size.

We believe these social icons will be a good help in enhancing your web presence and design styles.

Download these free icons now from IconDock.com –  Google-Plus-Icons

Jay

Jay

I currently hold editor-level position with DesigningTips.com and Founder as well. With a group of online & offline companies under the Soofi Group in my kitty, writing for the design genre was an interesting support to DesigningTips.com. In my opinion, everyone has their taste for design, plus the scope of writing is wide and thus the contribution I make here through words would encourage me to explore this section aptly.

More PostsWebsite

Related Design Articles:

Free PSD & PNG Office Icons

Jul 2, 2012     1 Comment     Posted under: Design Tutorials, Graphic Design

Free PSD & PNG Office Icons

Here is a collection of 10 free PSD & PNG office icons which can be used by graphic designers for their web projects, desktop and mobile.

These icons are appropriate for business and corporate projects as they are absolutely free for commercial use. The icon collection includes: case, calendar, manager, envelope, clock, office folder, office chair, scissors, locker, mobile phone.

There are PNG files with transparent background and you can use it straight away on the internet. The PNG icon files are in the following sizes: 48×48 px., 64×64 px., 128×128 px.

You can download office icons using the link: download

Jay

Jay

I currently hold editor-level position with DesigningTips.com and Founder as well. With a group of online & offline companies under the Soofi Group in my kitty, writing for the design genre was an interesting support to DesigningTips.com. In my opinion, everyone has their taste for design, plus the scope of writing is wide and thus the contribution I make here through words would encourage me to explore this section aptly.

More PostsWebsite

Related Design Articles:

Top 10 Free Icon Fonts for Web Design

May 16, 2012     4 Comments    Posted under: Design Tutorials, Website Design

Every now and then we try to publish some of the top free resources available all over the internet related to your web design requirements. We make sure that you are able to garner ample benefits from our publications.

Today we were able to gather top ten awe-inspiring free fonts along with icon sets that will tip you in creating out of the box design. We know that designers have to pay heaps for icon fonts; however you should be able to snatch all of these listed below without spending any moolah 🙂

We are sure that they can help pep up the look and feel of your website. Here are the top 10 icon fonts available for free:

  1. IcoMoon
    IcoMoon Free Icon Fonts
  2. Heydings
    Heydings Free Icon Fonts
  3. Iconic Icon Set
    Iconic Icon Set Free Icon Fonts
  4. Signify Lite
    Signify Lite free icon fonts
  5. Entypo
    Entypo Free Icon Fonts
  6. Social Media Icons
    Social Media Icons Free Icon Fonts
  7. Social Logos Font
    Social Logos Font Free Icon Fonts
  8. Web Symbols Typeface
    Web Symbols Typeface Free Icon Fonts
  9. Heydings Common
    Heydings Common Free Icon Fonts
  10. Modern Pictograms
    Modern Pictograms Free Icon Fonts
Jay

Jay

I currently hold editor-level position with DesigningTips.com and Founder as well. With a group of online & offline companies under the Soofi Group in my kitty, writing for the design genre was an interesting support to DesigningTips.com. In my opinion, everyone has their taste for design, plus the scope of writing is wide and thus the contribution I make here through words would encourage me to explore this section aptly.

More PostsWebsite

Related Design Articles:

5 Tips for Graphic Designers to Sketch Wonderful Icons

Jan 18, 2012     No Comments    Posted under: Design Tutorials, Graphic Design

Summary: An effective guide on the process of wonderful icon designing.

Icons help us in navigating and emphasizing on some of the key aspects of web content as they are more of general separators and indicators. Icons work similarly like road signage’s and you would know that very well if you have ever been on the road, driving.

Icons help you in guiding through web application or a website to locate necessary information and resources in a timely manner.

Web icons should be clear in first few seconds of scanning, and express the apparent meaning of the web content. They do not distract from general web content while making navigational process simpler outlining important features of the website.

question-mark
Image Courtesy: Charles Chan

The main values of icons usefulness are general project draft, steady lightning, outlook, considering the market, symbol, etc. Here are some of the important design tips for creative icon designing.

  1. Consider clear symbol – Make it a point to portray the exact web icon for better presentation of web content.
  2. Widen your potential market – You should be able to display supple and precise images as icons in place of comprehensive clip arts. Icons published on the page should be identifiable and fit the exact business areas. Simple and recognizable icons should go well with your web projects.
  3. Use remarkable color blend – You should consider testing different colors and shades. Attention grabbing colors with the unusual images will fetch your visitor’s interest with the desire to click on those icons. Design and create outstanding icons. Keep in mind that flash colors are annoying for the plain interface.
  4. Always think about prospective clients – Think about using common images that are standard and easily acknowledged by website visitors from any part of the world. You web icons are considered universal regardless of traditions, religions, boundaries and groups.
  5. Follow a streamlined process – Work on a basic concept and draw a sketch with the help of effective colors and forms. Seek help of a neighbor or a friend in order to find out if you were successful in designing a great web icon concept by grasping their attention within initial 1 or 2 seconds.

You can add some wonderful icons to your website and instigate visitors by being creative and artistic, in our opinion.

Jay

Jay

I currently hold editor-level position with DesigningTips.com and Founder as well. With a group of online & offline companies under the Soofi Group in my kitty, writing for the design genre was an interesting support to DesigningTips.com. In my opinion, everyone has their taste for design, plus the scope of writing is wide and thus the contribution I make here through words would encourage me to explore this section aptly.

More PostsWebsite

Related Design Articles:

Free Icon Pack – SleekSocial

Sep 23, 2011     No Comments    Posted under: Graphic Design, Website Design

You can use the SleekSocial free icon pack which includes 10 social media icons, in any of your design projects online and any other commercial or personal work. Inspired by the Adobe Creative Suite logos, each icon has been magnificently created in 6 different colors like red, orange, yellow, green, blue, and purple.

Use your creativity and similar icon color groups to match your graphic design projects primary color and have fun!

The free icon pack is designed and made freely available by Andrew S. Roberts of asroberts.net. Please visit his site for more of his design related work.

Icon File Details

File format: PNG

Icon Size: 420×420px

Licensing: Royalty-free, can be used for commercial and personal work

Attribution requirement: None (but appreciated)

Limitation of use: Do not redistribute files

Number of items: 10

Number of files: 60

SleekSocial Free Icon Pack Preview

Download: Free Icon Pack – SleekSocial (Zip File, 0.68 MB)

Jay

Jay

I currently hold editor-level position with DesigningTips.com and Founder as well. With a group of online & offline companies under the Soofi Group in my kitty, writing for the design genre was an interesting support to DesigningTips.com. In my opinion, everyone has their taste for design, plus the scope of writing is wide and thus the contribution I make here through words would encourage me to explore this section aptly.

More PostsWebsite

Related Design Articles:

Top 10 Icon Design Photoshop Tutorials – Part 2

Sep 16, 2011     No Comments    Posted under: Design Tutorials, Graphic Design, Website Design

We hope you enjoyed reading our first part take on List of Top 10 Icon Design Photoshop Tutorials – Part 1 and continuing with the series, here we have another list you can use to learn icon designing using Adobe Photoshop. We hope you will enjoy the second part of top 10 design tutorials listed below:

Top 10 Icon Design Photoshop Tutorials – Part 2

This is a second part of Icon Design Photoshop Tutorials series and there are still 2 more parts remaining to follow. Stay tuned for some more icon design tutorials.

Jay

Jay

I currently hold editor-level position with DesigningTips.com and Founder as well. With a group of online & offline companies under the Soofi Group in my kitty, writing for the design genre was an interesting support to DesigningTips.com. In my opinion, everyone has their taste for design, plus the scope of writing is wide and thus the contribution I make here through words would encourage me to explore this section aptly.

More PostsWebsite

Related Design Articles:

List of Top 10 Icon Design Photoshop Tutorials: Part 1

Sep 14, 2011     2 Comments    Posted under: Design Tutorials, Graphic Design, Website Design

Top 10 Icon Design Photoshop TutorialsWell you know you can always count on world wide web for quality icon designs for free, however most of the icons and designs have limitations such as; not the size or color you want, copyright restrictions for commercial projects and transparency or format constraint.

Due to all the above-mentioned limitations, you should consider designing your own icons that will help you brush up Photoshop skills and gain important knowledge. Trust us; making designs on your own will provide immense satisfaction.

You can learn icon designing using Adobe Photoshop with the help of top 10 design tutorials listed below:

This is a first part of Icon Design Photoshop Tutorials series and there are still 3 more parts to be published. Stay tuned for some more icon design tutorials.

Jay

Jay

I currently hold editor-level position with DesigningTips.com and Founder as well. With a group of online & offline companies under the Soofi Group in my kitty, writing for the design genre was an interesting support to DesigningTips.com. In my opinion, everyone has their taste for design, plus the scope of writing is wide and thus the contribution I make here through words would encourage me to explore this section aptly.

More PostsWebsite

Related Design Articles:

Welcome to DesigningTips.com

The leading source for design industry (web, graphics, animation, interior and exterior, accessory, fashion) to share latest news, tips & tutorials along with creative ideas & inspirational resources. Read more here..

If you want to write for us, please check our contribute page.