Category Archives: Graphic Design

Graphic design for the web

Free Vector Icons for Interface & Web Designs

God bless all those web & graphics designers who love to offer their works free for download. This act is rewarding, ‘cause it gives people an opportunity to create something stunning. On the other hand, the artist receives positive feedback, attention of the audience and appreciation of his/her works. Let’s express gratitude to all of these generous artists and see what they’ve prepared for us this time. It’s a bunch of recently released free vector icons that will provide a lot of benefit to web designers and developers. All those who are struggling with a design interface are welcome to find the desired goodies in this blogpost.

Simplicity as a Rule

Here you’ll see only trendy items that will perfectly suit to your cutting-edge designs. Today, when the web has chosen minimalism as the main design direction, all trendy designs are marked with simplicity, go with subtle adornments and a sharpened focus on functionality. The same clean approach should be applied to each minor part of design, especially icons that are a vital part of UI. As you have noticed, most icons have become much flatter and simpler these days. The very simple and effective examples you’ll find below. Continue reading

24 Free Fonts for Your Fantasy – Style Designs

Dear readers, we would like to ask you an odd question. Actually, it doesn’t need a reply, just some mind work. Have you ever missed the time of fairy, fantastic, incredible designs? We mean the designs where you could show all your skills, experience and fertile imagination. Of course the residues of this powerful magic empire still can be found in colorful games for different consoles.

With today’s tendency towards flat, clean, minimalist web, every day there remains less and less space for our miraculous world of gold-digging dwarfs, lovely elves, majestic unicorns, fearless knights, disgusting orcs, clumsy trolls, wicked witches, gorgeous princesses, wise kings, sanguine hobbits, dignified ents, balky centaurs, vicious werewolves and , of course, huge, frightful, fire-spitting dragons. Just agree that this magic world was so glorious that we wanted to stay there forever. Now every kidult would confess that he/she is willing to visit those fairy landscapes at least once again. Please, don’t worry those countries and forests inhibited by fabulous creatures won’t disappear from virtual reality as long as we remember them. Right now, you see the evidence of their existence below this text. Of course we mean the dragon belching out the flame from its fanged mouth. Isn’t it prodigious? Continue reading

A favicon for the mobile era

You know the favicon, this small icon displayed in the tabs of the web browser. They look like minor elements but someday Google updates its own favicon and everyones loses their minds. It is common practice to generate a favicon along with any new web site. The procedure is familiar to all web designers: get a master picture, usually the web site’s logo. Give it to a favicon generator to get a favicon.ico file. Declare this file in all HTML pages of the site. Task completed!

Or not. Continue reading

10 Web Design Trends you can Expect to see in 2013

Web Design Trends for 2013

This article aims at discussing 10 web designing trends that are going to rule the market in the year 2013.

Browsing through apps rather than mobile browsing

With mobile devices being stuffed by internet applications, it is more than likely that internet browsing especially for the social Medias like Twitter, Face book, Google+ and Google will be done by these apps rather than the mobile device itself.

User Experience Design or UX Continue reading

Our new plugin makes CSS3 in IE (and any other browser) easy!

What is this?

Anyone who has tried to add CSS3 to their site knows how difficult and time consuming it is to figure out the correct code for the correct browsers. Also, how do I make it work with IE? Wonder no more! With the Automated CSS3 Generator Plugin all you need to do is enter the values for the CSS3 you need and it does the rest. It also only outputs the CSS for the browser you are using so you won’t need 4 lines of CSS to do a simple rounded corner anymore. Continue reading

Pixel Perfect Web Design

Have you ever noticed that Photoshop will anti-alias the edge of a rectangle? This is because the edge of the rectangle happens to fall in the middle of a pixel. If you follow these few simple rules when designing websites in Photoshop, you can ensure that the edges of your rectangles will fall exactly on the edge of a pixel, making the shape super crisp and sharp.

Screen shot 2010-07-28 at 5.06.54 PM

Continue reading

Virtuemart Pathway – Why is it not working?

After installing Virtuemart, a highly integrated shopping cart for Joomla!, I realized that there was a small issue. The issue dealt with the way Virtuemart and Joomla! displayed the pathway of the cart. The product displayed a double pathway, and most of the links were not working. When you were browsing a category you couldn’t go back to the main store because the link was not linkable. This was very annoying to me. After hours of trying to figure out what was happening and going through code pieces, I finally put together bunch of various hacks. This is what ended up working for me. I successfully tested it on all versions of Joomla!, but only with Virtuemart 1.0.5.

Continue reading

What resolution do I use?

After being in the graphic design business for over 12 years I have a tendency to take things for granted and forget the struggles of my past. One question that comes up a lot is what resolution to use for different media types. Here is a quick run-down of what I currently know:

  • Web: 72dpi (RGB)
    • Web: If you develop for 640√ó480 then make your page 600√ó300.
    • Web: If you develop for 800√ó600 then make your page 760√ó420.
    • Web: If you develop for 832√ó624 then make your page 795√ó470.
    • Web: If you develop for 1024√ó768 then make your page 955√ó600.
  • Print: varies
    • Typical Poster: 150dpi (Typically RGB: 85/100 lpi)
    • Newspaper: 150dpi to 200dpi (Greyscale or CMYK: 85/100 lpi)
    • Press: 225dpi to 300dpi (CMYK: 133/150 lpi) is the ‘norm‚’ but double check with your printer before starting the job.
    • Home Printers: (Typically Greyscale or RGB) This can be a little more difficult to figure out, but once you know the math it’s easy. Just divide the total number of inks your printer produces by the dpi stated on the printer. Example: An Epson printer may boast that it can produce a 1440 dpi image, but you have to divide that by the amount of inks it uses, which is probably 6. That leaves you with 240. This is the dpi you should use on your image for maximum quality. Note: You may get a better image with a higher dpi with some printers.

    If you are scanning for a particular job and don’t know how to correctly scan the images, use this page as a reference: http://www.scantips.com/basics03.html. It does a better job explaining than I can. If it is for the web, just use 72dpi, unless there is a possibility it will be used for print later as well.

    Make your photos SNAP!

    One of the most useful tricks I have learned is how to make your photos snap in Photoshop. I learned this in the era of the first digital cameras (the ones where your pictures looked flat no matter how great your camera was). Since most people aren’t professional photographers, their photos lack the contrast and saturation needed to make it look great. This quick trick will help fix this problem in most cases.

    Note: This works better on RGB images, but will work in CMYK.

    1. Go to Layer > New Adjustment Layer > Curves
    2. In the New Layer pop-up select Mode: Soft Light. Press OK.
    3. On the curve select the left point (lower left). Make the values Input:0 and Output:62
    4. Now select the right point (upper right). Make the values Input:255 and Output:193
    5. That may be ok, but if it still isn’t quite what you want, you can add a point to the middle and move it up or down. This will lighten or darken your photo in a much more realistic way.

    Best of luck!