DesignM.agGraphic Design http://designm.ag Articles and Resources for Web Designers Fri, 29 Aug 2014 21:10:42 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.2 Getting Started with Graphics Design for the Web http://designm.ag/graphic-design/getting-started-web-design-graphics/ http://designm.ag/graphic-design/getting-started-web-design-graphics/#comments Mon, 30 Jun 2014 15:19:52 +0000 http://designm.ag/?p=85262

Advertise here with BSA


Graphic design is such an engrossing topic because it requires an enormous amount of time and practice to learn. This is similar with web development, but coding is often seen as more logical and straightforward. Design has structured guidelines, but it is much more of an art than a science. You should learn these basic guidelines and understand why certain graphics or colors work together before starting to breaking those rules.

macbook imac desk designer photo

If you have passion and perseverance then nothing can truly stop you from becoming a great designer. The first step is to recognize how the process works and where your energy needs to be focused. I want to share my thoughts about graphic design for website layouts and offer a few bits of advice for anyone interested in the field.


Advertise here with BSA

]]>

Advertise here with BSA


Graphic design is such an engrossing topic because it requires an enormous amount of time and practice to learn. This is similar with web development, but coding is often seen as more logical and straightforward. Design has structured guidelines, but it is much more of an art than a science. You should learn these basic guidelines and understand why certain graphics or colors work together before starting to breaking those rules.

macbook imac desk designer photo

If you have passion and perseverance then nothing can truly stop you from becoming a great designer. The first step is to recognize how the process works and where your energy needs to be focused. I want to share my thoughts about graphic design for website layouts and offer a few bits of advice for anyone interested in the field.

Practice your Weaknesses

A lot of people hate to hear this advice, myself included, but it’s the absolute truth. Objectively speaking it’s the best and quickest method I’ve found to see rapid improvement. You need to understand what you can already do and what you can’t do. Focusing on a weakness will be awkward at first, but eventually you’ll hit a stride and the task becomes much more comfortable.

If you stay caged in a single process then you never really advance beyond that skillset. So you may know how to use a small segment of Photoshop/Illustrator but you can’t really create any type of graphic for the web. You should try to understand the shape tools and layer effects – and yeah the pen tool is a huge plus. Most designers are not comfortable with the pen tool so that’s a great place to start.

photoshop practice design screenshot

When you’re brand new almost everything could be considered a weakness, so any time spent designing is time spent practicing. I’ll go out on a limb and guess that nobody is paying you to practice so it’s okay to screw up. Once you accept this fact your hours of toil will seem less stressful. There is a final goal to achieve and it’s not perfection. You should work to become more enlightened about any subject that will help you create better graphics.

Keep this in mind when you start each practice session. Any subject that you consider a weakness will stay a weakness unless you can tackle it head-on. Better to learn while you’re still new rather than once you’ve landed a job or started doing freelance work.

Study Great Websites

If you have a lot of weaknesses and don’t know exactly where to start I’d recommended keeping a list of brilliant website graphics. Save bookmarks to anything that catches your eye from a menu bar to a footer or anything in-between. This will give you a nice visual library of design ideas that could be practiced.

Often times you’ll stumble onto a beautiful graphic or effect that you wish to recreate, but have no idea how to do so. Hit Google first with some keywords and see what comes up. You may be surprised at how many similar tutorials can help you recreate the effect. Otherwise I’d recommend the Graphic Design Stack Exchange forum where you can post up detailed questions and typically get some helpful responses.

This graphic design Q&A forum will be more helpful as you learn the basics and keep practicing. The designers on Stack Exchange are quite knowledgeable but prefer to answer more specific questions rather than vague “help me design this” requests.

Retina Displays

Keep in mind that modern web graphics have changed a lot over the past 5 or 10 years. Retina displays were never a thing before Apple created the iPhone 4. Then some Android devices started following with HiDPI resolutions and now even MacBooks are using this display. Retina screens fit double the amount of pixels into the same physical space.

This means your icons and graphics will look the same size, but require more pixels to appear “crisp” on retina screens. So if you’re creating a 50×50 icon it will always be 50×50 pixels on the website. But retina screens need 100×100 pixels to make that same 50×50 icon, otherwise it looks blurry and stretched out.

apple retina display macbook iphone ipad

As you continue practicing get into the habit of designing @2x sizes whenever possible. It’s usually easier to scale down rather than scale up with pixel graphics. But even if you don’t create 2 sets of graphics it might be better to use a double-sized icon fitted into a 50×50 square rather than a smaller icon forced to appear larger.

You can find many blog posts discussing this trend and how you might design for retina screens. It’s obviously possible to design @1x first and scale up if you have the ability to use vector shapes. Scaling down requires elements that use even-numbered dimensions because odd numbers will get split in half on a subpixel. Try both and see what you like best. Just keep in mind that retina is likely here to stay so it’s worth creating both sets of graphics.

SVG Icon Design

Another modern trend worth mentioning is the popularity of SVG icons. These are Scalable Vector Graphics which behave much like a vector in Photoshop or Illustrator. Except now you can embed these into a website and have them respond to the layout size. Pretty neat huh?

Older browsers still do not fully support SVGs and unfortunately not everyone is running an updated browser. But since you can also animate SVGs they bring a lot to the table. It’s not something that you need to learn in order to design website graphics. Just keep in mind it is an option and it’s a fun graphic style to learn whenever you have some extra time.

Starter Tutorials

The quickest way to improve your skillset is to start with a few online tutorials. Designers frequently publish free tutorials which relate to web design, icons, banners, logos, and many similar topics. If you already have access to Adobe Photoshop or Illustrator then you’ve got everything you need.

Although there are hundreds of amazing tutorials out there, I’ve put together this brief collection which is perfect for new designers who want to build graphics for the web. All you need to do is follow along and really try to retain the information. If you keep up with lots of tutorials then you’ll eventually find yourself getting more comfortable designing graphics from scratch.

Address Book Icon

leather texture address book icon photoshop

Banner, Label & Badge Templates

photoshop howto banner label badge design template

Green Web Badge

illustrator graphic tutorial green web badge design

Animated Banner Ad

photoshop animated banner advertisement graphic

Simple Notebook Icon

simple vector notepad icon design tutorial

Gearbox Settings Icon

gear ios settings icon design photoshop tutorial

Dark Web Button

beautiful dark web button glossy tutorial

Manipulating SVG Icons

animate manipulate svg icons css howto

“Almost Flat” Icons

vector icons iconset design tutorial illustrator

Creating Buttons for the Web

tutorial photoshop creating website buttons part1


Advertise here with BSA

]]>
http://designm.ag/graphic-design/getting-started-web-design-graphics/feed/ 0
50 Free CSS-Only Icons for Website Graphics http://designm.ag/graphic-design/50-css-only-icon-graphics/ http://designm.ag/graphic-design/50-css-only-icon-graphics/#comments Thu, 22 May 2014 16:22:11 +0000 http://designm.ag/?p=84587

Advertise here with BSA


Modern CSS trends have blown up so quickly that it can be difficult to keep up with all the new stuff. Online projects which most surprise me involve pure CSS designs for layouts, animations, and icons. There is still plenty of use for icon sprite sheets in the right context. But why not try out modern trends for the users who have upgraded from legacy browsers?

This gallery includes fifty examples of my favorite CSS-based icon designs. Some are animated while others are static interface pieces. These range from general purpose icon sets to character designs created purely within HTML/CSS code. The latter doesn't have much practical use but it's definitely a way of showing off your skillset.

Iconex Flat Icons

css iconex flat icons design open source


Advertise here with BSA

]]>

Advertise here with BSA


Modern CSS trends have blown up so quickly that it can be difficult to keep up with all the new stuff. Online projects which most surprise me involve pure CSS designs for layouts, animations, and icons. There is still plenty of use for icon sprite sheets in the right context. But why not try out modern trends for the users who have upgraded from legacy browsers?

This gallery includes fifty examples of my favorite CSS-based icon designs. Some are animated while others are static interface pieces. These range from general purpose icon sets to character designs created purely within HTML/CSS code. The latter doesn’t have much practical use but it’s definitely a way of showing off your skillset.

Iconex Flat Icons

css iconex flat icons design open source

Pure CSS Cloud

pure css cloud icon design

Map Marker Icon

css animated map marker pure css design

Tech Devices

iphone ipad macbook computer device icons

Animated Compass

animated compass icon design css open source

Full NES Console

nintendo entertainment system css icon open source

Pure CSS MacBook

pure css icon macbook computer laptop

Tweetbot Icon

ios7 tweetbot app icon design css

Computing Devices

computer laptop monitor device icons css

Hanging Picture Frames

hanging picture frame icons css

Animated Trash Icon

css only animated trash can icon

Mail Icon

blue mail envelope icon css only

Hamburger Menu Icon

pure css menu icon hamburger design

Pure CSS Ribbon

pure css ribbon open source code

Google Browser Icons

icons browser google chrome chromium canary

Opera Logo Icon

red opera logo design icon vector css

CSS Microphone

css mic microphone icon open source

Pure-CSS Owl

pure css owl icon design website ui

Animated Clock

animated clock interface ui css open source

Taj Mahal

pure css open source taj mahal icon

Squirrel

squirrel css pure open source icon animal

Pure CSS3 Arrows

pure css3 arrow icons animated open source

Google Logos

flat google icons youtube drive gmail css

Santa Icon

pure css flat santa icon open source

Peeling Sticky

pure css sticky peel effect animation icon

CSS3-Only Animals

css3 animal vector icons open source

Minions in Pure CSS

open source css minions icons

RSS Feed Icon

pure css icon design rss feed icon

Credit Card

css open source credit card icon

Flat Camera

flat camera icon css open source

CSS3 Calendar

css3 calendar open source icon code

Burger App Icon

burger app icon flat css open source

Currency Icon

currency icon pure css open source

Flat Gift Icon

flat gift icon open source freebie

WordPress Icon

open source wordpress css icon responsive

Passcode Locks

passcode icon animated effect css3

Stewie Griffin

stewie griffin icon pure css

Eric Cartman

eric cartman open source css icon

Pure CSS Folders

pure css folders open source code icon

Google Voice Search

google voice search icon design animated

Envelope Transition

envelope letter css icon transition effect

iOS7 Icons

ios7 icons css pure open source

iOS6 Camera Icon

ios6 camera icon open source css code

Animated Printer

animated printer icon pure css open source

CSS3 Preloader

css3 preloader open source icon animated

Color Picker

pure animated css color picker icon

Checklist Icon

pure css open source checklist icon

CSS Smileys

smiley open source icon css code

Apple Mice

icons apple computer mice css only code

CSS Circle Logo

pure blue css circle logo open source


Advertise here with BSA

]]>
http://designm.ag/graphic-design/50-css-only-icon-graphics/feed/ 0
Inky Deals Massive Design Library & 630 Premium Vector Illustrations worth $8,228 – Just $59 (sponsored) http://designm.ag/resources/inky-deals-massive-design-library-630-premium-vector-illustrations-worth-8228-just-59/ http://designm.ag/resources/inky-deals-massive-design-library-630-premium-vector-illustrations-worth-8228-just-59/#comments Thu, 27 Feb 2014 05:54:47 +0000 http://designm.ag/?p=83280

Advertise here with BSA


About Inky Deals

Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner looking to improve yourself and your work. They’re the only ones who offer a 200% money back guarantee on every product. This means that if you’re not happy with it, you get your money back and you also get to keep the product.

Testimonials

testimonials

Advertise here with BSA

]]>

Advertise here with BSA


About Inky Deals

Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner looking to improve yourself and your work. They’re the only ones who offer a 200% money back guarantee on every product. This means that if you’re not happy with it, you get your money back and you also get to keep the product.

Testimonials

testimonials

DesignTNT Massive Library & 630 Premium Vector Illustrations worth $8,228 – Just $59

Inky Deals has recently launched this premium bundle packed with thousands of resources valued at $8,228, which you can now get at the small price of $59. It’s the perfect deal for both graphic and web designers looking to save precious hours (and thousands of dollars), but without sacrificing the quality of their works.

preview-600x408

You will get:

- 630 Vector Illustrations worth $2,520

- 233 Vector Sets worth $2,290

- 101 Web & Print Resources Packs worth $1,070

- 109 Photoshop & Illustrator Addons worth $1,036

- 69 High-Resolution Texture Packs worth $729

- 67 Brushes Sets worth $486

- 10 Premium Tutorials worth $97

30% Off All Deals

spring-madness-bara

Check out the original deal page of the DesignTNT Massive Library & 630 Premium Vector Illustrations worth $8,228 – Just $59 and take advantage of their latest promotion: a discount coupon which takes an extra 30% off all deals. Use this coupon code: SPRINGMADNESS during checkout until February 28th!


Advertise here with BSA

]]>
http://designm.ag/resources/inky-deals-massive-design-library-630-premium-vector-illustrations-worth-8228-just-59/feed/ 0
40 Brilliant Examples of Digital CG Concept Artwork http://designm.ag/graphic-design/40-examples-of-concept-artwork/ http://designm.ag/graphic-design/40-examples-of-concept-artwork/#comments Mon, 17 Feb 2014 03:20:38 +0000 http://designm.ag/?p=83047

Advertise here with BSA


Concept artwork is typically related to video game design. But it can also be very useful in other forms of media. There are many Hollywood movies, TV shows, video advertisements, and other projects which often hire concept artists. CG is typically thought of as 2D art while CGI is usually computer generated 3D effects.

This gallery focuses around 40 examples of CG concept artwork. Most of this artwork was created by hand in software like Adobe Photoshop or Illustrator. The purpose is to create vibrant characters, worlds, items, and landscapes which can be depicted within the project. If you love concept artwork or might just be curious to see what it is, take a glimpse over these examples.

Sire Potato

sire knight potato cg artwork photoshop


Advertise here with BSA

]]>

Advertise here with BSA


Concept artwork is typically related to video game design. But it can also be very useful in other forms of media. There are many Hollywood movies, TV shows, video advertisements, and other projects which often hire concept artists. CG is typically thought of as 2D art while CGI is usually computer generated 3D effects.

This gallery focuses around 40 examples of CG concept artwork. Most of this artwork was created by hand in software like Adobe Photoshop or Illustrator. The purpose is to create vibrant characters, worlds, items, and landscapes which can be depicted within the project. If you love concept artwork or might just be curious to see what it is, take a glimpse over these examples.

Sire Potato

sire knight potato cg artwork photoshop

Animal Hideout

2d cg animation animal criminal hideout

Awe for the Guilds

guilds lights fantasty photoshop artwork

White Demon

white demon orc photoshop illustration

Wooden Submarine

wooden submarine underwater illustration cg

White Birds

white birds woman warrior battle scene

The Gods

the gods battle sequence photoshop 2d artwork

Dark Rider

dark horse rider cg illustration fantasy

Team Fight vs Baron

team fight battle baron water monster

Countryside Castle

countryside castle scene landscape illustration

Grit City

grit city landscape portrait illustration

Jinshan Temple

jinshan temple photoshop illustration landscape

Oriental Paradise

oriental paradise design artwork inspiration

The Settlement

photoshop illustration camp settlement scene

Ice World

ice world scene illustration design concept

One City

city buildings sunset artwork design

Sunset

sunset illustration artwork landscape

Wire Central

lines wires telephone poles town illustration

Temple

jungle temple illustration green artwork landscape

Chinese Village

chinese village illustration design concept artwork

Black Mammoth Forge

black mammoth forge illustration artwork

A Simple Town

simple country town artwork illustration

The Hill

green tree hill flat scenery 2d illustration

Forest of Life

adobe photoshop artwork cg forest of life

The Witch

photoshop fantasy landscape artwork witch town

Parallel Industrial

industrial sci fi city landscape photosho

Knight

dark knight armor battle concept artwork

Skeleton Wizard

skeleton wizard concept artwork design

Monkey

fire monkey illustration artwork concepts

Necromanceress

necromanceress fantasy digital artwork

Big Bug

dark digital landscape big bug inspiring

Treehouse

2d illustration architecture scenery woods treehouse

The Twisted Tree

photoshop illustration twisted tree forest

Haunted House

photoshop illustration artwork concept

Islands

water islands concept artwork landscape

Skycity

floating sky city illustration concept artwork

Frozen Bay

frozen bay artwork concept artwork ice

Abandoned Mine

abandoned mine artwork concept video game

Street Night

dark nighttime streets lights buildings

Walk through the Rubble

dragon little girl walking in rubble


Advertise here with BSA

]]>
http://designm.ag/graphic-design/40-examples-of-concept-artwork/feed/ 0