Create a Mother Earth Photo Manipulation – Psd Premium Tutorial


In this Psd Premium tutorial, author Mark Mayers will use stock images to create a Mother Earth inspired photo manipulation. Attention to detail and observing how light reacts in the real-world are the key factors when combing multiple photographs – all of which have different degrees of light, shadow and color. We’ll make extensive use of adjustment layers and some advanced masking techniques to pull off the effect. This tutorial is available exclusively to Premium Members. If you are looking to take your photo manipulation and composition skills to the next level then Log in or Join Now to get started!


About the Author

Author Mark Mayers is a talented designer and illustrator from the UK. He has worked as a designer and creative director for several design/advertising agencies and specializes in print, branding, packaging, and exhibition graphics. Mark began his career when the tools of the trade were markers, layout pads, and most importantly, the ability to draw, but he embraced the digital revolution in the early 90′s and swapped his drawing board for a Mac. Today, Mark freelances from his studio in Cornwall for such clients as American Express, BMW, Future Publishing, IDG Communications and Imagine Publishing.


Professional and Detailed Instructions Inside

Premium members can Log in and Download! Otherwise, Join Now! Below are some sample images from this tutorial.


Final Image


Psd Premium Membership

As you know, we run a premium membership system here that costs $9 a month (or $22 for 3 months!) which gives members access to the Source files for tutorials as well as periodic extra tutorials, like this one! You’ll also get access to Net Premium and Vector Premium, too. If you’re a Premium member, you can Log in and Download the Tutorial. If you’re not a member, you can of course Join Today!

27 Premium Resource Packs Added in March, Plus a Free Website Template for Our Blog Readers

During the month of March we released 27 new resource packs at Vandelay Premier! Members get unlimited access to all of the resources on the site, or resource packs can be purchased individually.

In addition to the 27 new packs, we also have a free website template to giveaway in this post courtesy of Snobby Slice. Our friends at Snobby Slice approached us about giving away a template to our readers and they donated their coding services to make it happen.

If you’d like to stay up-to-date with new resources as they are released, you can subscribe to the Vandelay Premier RSS feed, or like us on Facebook.

Free Resources:

Concrete Textures – Part III

This is a set of 6 high-res textures that were given away for free to our blog readers. If you haven’t already downloaded them you can visit the page at Vandelay Premier to get them for free.

Concrete Textures - Part III

Free Website Template

This is the HTML/CSS template that has been coded by Snobby Slice. It includes a homepage (click on the image below to see in full-size) and a secondary page. The download also includes the iPad PSD file so you can easily customize it to meet your own needs. The PSD files for the homepage and the secondary page are included as well. If you need PSD to HTML or PSD to WordPress services, check out Snobby Slice.

Download the template zip file (11.5 MB)

Fee Website Template

Icons:

Finance Icon Set
Non-member price: $6

Finance Icon Set

Photography Icon Set
Non-member price: $6

Photography Icon Set

Minimal Web Icons – Volume I
Non-member price: $6

Minimal Web Icons - Volume I

Design Elements:

Pixel Patterns – Part II
Non-member price: $4

Pixel Patterns - Part II

Metal Mesh Patterns
Non-member price: $4

Metal Mesh Patterns

Basic Arrows
Non-member price: $4

Basic Arrows

Vectors:

Hand-Drawn Design Elements
Non-member price: $5

Hand-Drawn Design Elements

Grunge Vectors – Part II
Non-member price: $4

Grunge Vectors - Part II

Textures:

Found Paper Textures
Non-member price: $4

Found Paper Textures

Peeling Paint Textures – Part IV
Non-member price: $4

Peeling Paint Textures - Part IV

Painted Asphalt Textures – Part II
Non-member price: $4

Painted Asphalt Textures - Part II

Cardboard Textures – Part II
Non-member price: $4

Cardboard Textures - Part II

Sand Textures – Part II
Non-member price: $4

Sand Textures - Part II

Black and White Grunge Textures
Non-member price: $4

Black and White Grunge Textures

Stained Notebook Paper Textures
Non-member price: $4

Stained Notebook Paper Textures

Rust Textures – Part IV
Non-member price: $4

Rust Textures - Part IV

Grunge Bricks Textures – Part III
Non-member price: $4

Grunge Bricks Textures - Part III

Photoshop Brushes:

Ink Scribbles Photoshop Brushes
Non-member price: $5

Inks Scribbles Photoshop Brushes

Templates:

Simple Photography Website Template
Non-member price: $10

Simple Photography Website Template

Vandelay Corporate Website Template
Non-member price: $10

Vandelay Corporate Website Template

Stock Photos:

Farmlands Stock Photos Set
Non-member price: $6

Farmlands Stock Photos Set

Career Resources:

Stylish Identity Set
Non-member price: $6

Stylish Identity Set

Watercolor Business Card Template
Non-member price: $3

Watercolor Business Card Template

Grunge Business Card Template
Non-member price: $3

Grunge Business Card Template

Blue Business Card Template
Non-member price: $3

Blue Business Card Template

Modern Business Card Template
Non-member price: $3

Modern Business Card Template

Discounts for Our Blog Readers

We currently have 2 discount codes that have been set up especially for our blog readers. To use them, add the product to your cart and then enter the discount code and click “update cart.”

Free Resources on Facebook

During the month we added several free resource packs for download from our Facebook page. The downloads are available for anyone who “likes” our page.

High Resolution Textures

Art Fragmentation of the Photo

In this quick tutorial, i will teach you how to make art fragmentation of the photo.

Final Image Preview

Art Fragmentation of the Photo

Resources

Step 1

Start by opening photo on Photoshop.

Art Fragmentation of the Photo 1

Step 2

From this photo choose one of the girls. I choose the one in the middle and use the Crop Tool to select area. After selection, go to Image > Crop.

Art Fragmentation of the Photo 2

After selection, go to Image > Crop. You should have something like photo below.

Art Fragmentation of the Photo 3

Step 3

Now we are going to increase contrast of the photo. To do that, duplicate layer (Ctrl+J) and change layer mode to Overlay on new layer.

Art Fragmentation of the Photo 4

Step 4

Duplicate again new layer (Ctrl+J) and change layer mode for it to Screen instead of Overlay.

Art Fragmentation of the Photo 5

Step 5

Merge all the layers together with Layer > Merge Visible. Now we have only one layer. Apply Image > Adjustments > Levels with next presets for this layer.

Art Fragmentation of the Photo 6

Art Fragmentation of the Photo 7

Step 6

Apply again Image > Adjustments > Levels, but this time you have to change options only in Red channel.

Art Fragmentation of the Photo 8

Art Fragmentation of the Photo 9

Step 7

Go one more time to Image > Adjustments > Levels to make some changes in Blue channel.

Art Fragmentation of the Photo 10

Art Fragmentation of the Photo 11

Step 8

Duplicate current layer with Ctrl+J again, then apply Filter > Blur > Gaussian Blur with similar settings to these:

Art Fragmentation of the Photo 12

Art Fragmentation of the Photo 13

Step 9

Change layer mode to Multiply for this layer.

Art Fragmentation of the Photo 14

Step 10

Duplicate current layer with Ctrl+J and change layer mode to Soft Light on new layer created.

Art Fragmentation of the Photo 15

Step 11

Copy current layer one more time with Ctrl+J and change layer mode to Normal for copy.

Art Fragmentation of the Photo 16

Step 12

Select Rectangular Marquee Tool and create selection similar to mine on newly created layer.

Art Fragmentation of the Photo 17

Press Delete button to clear selected area and remove selection with Ctrl+D.

Art Fragmentation of the Photo 18

Step 13

Apply Strole layer effect by going to Layer > Layer Style > Stroke for newly created frame.

Art Fragmentation of the Photo 19

Final Image

Art Fragmentation of the Photo

You might want to experiment with different filters, layer styles and layer modes and all that to get some unique outcomes, you just have to get creative!

Follow Photoshop Star
If you want to receive updates from PhotoshopStar, please consider subscribing our RSS feed. You can also follow us on Twitter.

If you prefer, you can also subscribe to our monthly Newsletter.

Design a Blue Corporate Website Layout in Photoshop

Today we’re going to be walking through the process of designing a homepage for a corporate website in Photoshop. This particular design belongs to the Vandelay Corporate Template (HTML/CSS), which is available to members of Vandelay Premier or can be purchased for $10.

Here is a look at what we will be creating (click the image to view in full size):

How to Design a Corporate Website in Photoshop

Step 1: Setting Up the File

Create a new file that is 1200 pixels wide and 1255 pixels high.

How to Design a Corporate Website in Photoshop

Step 2: The Header

Set a horizontal guide at 80 pixels (View > New Guide). Set the foreground color to #5487bb, a medium shade of blue that we’ll use for the header. Use the rectangular marquee tool to select the entire area above the guide, then use the paint bucket tool to fill the selection with color.

How to Design a Corporate Website in Photoshop

Zoom in to about 500% or 600% and select the pencil tool and a square one-pixel brush tip. Add two different one-pixel borders at the bottom of the header using the colors #316395 and #b4d6f6.

How to Design a Corporate Website in Photoshop

Our file is 1200 pixels wide but the content area of the site will be only 960 pixels wide, so set a vertical guide at 120 pixels to set the left edge of the content area. We’ll be using the free font Expressway for the title/logo of the site, but of course you can replace this with your own logo if you have one. We’re using 24 pt Expressway in white.

How to Design a Corporate Website in Photoshop

We’ll add a small drop shadow to the text, so double click on the text layer in the layers palette to open the layer style options. Choose “drop shadow” and 50% opacity with 1 pixel distance and 1 pixel size.

How to Design a Corporate Website in Photoshop

With the drop shadow the text will look like this:

How to Design a Corporate Website in Photoshop

We’re then adding the text “business template” in #f0eb6d, 14 pt italic Georgia, and also with the same drop shadow.

How to Design a Corporate Website in Photoshop

Now for the navigation menu. Set a vertical guide at 1080 pixels to set the right edge of the content area. Then use 14 pt bold Arial in #f0eb6d to create the navigation menu text.

How to Design a Corporate Website in Photoshop

That completes our header, and here is how it looks:

How to Design a Corporate Website in Photoshop

Step 3: The Featured Area

Below the header our design will have an area for a slider and some featured text. We’ll start by setting a horizontal guide at 500 pixels to set the bottom of the featured area. Add a new layer (Layer > New > Layer) and select the fill the featured area with white (#ffffff). Next, we’ll be using a Photoshop pattern from Vandelay Premier that is part of our Pixel Patterns for Photoshop pack. It’s a simple grid pattern, so if you do not have our pattern pack you can create your own. To apply the pattern, double click on the layer in the layers palette and select “pattern overlay”. Choose a small grid pattern and click “ok”.

How to Design a Corporate Website in Photoshop

It will look like this:

How to Design a Corporate Website in Photoshop

Then add another layer on top of the previous one. Select the same featured area with the rectangular marquee tool and fill it with #8ec1f3. This new layer will cover up the grid pattern on the other layer, so will change the fill opacity so that the grid shows through. In the layers palette, double click on the new layer that you just filled with blue. You’ll see the setting for “fill opacity” in the “advance blending” section. Change that to 90%.

How to Design a Corporate Website in Photoshop

It will then look like this:

How to Design a Corporate Website in Photoshop

We’ll then give this featured area a bottom border, so create a new layer and use the rectangular marquee tool to select and area that is 10 pixels in height. Then set the foreground color to #5487bb and use the paint bucket tool to fill it. Then zoom in and use the pencil tool to give it two one-pixel borders at the top in #b4d6f6 and #316395. Here is how it will look at 600%.

How to Design a Corporate Website in Photoshop

For our slider we’re going to be using an image that is 440 pixels wide and 300 pixels high, and we’ll add a 10 pixel border around the image. Set vertical guides at 120 pixels and 580 pixels and horizontal guides at 120 pixels and 440 pixels. Add a new layer and use the rectangular marquee tool to select the area inside the guides, and then use the paint bucket tool to fill it with #86b5e2.

How to Design a Corporate Website in Photoshop

Next, we’ll paste in an image that is 440 pixels by 300 pixels.

How to Design a Corporate Website in Photoshop

On the blue border around the image, we’ll add a light one-pixel border. Use the pencil tool to add the one-pixel border in #b4d6f6. Here is how it looks at 600%:

How to Design a Corporate Website in Photoshop

For the slider controls we’re going to simply use round buttons. To create these, use the brush tool with a round brush tip and a diameter of 10 pixels. The first (active) one should have a color of #f0eb6d and the others are #5487bb.

How to Design a Corporate Website in Photoshop

Next, we can add the text. We’re using 14 pt Arial in #163f6a for the paragraph text and 24 pt bold Arial in white (#ffffff) for the heading. Leave 40 pixels of space between the photo’s border and the left edge of the text.

How to Design a Corporate Website in Photoshop

The last thing to do for this section of the design is to create a call-to-action button. In this case it will say “contact us”, but you could change the text to suit your needs. Using the rounded rectangle tool with a radius of 15 pixels, create the button shape. The color isn’t important because we will be adding a gradient overlay.

How to Design a Corporate Website in Photoshop

Double click on the button shape layer in the layers palette to open the layer styles options. Select “inner shadow” and set it to #f9f7b9, normal blend mode, 90 degree angle, distance of 3 pixels and size of 3 pixels.

How to Design a Corporate Website in Photoshop

Then select “gradient overlay” and set the colors at #f0eb6d and #e3de55.

How to Design a Corporate Website in Photoshop

Then select “stroke” and give it a one-pixel outside stroke in #cec946.

How to Design a Corporate Website in Photoshop

The button will now look like this:

How to Design a Corporate Website in Photoshop

Then add text on top of the button. We’re using 14 pt Arial in #163f6a.

How to Design a Corporate Website in Photoshop

Step 4: The Main Content Area

Below the featured area we will use a 3-column content area. We well use 40 pixels of space between the columns, and the sides will be set by the 120 pixel and 1080 pixel vertical guides. We’ll also leave 40 pixels of whitespace below the featured area and above the sub-headers.

The body text is 14 pt Arial, #191919. The sub-headers are 18 pt bold Arial, #ac1e32, and 14 pt bold Arial, #191919.

How to Design a Corporate Website in Photoshop

The second column uses the same text settings.

How to Design a Corporate Website in Photoshop

The third column is basically the same except that we are adding italic text in #8f8e8e for the dates

How to Design a Corporate Website in Photoshop

That completes the content area, now all we have left is the footer.

Step 5: The Footer

Select the bottom 55 pixels of the canvas with the rectangular marquee tool, add a new layer and fill it with #5487bb.

How to Design a Corporate Website in Photoshop

We’ll add text and navigation to the footer using 14 pt Arial in #ffffff.

How to Design a Corporate Website in Photoshop

That completes our design! Here is the end result, click to see in full size:

How to Design a Corporate Website in Photoshop

This design is available as a coded template at Vandelay Premier.

For more tutorials please see:

High Resolution Textures

Using Design Tools to Become a One-Man Design Team

As designers, we can often find ourselves on a bit of an island. Whether we are working independently or at an in-house position, there are times when we are left to fill many job roles that merit an entire design team.

I recently experienced this situation at my previous job where I was a solo user experience designer at a company employing thousands of people. I had to do my own research, wireframes, prototyping, functional specs, visual design, etc. I had no team to help accomplish these tasks, but I still had deadlines as if I did.

On the one hand, it was a great experience to work in all of these different roles. On the other, I was rarely afforded the opportunity to focus in on one of these disciplines and perform it at the level I would have liked.

This is me, stressed out.

Does this describe you? Are you the lone designer working at a company tasked with accomplishing the many tasks that a team would normally tackle? Maybe you are working as a freelancer and certain projects need many of these roles to be filled to really produce an excellent result.

How do we handle multiple roles?

I propose we build our own team. A team consisting of you and design tools.

I will share with you how I used some very valuable (and relatively affordable) tools and resources to help me tackle a few different roles at a much higher level than if I was trying to do it all on my own.

I used four different tools and resources to help me in my struggle to produce well-informed solutions that met my deadlines.

These four things are data-gathering tools (ClickTale), design pattern galleries/libraries, wireframing/prototyping (Axure), and design resource sites (like Designmoo and 365psd).

You can swap out the specific tools I’ll be mentioning with your preferred tools and resources, but I wanted to share with you my personal setup as a proof-of-concept.

Tools Can’t Replace People

Before going any further, let me first say that working in a team environment is almost always more fruitful than trying to do all multiple roles on our own. But when you’re at a company that doesn’t have the budget to form a design team or are working independently as a freelancer, sometimes you just have to do the best with what you have, to ensure that the results are the best they can be.

With that said, let’s go over these four types of tools.

Data-Gathering Tools

Let’s start with ClickTale, a great research/analytics tool that shows you how users are interacting with your web pages. ClickTale allows you to track page views along with some basic analytics reports that you could get from a free alternative like Google Analytics. But its strength is in features like heat maps, click-tracking, scroll reach (how far down the page your users scroll), recorded sessions of users interacting with your site/product so you can see how they navigate your site, and some great web form analytics. Six Revisions uses ClickTale on the front page of this site.

ClickTale

I used this tool to help me with the research phase of my site projects. The detailed reports it gave me helped in discovering ways to improve our web page layouts and web application interfaces. I didn’t actually have to do the research; I just needed to sift through the very well prepared datasets it provided me.

With a tool like ClickTale, I was equipped with more knowledge about our users to help me either rework or create new designs based off of solid information about our customer base and how they interacted with our products.

Other tools like ClickTale are:

Design Pattern Libraries

Once I had data about how users experienced our existing products, it was time to rework website components such as site navigation, web page layout structures, the design of web forms, and so on — all in an effort to improve conversions based on what I had learned.

Often having to work under the gun and in constant deadline-dash mode, I found that it was helpful to use design pattern libraries as a guide to see how other designers have tackled the same design problems that I was faced with.

I also look at anti-patterns (which can be found on sites such as dark patterns) to double-check that my interfaces are built with the user’s best interest in mind.

Here are some design pattern libraries that I have found to be helpful:

It should be noted that design patterns do not replace the need for us to create the experiences based on our projects’ objectives and needs, but they serve as good references especially when we need a quick jumpstart.

Also, check out these articles if you are interested in learning more about design patterns:

Wireframing and Prototyping

For wireframing and prototyping, I use Axure. This application is a wireframing /prototyping tool that can generate functional HTML prototypes from your wireframes as well as produce functional specifications based on them. You can kill two birds with one stone by creating your wireframes and documentation at the same time!

Axure

This app has saved me gobs of time, and having functional prototypes instead of lifeless, static wireframes made with graphic design tools really helps with getting the clients to understand the flow of the application/site.

Functional prototypes are also very helpful in quick-and-dirty iterations and usability testing, allowing you to test the functionality and flow of things before you get to the visual design stage.

Of all of the tools and resources, this one was the most helpful to me.

To discover more wireframing tools, read this guide called Ultimate Guide to Website Wireframing. If you are not convinced that this phase of a design project is important, also read The Benefits of Wireframing a Design.

Design Resource Sites

Just as with design pattern libraries, I have found that visual design resource sites are crucial in fulfilling projects on time and within budget. My background is in visual design, but for someone who is a user experience designer or web producer that doesn’t have visual design as a skill, these resource libraries can be very beneficial.

To be honest, even as a visual designer with the required expertise, I need inspiration and starting points when I’m on tight deadlines. Many times, I don’t have the time or resources for creating custom design elements, so these sites can be a lifesaver.

Designmoo

Designmoo and 365psd are two sites that I have found to be super helpful. Not only can you find great design files on these sites, but each site also provides the opportunity for you to give back to the design community by allowing you to submit your own designs that others can use.

There are a lot of design resource sites out there, and it’s really up to you to find ones that fit your needs. Also, blogs provide freebies occasionally that you can also look into.

Parting Words

I hope you find these resources as useful as I have. Again, let me stress my earlier statement that these are tools and resources that can help you build a range of sites and applications, but no tool can replace real people with actual skills.

Don’t get discouraged when you feel outnumbered or overwhelmed by the amount of work on your plate. Look around for resources, and use the opportunity to crank out some awesome work even when it seems the odds are against you.

Do you have design tools and resources that have been helpful to you? Discuss them in the comments below.

Related Content

About the Author

Aaron Irizarry is a user experience/interaction designer for IGN Entertainment in Costa Mesa, California (where it’s always right around 70 degrees and sunny). He has a background in visual design and has been handcrafting pixels since 1998. He shares his thoughts and experiences on his blog thisisaaronslife.com. Follow Aaron on Twitter @aaroni268.

What’s Happening at Photoshop World?


As you may know, Photoshop World 2011 is occurring in Orlando, Florida right now. Photoshop World is an event that is held twice a year on the east and west coasts of the U.S. One of our authors, Stephen Petrany is attending the event and just sent in a couple videos of some of the new features that are coming to Photoshop. The videos are short and don’t offer a much detailed information but they do offer a bit of insight into what Adobe is working on at the moment.

Update: we should also mention that Stephen was up for a guru award for one of the tutorials that he wrote for Psdtuts a while back. Stephen did not win but we wanted to congratulate him for the honor nonetheless.


New Mobile Apps

The first video shows some possibilities for a new app that Adobe is working on. It shows a person using their finger to draw on an app. We’ve spoken about this sort of thing before. I think most designers would prefer that they use a pen, similar to their Wacom Tablets to create their designs. So it’s tough to say whether mobile apps like the one below would actually be useful. Either way, I’d love to know more about what Adobe is working on. Hopefully, Stephen can elaborate at a later date.


Real Time Lens Correction

This video shows how Adobe is working on a real time lens correction feature for later versions of Photoshop


While these videos don’t provide that much information into what is happening at Photoshop World, I’d love to know what you guys think. What features would you like to see in an upcoming version of Photoshop? Dare I say Autosave???

5 SEO Tips for The Everyday Web Designer/Developer

I seem to notice that SEO (Search Engine Optimization consultants) get plenty of push back from web designers, web developers and even copywriters whenever they collaborate on a project. And to a large extent, I understand why this disconnect usually occurs, which usually starts at the beginning stages of the design process. It usually happens like this: the designer gets excited about laying out the creative elements of a website , the developer wants to return to his cave so he can diligently code on the back-end, and the copywriter retreats to somewhere peaceful and serene to write immaculate content. Enter…the wet blanket SEO who serves as an annoying reminder that no matter how awesome the design, functionality and copy of a website is, the website is nothing unless it has keywords, keywords, keywords and more keywords so it can be indexed and ranked by search engines A, B, C and D.

Fortunately, it doesn’t have to be a zero-sum situation for all parties. With proper planning, optimizations can be implemented to help a site rank high in the search results without compromising the aesthetics and functionality of the site. Below are a few important SEO concerns and pointers to be aware of before the design process begins:

1.Limit Flash

Flash is amazing for adding a unique and fun experiene for users. Unfortunately, search engines aren’t so good at interpreting Flash elements as they are with HTML. And although Google recently announced that, in cooperation with Adobe, they have improved their ability to handle indexing of Flash-based content, there is a long way to go before they can fully intgerpret it. For a searchable website, you still need to depend on your HTML and plain text. Utilize keyword specific title tags, alt tags and header tags.
Additionally, Flash still has security issues that make excessive use of it a real disadvantage.

No photo camera shiny sign

2.Ditto JavaScript

Just as the web crawlers cannot read Flash, they cannot access JavaScript or any other scripting language very well either. Make every effort to assure that your content is laid out in a logical manner for easy navigation by the user. The general rule of thumb is: what’s good for users is good for the search engines. Not only is text generated by JavaScript hidden from the search engines, it is also unavailable to visually impaired users. Well planned CSS and tags in your HTML can achieve complex layouts and still be visible to all.

3.Plan Your Title Tags

Your title tags are a key element in your page design. It’s not just for the search engines, but also for your visitors. It’s usually the first line of text in your listing on the search engine results page (SERP). It should be limited to 65 characters. Anything longer than that might not be shown by Google. Because of this, it should include your most important keywords, without duplication of terms, but still be readable by your visitors. Your title tag also shows on the top bar of most browsers while your users are on the page. If they bookmark the page, the title tag will usually be what shows in their list.

good-title-tag

A good practice is to wait until the page is finished to choose the title. This will enable you to tie the keywords into your content instead of trying to plan the text of the page around two or three keywords.

4.Keep Your URLs Readable

Long, ugly URLs are scattered everywhere on the Internet. Some of the biggest, professionally built websites are the biggest offenders of this best practice. If all anyone ever did was click it, the content of the URL wouldn’t matter much, but they need to be written down, emailed and shared on social networking websites. A good URL describes the content so that both the search bots and visitors can relate it to your page content. It should also be as short as possible.

bad-url

 

good-url

Brevity makes it easier to paste, tell someone about it over the phone or write on sticky note. So stay away from abbreviations or long strings of numbers and symbols; use descriptive keywords as much as possible; and choose a format and keep it consistent throughout your website. It’s better not to use any uppercase letters. People have become accustomed to using lowercase on the web. Capitals can interfere with your website being found.

5.Plan Ahead

Advance planning of your design that includes SEO factors in the process should make your website efficient as well as beautiful. Some important points to keep in mind are:
Page load times are an important ranking factor. This just goes back to the rule of thumb – a quicker page load time is optimal for the user experience and improves rankings.
Keep mobile visitors in mind. More and more users are turning to their phones to view websites, so test your website on mobile platforms as well as traditional screens. Remember that many smartphones can’t see Flash (iPhone) or JavaScript at all. In that case, you should make sure that you create a mobile version of your website.

business-charts

Test, test, then test again. You should make a strong effort to test all aspects of your website on every possible operating system and browser platform, including mobile apps. Validate all your code and click through all of your order processes before going live and fix any bugs before publishing to the world. W3C offers free validators for nearly every type of code or script. The last thing you want is for an incomplete sale due to a faulty order process.

Don’t try to game the search engines. If the search engines determine that you’re utilizing “Black Hat SEO” tactics such as keyword stuffing. For example, do not have hidden copy that’s the same color of your website’s background. You could get penalized in the search engine result pages or even have your website banned altogether. Use keywords where they make sense. Wrap your images and flash content with textual explanations of what they contain. These things also help disabled users to navigate your content.

In the end, there are hundreds of SEO tactics out there and new ones developing all the time as the search engines modify their algorithm. However, if you take time to properly plan for these aforementioned optimizations before everyone gets too far into their responsibilities, you should most likely experience postive search result rankings without hurting the overall look and feel of your web design masterpiece.

 

Brian Flores

About the Author

Brian Flores is the SEO for InMotion Hosting, one of the top dedicated server providers in the US. He spends a good part of his time collaborating with an awesome team of writers to post useful web design and development tutorials on WebHostingHelpGuy. You can follow him on Twitter @WHHG_InMotion or @BrianAFlores.

Interview With Roy Bourkel


Adversity and loss have definitely fueled this resilient designer to create some amazing artwork. Becoming a designer was pure coincidence for Roy but he took advantage of his talent and is now creating some extraordinary artwork. With a very unique style that doesn’t quite sit on one particular technique Roy can illustrate exactly what he is feeling. In our interview Roy discusses how he overcame some obstacles in his life, which in turn made him a much better artist.


Q Welcome to Psdtuts+, please introduce yourself. Could you tell us where you’re from and how you got started in the field?

Hello, my name is Roy Bourkel, and I am from Luxembourg, a tiny, but lovely country situated in the mid-west of Europe. I always used to be a ‘draw-a-holic’ and when I found a 4.0 version of Photoshop in my fathers belongings I really started to get into digital art.

Q Who, and or what made you want to become a graphic designer?

That’s an interesting question, because when I think about it closely, it was pure coincidence. Actually I planned to become a doctor, in my desire to change something in this world, but when my dad finally lost his fight against his cancer, I gave up on that thought and decided to do, what I love the most, creating!

Q How have you developed your design style over the years? And how has it changed since you started getting serious about digital art?

When I started I had a lot of trouble getting along with the new, weird environment. It’s just hard for a traditional artist to move over to the digital ‘dark-side’. But it was a good step in the right direction; I made huge improvements only in the last year. 8 months ago, I injured my head, my right arm and hand were paralyzed and there was a possibility that I’d never regain my abilities, so I decided to become dual-handed and trained my left hand. I worked hard and at the moment I am working on new techniques and tricks. Looking at my stuff gives me the feeling that I am drifting in a more conceptual art branch. And I like that.

Q You are only 17 years old, do you plan on being self-taught in digital art or are you going to attend a design university and get a degree?

Well, I am sorry that I forgot to update my info. I am 18 now, and I am planning to study art and design and get a degree. I can teach myself a lot, but you can never learn enough, don’t you agree? And in my opinion, knowledge results in creativity.

Q “BIOLUMINESCENCE” is an astounding illustration that you did for SlashTHREE’s latest design pack, please talk a little about the creation of this piece and its concept.

Thank you! The way Bioluminescence was created is pretty weird. It all began when I started to train my left hand. I had all those cool copic markers laying around and a lot of time. First, I had to start with easy elements to get a feeling with the left hand. Then after a week I had a whole bunch sheets filled with conceptual stuff, and I took 34 of them, with useful elements and started to digitalize them and continued my work in Photoshop.

To actually understand the concept behind ‘Bioluminescence’ you have to know the original title ‘Bioluminescence: 2013′. I am not naive, but I thought about the Mayan calendar and imagined the possibility if it’d actually happened. What could our world look like? Life is the strongest constant in nature and even when our race will be long gone, a lot of life forms will still remain and some of the most resistant inhabitants do live in the depths of the sea. Now to combine this with colors and weird forms? Exactly, bioluminescence!

Then I made a first attempt, but I didn’t like it at all, so I decided to start from the beginning, but with the same 34 images I had. I changed the name to only focus on the colors and there you go.

Q Your portfolio features a few great typographical pieces that you have made. Are there any differences in the approach you take to a typographic piece, opposed to a non-typographic piece; and if so why?

I don’t think so. I always plan and think a lot, before I start working. The only thing in a typographical work, that could be a little different, is that I focus a little more on technical aspects like symmetry, forms etc. , but that’s not always the case. For me it is another way of creating artworks.

Q What would you say is your biggest flaw when designing? How do you try and correct it?

I am never satisfied. I strive to become one of the best and I just can’t focus on finished stuff, I have to go on. It’s both a curse and a benefit. My weakest spot is also my greatest, so I don’t care about it at all.

Q Thanks again for providing Psdtuts+ with this opportunity to interview you. Any final thoughts for our readers?

No, thank you, for taking your time to let me share my thoughts with one of the best communities worldwide. If I may give our readers one advise, I’d like to tell them, that you should just never give up, never lay down your pen and just continue. Don’t ever argue about what you do, or what you don’t, just do something and keep on working and you will see, the results will come!


Where to find Roy on the Web

Photoshop for Portraits

If you regularly surf the internet you are bound to come across some great looking pictures. Some of these pictures look life-like and have a unique style. This is because they have probably been edited using a special software known as Adobe Photoshop software. There are numerous benefits Photoshop offers to both amateur and professional photographers. The results can be absolutely stunning. Let’s look at some of the benefits Photoshop can have on portraits.

Retouching
If you just can’t achieve that good hair day look, or if the amazing wedding photos can’t get rid of the mustard spot, Adobe Photoshop will step in and let you retouch your portrait. You can whiten the teeth, broaden the smile, erase the freckles, Photoshop is capable of all these cover ups. This means that you don’t have to pay thousands to get a makeover, you can have a stunning picture, and all you have to do is to retouch the portrait. Now, you have a picture to cherish until the end of time!

Make-Up
Photoshop lets you not only retouch, but to also transform the picture. Once you have achieved a desired look, you can add piercing blue eyes; flaming red hair and lips that seems like you’ve just gone and had a makeover at a beauty saloon. Digital make-up can offer some stunning effects.

Color Popping
If you want to stand out in the crowd or be the prominent figure in the picture, while being surrounded by various other objects, this can be done with Photoshop color popping. Color popping is desaturating the other objects in the picture, while leaving the main subject in its color popping effect.

Blue Effect
The blue effect gives the picture an exciting feature. It makes the rest of the picture seem insignificant, but brings the subject to life. With Photoshop you can blue the background of the picture. This will achieve the desired look of focusing all the attention on the subject, without attention being taken away from the other elements.

Pop Art
You can use pop art to become creative with the picture. Pop art brings various appearances by producing clear defined lines, vibrant sharp paintwork, shadowing and proper representation of symbols and objects.

When it comes to portraits, we all want the image to be unique. This is what Adobe Photoshop offers to the potential user.

M.A.H