James George is a professional web and graphic designer. James is an expert in design, and a professional web designer, with a special interest in Wordpress. Founder of G Squared Studios - A Professional Web Design Studio, James has been a professional designer since 2005.

James's articles

  1. Killer Backgrounds with Illustrator’s SVG Pattern Tool

    Adobe Illustrator is the established go-to tool for vector graphics. You can scale graphics infinitely larger or smaller, without losing image quality.

    That’s why Illustrator is perfect for creating backgrounds. You can create seamless repeating backgrounds easily in Adobe Illustrator with the Pattern Tool. You simply arrange the elements and tell Illustrator how you want them to repeat or tile, which allows you to focus on the overall design, not on the mechanics of execution.

    To get started, open up Adobe Illustrator and go to Object> Pattern> Make. This changes the interface, so that you have a central square on your canvas. You’ll immediate receive a message that the Pattern has been added to the Swatches Panel.

    Illustrator pattern panel

    The image above shows the Pattern Panel that you’ll be using to control the behavior of your pattern. Notice the top menu item is where you will name your pattern.

    Important Note: Before diving into creating patterns with the Pattern Tool, make sure that “Move Tile With Art in unchecked in the center of the Panel. This makes the Pattern Tool difficult to work with.

    The default width and height for the pattern section is 100px x 100px, but you can make it whatever you need. You can also link the width and height so they scale together.

    Before we choose how the pattern will tile, let’s give Illustrator something to tile. Select the Ellipse Tool and hold down the Option/Alt key and the Shift key and create a circle within the square tile.

    Use the Direct Selection tool and select the circle. Hit Command/Ctrl+ C to copy, then hit Command/Ctrl+F to paste it in front, in the exact same place. Hold Down the Alt/Option Key + Shift and scale the top circle down.

    initial circles

    Next, select both circles and hit Command/Ctrl + 8 to create a compound path. Remove any stroke you might have applied and select any color as the fill. I’ll choose a royal blue. Align the circle within the tile vertically and horizontally.

    Type type selection

    Now, we can decide how the pattern will be formed. Notice how the copies are faded. You can choose the opacity and the number of the copies of your vector shapes at the bottom of the Pattern Panel.

    You can choose from different options for how your graphic is tiled. Below, you can see the different options, and how they drastically change the design.

    Grid

    The default grid spaces graphics equally horizontally and vertically.

    Grid

    Brick By Row

    This setting staggers graphics horizontally, like rows of bricks.

  2. 5 Quick Photoshop Fixes for Bad Portrait Photos

    Our visual presentation is of the utmost importance. First impressions are everything, so it is super-important to look our best in every possible situation. We can’t afford to have a bad portrait or bio pic online. On the other hand, we also can’t spend a ton of time retouching our images.

    That’s why it is important to know a few quick and easy ways to retouch your images to make an impact without a lot of effort.

    Starting Bio Pic

    Use The Patch Tool & Healing Brush to Remove Blemishes

    The first thing that you want to do is remove any unsightly blemishes you might see. While if life these are only temporary, your bio pic could be on a site for years, so it’s important to take care of problem areas up front.

    Use the Spot Healing Brush to take care of these areas.

    Highlighted moles

    There are 3 settings with the Spot healing Brush that you’ll want to pay attention to. The first is Proximity Match, which takes the nearest pixel information and tries to replace what you brush over with a blend of the surround pixel information.

    The second is Create Texture, which can be helpful if your subject has especially porous skin. However, with this portrait, it isn’t the case.

    The third option is Content Aware, which would be great if the rest of your photo is uniform, but there are a lot of tight spaces and variations with this image, so the best choice would be Proximity Match.

    Blemishes removed.

    Simply make your way around the subject’s face, clicking on each blemish to blend it away. I removed most of the larger, more prominent blemishes from his face.

    However, I left the smaller, patchier areas. Also, if you look at the example, I highlighted the distinct moles on his face. You’ll want to leave natural features behind. They will stay, but we will fade those back a little later.

    Smooth Skin

    Next, you should smooth the skin. It is important to understand that you should blend the skin enough to smooth it, but not too much so that you lose all skin texture. Surface Blur is a great way to handle this. Hit Command/Ctrl + J to duplicate the layer, and mask out everything except the face.

    Pic blur applied

    The next step is optional, but if you want to do this the smart way, you can avoid headaches in the future. Right click on the layer ad select Convert To Smart Object.

    Next, go to Filter> Blur> Surface Blur. Set the radius to 5px and the Threshold to 15 levels. Lower the opacity of the layer to 65%. This is enough to smooth the skin, while leaving enough detail so that the skin looks natural. Too much smoothing and the skin will look plastic.

  3. Dial-a-Style #3: Nailing the Vintage Look

    In a world of design where modern, minimal and simplification have taken over, one of the best ways to stand out can be to tap into some of the flavors of the past.

    Vintage designs are extremely popular, because they remind people of days gone by, and hint at a golden era that no longer exists.

    Psychology is always important in design, and vintage designs appeal because they can give viewers the sense that the product or service is established and successful.

    [caption id="attachment_79318" align="alignleft" width="246"]Screenshot: Ponysaurus Brewing Co. Ponysaurus Brewing Co. were founded last year,
    yet pull off a feeling of time-honoured
    know-how and quirky tradition.[/caption]

    Interestingly, this can be even more effective for a new brand, as it may be for a business that been around 100 years. Vintage designs can help build trust, evoke wistful nostalgia and get attention.

    The concept of ‘vintage design’ can cover a number of eras, but we’re going to focus on styles mostly from the first half of the 20th century.

    Some designers like to go for the really “old-timey” 20s and 30s design styles, while others aim for a slicker, jetset 50s and 60s look. Each produce their own distinctive looks, and each are equally loved and enjoyed in their own rights.

    Color Palettes

    Early 20th Century Block Color

    [caption id="attachment_79329" align="alignright" width="300"]1940's Primary by itsjustluck Early 20th century block color[/caption]

    The color palettes of these vintage design styles are completely different. The color palettes of the 20s and 30s were primarily pure colors. Colors aren’t muted, and you can expect to see colors in full saturation. Red is red, blue is blue and green is green.

  4. Browser Testing with Modern.IE

    Web Development is a great industry to be involved with. For those who enjoy solving problems and making things, it can be a rewarding career to have.

    As much as I enjoy web development, we all that know sometimes it has it’s issues.

    The perennial problem for developers is creating a consistent website across all browsers. Happily, building a site for modern browsers has become increasingly easier as browsers move ever closer to full web standards support.

    Frameworks such as Bootstrap and Foundation are trying to help with this as well. While we’re not quite there yet, there is still the issue of supporting mobile browsers and older ones. As much as we’d like our sites to look great on every single device, they don’t always do.

    Modern.IE

    That’s where Modern.IE comes in. Instead of having a massive collection of devices on hand to test out your work, Modern.IE emulates many popular browsers and devices in one place.

    You don’t have to worry about hopping from device to device. All you need is the URL of the site that you want to test, and you are all set!

  5. 7 Steps to an Effective Landing Page

    A landing page is an effective way to drive sales for any business. The majority of websites share a similar range of assets — about us pages, contact pages, etc. But a great landing page is something that takes time to produce.

    Landing page designs will vary, depending on the industry that you’re in. However, most effective landing pages have a few key elements in common that make them successful.

    1) Negative Space is Key

    A cluttered landing page will confuse your message. Sure, your landing page can have tons of information on it, but organize it and break it up into manageable chunks.

    2) Page Layout & Placement of Elements

    It is important to have your most high impact visuals above the fold, or where the viewer can see when they arrive on your landing page.

    Have a video, a few important bullet points, and a direct call to action above the fold. You’ll find this on many effective sales and marketing pages.

    Below the fold is a good place to expand on the product or service that you’re offering. Just remember to keep the layout consistent and clean. Like in our previous point, too much clutter can clutter your message, too.

  6. Value Engineering For Designers

    There are several ways to make yourself highly marketable to your clients. You can offer services that no one else provides. You could also hones your skills to become the absolute best in your niche. You could slash prices and undercut the local market. You could also offer great bundles of package deals. While those […]

  7. How to Make Pragmatic, Purposeful Typography Choices

    Psychologists have proven that typography has a significant measurable effect on the influence and interpretation of your written copy. With this in mind, typography could be the most important part of any design, and it should be chosen purposefully and pragmatically — not based on the whims or personal preferences of any designer. You could […]

  8. What Makes a Website Look Dated?

    As designers, we always want to create work that is either on the cutting-edge or “classic” and timeless. It is important to have a design that looks great and is conceived deliberately in a current style. Having an outdated style for your website can leave a negative impression with your visitors, reduce your overall traffic, […]

  9. Envisioning and Finding Your Dream Client

    We all hear horror stories of nightmare clients that tread well outside the boundaries of written agreements, delay or refuse to pay for completed work, or worse. Assertive, unscrupulous, and disagreeable clients can ask the world of us for a price that is a fraction of what the work is worth. We hear of clients […]

  10. 5 Things to Never Say to Clients

    Pitching to a new client can be challenging for a variety of reasons. Designers must walk a fine line that entails winning the client without compromising their own needs and values. The willingness to do whatever it takes to make the potential client happy seems like a great attitude and a noble, prudent approach, but […]