HAPPY NEW YEAR 2016 from 3KITS & Team

Wishing you all and your family a great, prosperous, blissful, healthy, bright, delightful, energetic and extremely Happy New Year 2016

Benefits Of Responsive Web Design!

Imagine a website with responsive web design that adjusts to the device that your customers are using to view your business online. Imagine the content, the text, titles and the images actually moving so that they fit within the size of that specific screen. Whether it’s a tablet or an iPhone or an iMac or a PC desktop! You can literally see the adjustments happen as the browser size shifts from one size to another. Now I have to admit, the first time I saw this I was blown away! My immediate reaction to watching such a complex feature in action was WOW – this is awesome! What could be more incredible than this? Even today after having seen hundreds of websites with responsive design I still can’t help but smile every time I see the functionality in action; the “cool factor” is just that good every time. It’s no wonder responsive web design continues to receive so much attention – it really is state of the art and very convenient to have. But aside from aesthetics there are some very important benefits that responsive design provides that you should be aware of. So let’s dive into some of those benefits in this blog post! When it comes to responsive web design we want to give you the tools to make an informed and intelligent decision especially if you are creating a new business website.

Effortless Multi-Device Adaptation

The main benefit of responsive web design is the flexibility to adapt a website to different screens. Your website becomes easily accessible on all types of devices. Imagine your handcrafted website adjusting and optimizing (for your customer’s viewing pleasure) automaticall. Effortlessly adapting to the various screen sizes in existence – that my friends, is the true power of responsive web design. And it’s changing the web design industry and competitive landscape of business websites as we know it! Based on the size of the screen, your website will move, content will relocate, images will resize, font sizes may shift, the layout will change and even the navigation will adjust to deliver an exceptional user experience no matter what devise your customers are using to view your business!

Easy to Maintain

Creating multiple versions of your website is costly and cumbersome. Considering just a desktop, iPad and iPhone for example, means that you will need to triple your efforts when looking to make an update to your web page. With Responsive web design you’ll avoid this extra effort completely. Your website will work seamlessly on different devices and so when you need to update your website you only update one platform through your content management system. In the long run this will save you time and help avoid headaches with having to work on multiple versions of your website.

Improves your SEO

The benefit here is in the fact that you will only need to optimize content for one link. The URL structure remains constant for all devices. With Responsive design you have one URL that is easy to update and optimize your content which in turn optimizes your content for all devices. Whether it’s a Samsung phone, iPad or desktop responsive web design makes it easy for the Google crawlers to index your website pages.

Higher Conversion

If you are selling more of your goods and services online then you are converting more. If your customers are finding your business and making purchases through the use of tablets and mobile devices then your conversion is increasing. If one of your many conversion metrics happens to be sales then you’ll see an upward shift in your top line as well!

Increases Mobile Sales

It’s no secret that the mobile revolution has been in full force for quite some time now. Over $7.7 Billion in mobile sales expected for 2013 alone and that figure will continue to increase for several years to come. People are buying online and they are using their tablets and smart phones to make those purchases. To get them even more comfortable in doing so responsive design is a must.

Seamless User Experience

Imagine your incredible looking website looking less than incredible on an iPhone or iPad? Imagine parts of your website not working correctly or having certain images look stretched or content out of place. Is this sloppy looking? You betcha. Will your potential customers notice the distractions? Absolutely! Is this a credibility killer – you better believe it!

Keep Your Website Relevant For Longer

No doubt about it – having a business website that looks great on all mediums is the way to go in terms of longevity. When you use state of the art technology to build your business website it goes without saying that the final product is going to be of higher quality and remain relevant for much longer. Check out these quick stats courtesy of eMarketer that highlight the potential behind responsive web design.

• B2C eCommerce is expected to hit almost $400 Billion for 2013.
• Mobile Ad spending will reach $7.7 Billion this year alone.
• Expect 246 Million US mobile phone users this year – that’s 78% of the nation’s population.
• More than 58% of all US mobile phone users will access the internet via a mobile device, with smartphone adoption driving this. By 2017, this number will grow to 80.7%!

At 3KITS we recommend that all our clients consider responsive web design for any new handcrafted website we build. Having your business website detect the type of device each website visitor is not only best practices but also extremely beneficial for conversion and attracting more customers.

- See more at: http://www.3kits.com

web design companies in Hyderabad, Web design company in Hyderabad, web design Hyderabad, web design in Hyderabad, web designers Hyderabad, Web Designing, website designers Hyderabad

Content Management System = Innovation

Imagine a content management system that gives you the ability to update your business website in real time or add new pages or business information to your live website within seconds. Sounds quite innovative right? Well that’s exactly what we think! Sure by this point we have all heard about the numerous benefits of having a content management system. But for this truly innovative tool and its far reaching effects, it’s worth mentioning again. A CMS is basically a platform that allows even a non-technical individual to edit, modify or even publish specific content on a website. These updates or modifications can actually be made in real time with just a few clicks of a mouse. Adding new products, blog posts or additional press releases to your website becomes a breeze. Nowadays a content management system is a common addition to most newly developed websites and also part of the value proposition offered by web design agencies on custom web products. We do however, want to bring up a few things that sometimes get overlooked. 

First of all, websites do not automatically come with a content management system. In fact, most of the websites in existence don’t have one. Without a CMS your company is actually tied down to that specific web design agency for the life of your business. Unless you have an in-house developer you’ll need to rely on that agency for any and all changes. It’s definitely not the ideal or most cost effective solution as your business may be quite active in the online world and require weekly or even daily updates. For businesses that have an eCommerce website, this is especially true. All sorts of updates and changes to your online store can be facilitated through a robust CMS and eCommerce solution, including product description, product images, quantity, pricing, shipping, taxes and various other attributes.

Some businesses also ask us if there are any drawbacks to having a CMS. While we don’t see any real drawbacks there are a few items to keep in mind. One item to note is that not every CMS is created equal. There are various options available but even within the best 4 or 5 CMS solutions there are vast differences. Some are better suited for complex functionality and equipped with robust, feature rich options. Some are better suited for eCommerce websites or provide greater flexibility for future growth, while others handle just the basics without all the bells and whistles. Obviously knowing how much functionality your new website will require and your business goals will help determine the right CMS. In addition, you’ll want to consider data uploads or integrations with your ERP software or additional databases when scoping out requirements.

Another interesting item to keep in mind is that not every CMS is user friendly. Some are easier to use than others and of course “user friendly” is quite subjective. WordPress for example is considered the most popular and most user friendly CMS available. Many clients actually prefer or even request WordPress as the CMS for their new handcrafted website.

Lastly, a content management system in the hands of an inexperienced individual may lead to headaches. Unless you know what you are doing the changes you make to your live website may not look good or turn out as anticipated. It’s always best to have an experienced individual assigned to manage your CMS and all updates as you don’t want just anybody playing with your live website. Sometimes your changes may cause a shift in the alignment or accidentally delete content or even break a specific website page, all of which get seen by the online world instantly. So unless you’ve been properly trained or know what you are doing we recommend leaving CMS access exclusively to experienced individuals.

Even considering the few items we have mentioned here, overall the benefits of a CMS clearly outweigh the drawbacks. Clients love the freedom and flexibility that a content management system provides. Businesses enjoy and even demand the ability to make important changes without having to rely on an outside party. We are certain the CMS will continue to be a popular addition to business grade websites globally.

- See more at: www.3kits.com

web design companies in Hyderabad, Web design company in Hyderabad, web design Hyderabad, web design in Hyderabad, web designers Hyderabad, Web Designing, website designers Hyderabad

Cheap Web Design – The Pitfalls

Perform a quick Google search for “web design” in your area and inevitably some of the search results that come back will include that tempting word “cheap”.

Your eyes widen, the mouse pointer inches slowly forward as if on auto pilot. After all, we all like value for money and if we’re running a business that’s what it’s all about.

But have you ever asked yourself, what does cheap mean?

The dictionary definition starts off well with “Relatively low in cost; inexpensive or comparatively inexpensive” but keep reading down the list and it makes for some grim reading; “Achieved with little effort” and “Of poor quality; inferior”.

We know from experience that good web design takes a lot of listening to the customer, expertise and many hours of effort.

When we see search results offering very cheap website design services we have to wonder just how much effort is going into that design and what level of quality is being produced.

So often we find that these cheap website design offerings are based on a standard template with a few colours changed and your business logo slapped on the top for good measure.

OK the template may be nice but what about the quality? A few minutes in Photoshop – literally – and all you might get is just the file.

What do you do with these files and how do you get them onto the web? What happens in a few months when you need to update the website?

This is not good web design but it is cheap web design.

 

So what other options are there?

A better alternative is to find a web designer who will give you value for money for your website design. Someone who will talk through your ideas and come up with the best solution using their experience and effort to give you a quality product.

A good web designer will ask you all sorts of questions upfront before undertaking the project: What are your goals? Who are your customers? Do you have an existing domain with hosting? Where do you see the site going in six months time?

Also you should ask them questions about how they work, what they deliver and the type of support they offer afterwards.

You can have an affordable website design that is good value for money and projects your business onto the web with professionalism and pride.

Have a chat with us today and find out how we can deliver you an affordable web design for your business.

Visit Our Website - www.3kits.com

Web designing in Hyderabad, Website designing in Hyderabad, Web designing company Hyderabad, Website design company Hyderabad, Website designing company in Hyderabad, Web design companies in Hyderabad

Business Without A Website?

I fail to understand how a business can continue to run without a website in this day and age, when almost everyone has a Twitter or a Facebook account and majority of the people go online for one reason or the other? What makes businesses think that their business not being online does not makes a difference to their sales? Logic and common sense both say that businesses without a website are missing out on prospective customers, and rightly so too.

So what could be some of the reasons that keep these businesses from getting a business website? In my opinion, it is a combination of many factors, rather than just one. Most businesses that are being operated by not so young keep believing that they can continue to do business as they did many years ago. If it worked then, why wouldn’t it work now? They fail to see the changed trend in society. I also see an element of arrogance in businesses owners in thinking that they can continue without a website as they have been doing for so long. They fail to see the missed opportunity here. Another factor would be ignorance or a certain level of internet illiteracy among these business men. I said, internet illiteracy, they may be highly literate otherwise.

Traditional methods of advertising are obsolete now. How many people do you seriously know that still use the Yellow Pages to look up for business information? However, I know of many people that still continue to advertise in the Yellow Pages. They do this because they have been doing this for many years now and are ignorant not to look for the newer opportunities that the internet offers them. Traditional methods are increasingly being replaced by the search engines these days. This is true for any product or services either local or global.

A recent study suggests that 92% of all people who researched online for a product or service bought the same product or service locally at least once. This shows the significance of a website to a local business. Website is no longer exclusively for the global business but increasingly important for the local businesses today.

Many businesses are still spending advertising dollars in the wrong place. They find money spent on a website design as an expense and therefore better avoided. They fail to see it as an investment and an opportunity to get more clients.

It is also true that websites have become a lot more affordable now than it was some years back. You can get a website today at a much lesser price now. I would say that, you can find a designer that suits your budget. However, one should not always go for the cheap ones but should also consider what is being offered for that price. There are many things to consider when getting a website designed, which I will cover in another post sometime later.

Okay, so if you are one of those businesses that still continue without a website, think again. People who do not change with the times fade away. This is also true for businesses. So get a website designed today.

Questions To Ask Before You Start Designing Your Clients Website

This is a vital step in the web design process that many web designers overlook. It is very important first to understand the actual requirement of the client. You need to understand the motive or objective behind the website. The more in-depth you understand the client’s requirements, the smoother the designing process will be. The list of questions will clear many things for you as well as the client. Many a times, clients are not aware of the web design process and what is good for the website and what is not. He may also not be aware of what is possible and what is not for a website. For example, a website is very different for the print media and what is possible for the print media may not be so for the web. The client may have some very unrealistic expectations from the website; it is the designer’s duty to understand them and educate the client accordingly.

Most of the confrontations that may occur during the web design process is usually due to these misunderstanding that were not cleared initially. Therefore, it is vital that the designers pose a set of questions that correctly identifies the client’s requirement. Many a times, you may find some really unrealistic expectations, client’s need to be educated here. For example, most often then you realize, we get unrealistic demands where the clients require a social media website like Facebook or Twitter. They tell us they have a limited budget now, but will pay us more, when the site is successful. Many a times, the client has a budget of less than a thousand dollars. We usually let go of the client and concentrate on other clients with a more realistic approach to their website. You don’t have to do the same and let go of the client, but surely, you will have to do a lot of consulting and educating before you take him on as a client. Another example would be clients, with the main objective of getting more clients from SEO, but wanting to have the site done totally in Flash or requiring a Flash intro. You may have to explain to the client that Flash or intros may not be a good idea for SEO.

The questions you pose to the client does not have to be any specific set of questions but can be any questions that help you identify his requirements and business objectives. The questions given below are generic questions and you can use your own sets of questions, rephrase them, or use them as it is.

1. What is your company name?
2. What products or services does your company offer?
3. Do you have any existing website? If yes, please specify the URL.
4. Do you require a website redesign or a complete new website?
5. Are you going to be selling anything online?
6. Do you require a website that you can update yourself?
7. How often would you be making updates to the website?
8. Describe your prospective customers or visitors.
9. Do you have any color preference for the website?
10. Please mention at least 2 websites that you like. Please also mention the reason why you like them.
11. Do you have any specific budget for this project?
12. Do you have a time frame within which you need this project completed?
13. Is there anything you do not want to include in the website?
14. Do you have the website content and images ready?

These are just a few questions to get you started. Ideally you should formulate your own questions depending on your requirement. The idea behind the questions are simply to understand the client’s requirements and long term business objectives so that you and the client are on the same page as far as the website requirements are concerned. This will ensure that each of you meets each other’s expectations and the website process goes smoothly.

Showcasing A Few Responsive Websites Designed by 3KITS

For those who still do not know what a Responsive Website means, I am going to quickly write an overview to acquaint you with the basics of what it is and how it can help you in marketing your website or business. In the meantime, you can also read my article here, A Brief Overview Of Responsive Web Design, if you want to go a little bit more in detail.

Responsive is a technique wherein the website responds to the device width and adjusts to provide an optimal view suited to the device. Therefore, if a user is viewing your website on a Desktop and switches to an iPad, the website would automatically adjust to the new device providing an optimal viewing experience. Why is this important? Well, because there are so many devices in the market today with varying screen sizes. Therefore, it is not practical to create a website for every device. In short, you cannot create a mobile site for every device in the market. Yet, it is so important to be accessible on the mobile platform. Therefore, the solution is Responsive design.

This technology has been around for some time now and yet quite new. Most websites you see today have still not caught up with it and are best viewed on Desktops only. Today I want to showcase a few Responsive websites we have designed. This will not only prove to be an inspiration but also motivate you, as a site / business owner to go Responsive with your own site. To see the sites in action, simply re-size your browser or open the sites on your mobile devices, and notice how they change layout.

Listing below are a few of the Responsive websites designed by 3KITS.

Tibcon Capacitors – India

Ashta Data – USA

Chanti Cars – India

Auto Hire Centre – Australia

Craft Pair – India

Suntek– India

Responsive vs adaptive webdesign, which is best for you?

Responsive webdesign has become a catch-all term for making your website work well at low resolutions.

Smartphones revolutionized the mobile web, and tablets are throwing another wrench into the gears with their growing popularity. With all things considered, a website today could be experienced on a low resolution smartphone, a medium resolution tablet, or a high resolution desktop or laptop. When you throw retina displays into the mix, the number of potential screen sizes is dizzying. Ideally, your website will look and function gracefully on all of the above, at any resolution.

Responsive webdesign in itself is the process of making a website work on very small screens, very large screens, and at any resolution in between.

Over the last few years, the industry has collectively developed a shortlist of common best practices. Many of these practices focus on retrofitting websites intended for high resolution down to lower sizes. Others start at mobile and work up to the larger viewports, optimizing as needed. All of these practices can generally be categorized as either responsive or adaptive layouts.

Responsive vs adaptive layouts

Responsive layouts generally perform better than adaptive layouts, but in some cases (complex webapps for example) an adaptive approach could serve users better. Either way, the goal is to make your website always look its best at the desired resolution.

Most people choose to use media queries to do this, as they are rock solid unless you need support for IE8 or below. For those of us who still have an audience in IE6 – 8 though, Scott Jehl has created a JavaScript polyfill called Respond.js  that will make things work.

Before, many webdesigners had minimal communication with developers until the handoff. Now though, designers and developers have to work together through both the design and development process in order for everything to go smoothly. From user analytics to what can or can’t be rearranged when changing viewports—designers and developers are closer than ever, if not the same person. If you’re looking for inspiration as to what responsive or adaptive layouts look like, 

MediaQueri.es  is a popular webdesign gallery that displays four view ports of a website.

Adaptive layout design & development

When the idea of responsive webdesign first started gaining ground, adaptive techniques dominated for a while. It’s easier to transition into designing and developing for these layouts, although they require more work than their responsive counterparts. This is also the route many people take when retrofitting an existing website to be mobile friendly. Because of the nature of adaptive layouts, they give much more control over the design of the website. You only have to design for specific viewports, and browsers only display the highest one that will fit in it’s width. These layouts are the ones that “snap” when adjusting as you resize your browser window. In fact if you resize your window to be smaller than 1024 pixels, you’ll see this sudden change I’m talking about as the layout of this website adjusts to focus on a medium resolution viewport.

Adaptive design

When designing for an adaptive development approach, the work is fairly easy. Before responsive webdesign became a thing, you simply designed one layout and then developed it. Now, you’ll design for multiple viewports, and develop them. Generally, it’s easier to start at low resolution viewports and work your way up. If you start with high resolution viewports and go down, things could end up a little…compact. And by the time you reach mobile, cluttered.

The number of viewports you design for is entirely up to you and the developer, work out a battle plan based on your users. If current site analytics show users mostly using low and medium resolution viewports, plan for those. You want at least three: one for low resolution viewports (smartphones), medium resolution viewports (tablets), and one for high resolution viewports (desktops and laptops). Ideally, planning for six is the standard, having a high and low resolution layout for each of the three viewports listed above. However, having too many more than that will make the development and maintenance too much to handle, so be wary.

Adaptive development

Developing an adaptive layout is actually quite simple as well. Assuming you’ve worked with the designer (or are the designer) from the get-go it’s just like developing a traditional website. You’ll start by developing the site at a mobile low resolution viewport. Once you get that done, we’ll use media queries to expand the layout for higher resolution viewports. Below are low, medium, and high resolution viewport media queries:

/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }

/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }

/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }

This is where the “snap” comes from in the adaptive approach. Since we’re targeting multiple common viewport resolutions, going from one to the other when resizing the window may cause the layout to jump. As I mentioned before, adaptive design & development is only highly useful for retrofitting or for complex webapps. Designing and developing for this many layouts for independent viewports is much more of a hassle if it isn’t needed.

Responsive layout design & development

As of today, responsive design and development is the de-facto approach to use. While it offers less control over the layout compared to an adaptive approach, it’s much less work to implement and maintain as you technically only have one layout. It’s also more customized for the website too, and this is the key selling point. You’ll be able to make your own breakpoints based upon when your design breaks or doesn’t look as intended.

Responsive layouts also include fluid layouts. Before responsive webdesign caught on, fluid systems were popular – layouts using percentages for widths. While they certainly worked well in most cases, that was before we had smartphones and tablets. Now, most fluid layouts are augmented by media queries at very low and very high resolutions. Otherwise you could end up with highly compact or immensely large layouts.

Responsive design

While you have a very simple guide to follow with adaptive design, responsive design isn’t so clear cut. There is heated debate that designing in the browser is the best way to go about it—designing and developing at the same time. Since you’re essentially going to take all viewportsinto consideration when designing, there is more work involved on the design side. Ideally, we want to keep the viewports in mind, but not design for any particular one. If possible, try to meet at a middle ground; Focus on mid resolution viewports while keeping in mind the layout will need to adjust for lower and higher resolutions later.

It’s exceedingly important to use existing user analytics if you have them. If your site already has analytics that demonstrate your audience primarily reads from low resolution viewports, design with a focus on those. Target your audience, even if that means ignoring some of the best practices out there. In the end, your website is going to be serving them, not the people aggregating these ‘best’ practices.

Responsive development

Once the design phase is complete, development is where the real fun begins. As mentioned before, if you have analytical data of your typical audience, start there. Once you get your layout developed, you’ll use media queries to make it responsive. Instead of defining set viewports though, you’ll instead manually resize your browser until the layout breaks. When that happens, that is your breakpoint width—add a media query to fix the break in design and continue on resizing. Ideally, you’ll be doing this from a high resolution device so you can see all viewports. Once you ensure you have support for low and high resolution viewports, move on to testing.

Custom or mixed layout types

Rarely, You may encounter a website that uses a custom solution, such as WebdesignerDepot. Generally speaking, the majority of the web falls into either the responsive or adaptive groups as outlined above, but sometimes people get creative and make their own solution. WebdesignerDepot does so by starting with the standard low, medium, and high breakpoints, then supplementing as needed inbetween when the layout breaks. On top of that, the layout is also fluid in nature up to a set max resolution. With this in mind, get creative and build something that breaks the norm!

Browser testing responsive and adaptive websites

Unfortunately, there really isn’t any good solution to browser testing these layouts yet. Thebest way to go about testing is to do it manually: loading up the page on your phone, tablet, laptop, and anything else around. You can also use a viewport spoofer in your browser if it supports such an extension. 

Ripple Emulator

 is an extension I use in chrome to test some low resolution viewports. While it’s certainly inconvenient to manually test on devices, it gives a more accurate impression of the functionality your site has. UI that looks alright on an emulator, may actually perform quite poorly on an actual device.

In conclusion

As extensive as this article is, this is simply a primer on the subject of layout types. There is a lot of information about responsive webdesign methods not included in this article; Optimizing UI elements & typography, responsive images & media, device pixel ratios, and much more isn’t explained here. However, there are plenty of sources for such knowledge, in much more information dense forms. Since the idea of responsive webdesign came around, we’ve contributed to an exceedingly vast wealth of knowledge on the subject. I hope by explaining the difference between layout types here, you’ll be able to better have a handle on the idea of a responsive web… without getting lost down the rabbit hole.

The community is constantly creating new techniques and constructing creative solutions to problems we’re only just starting to encounter. So while there is a vast wealth of information available about responsive webdesign out there, it’s a concept still in it’s infancy. While best practices and common use cases are easy to conform to, being creative and paving your own solution is always encouraged. If you have any tips or suggestions for those of us just getting into, or extending our knowledge of responsive webdesign and development, spark a discussion below!

How To Create A Vibrant Image Using Photoshop

In this tutorial, we’ll explore how to add more energy and dynamism to a photo. The effects can be extended and used on a multitude of photos to create a feeling of motion and vibrancy to a static image.

Step 1

Start by choosing an image similar to this one of someone jumping in the air. Pick an image that you feel has a lot of energy already, even before you’ve added everything else. Create a new document at A3 size with 300dpi, or if you prefer slightly smaller, then go for A4 300dpi.

Step 2

Drag your image into the new document and grab the pen tool, carefully start adding point by point until you’ve drawn around the entire body of the girl. Hit A to select the path selection tool and right click on the path>create vector mask. This will give us a clean edge and knock out the background, ready for us to add our own.

Step 3

With a blank background, let’s create some instant depth to this piece by adding a gradient. So select the gradient tool and keep it black to white. Now drag from the bottom right to top left, but drag over the canvas edges so that it sort of goes from dark grey to light grey.

Step 4

Now I sometimes like to get colour palette and tone sorted early, and in the case of this piece let’s do just that. What we’re going to do is something ever so simple but very effective in creating the mood of the piece. In the menu go to Layer>New adjustment layer>Gradient map. Now choose the preset blue, red to yellow gradient, hit ok and set this layers opacity to 40%. It looks a bit washed out, so something you should always do is add a couple more adjustment layers and for this piece we’ll add one for brightness/contrast, set to +8 for brightness and +28 for contrast, and one for levels which we’ll set to 15, 1.00 and 246 for the 3 input boxes.

Step 5

Let’s give some pop to the girl and add some lighting. Ctrl+click on the original stock layer to create a selection around the girl, then on a new layer, grab the brush tool and using varying sizes and the flow set to around 24%, begin brushing areas you think would look good with some white light on them. Then lower the opacity to around 15-35%.

Step 6

Give the piece some instant energy appeal by adding some diagonal stripes in the form of random geometric selections filled with a pattern. Create a new document 40 x 40 pixels and create a shape similar to the screenshot on the left below, make the background transparent then Ctrl+A and go to Edit>define pattern. Now back to your main document and create some random geometric selections with the polygonal lasso tool and Edit>Fill them with your pattern. Keep them in the direction of the energy of your person in the piece and make some black, some white.

Step 7

Time to add some big bright coloured shapes to get this piece moving. Again with the polygonal lasso tool, create some big geometric multi-sided shapes, and with the gradient tool set from red to yellow, fill your selections and position/transform until you have a nice arrangement. Place them above or behind the diagonal striped shapes, whatever you feel looks good.

Step 8

Now start to layer it up by adding lots more shapes of various sizes over and behind the girl. Do what we did in the last step by using the polygonal lasso tool and create sharp shapes. Fill some with a black to white gradient, others with a yellow to transparent or red to transparent, play around with it until you’ve padded out the illustration with a nice amount of shapes.

Step 9

Looking good? I thought so. Now let’s get some detail worked into this piece. To do this lets create some shards to enhance to energy of the piece. Grab the polygonal lasso tool again and create a small angular shape, hold down shift and create another. Repeat this several times until you have a bunch of shapes. Then fill them with black/white and position. You could also use the pen tool, but in this instance the lasso tool is better as the shapes will feel more erratic and unplanned, which is what we want.

Step 10

Time to develop the piece some more. Grab the polygonal lasso tool (yet again) and create some more selections, but keep these quite square and not as sharp to provide some contrast to the other shapes we created earlier. Fill with black and apply a gradient overlay with the settings shown in the screenshot below. Notice the effect on the girls arm, it’s now showing through as a solid shape because of the lighting we added to her in step 5. So place a shape behind that layer so it shows through, also feel free to create this effect with other body parts of the girl.

Step 11

For some added energy, flow and detail we can add some thin lines to the image, both over the top of most layers and some right in the background. So grab the line tool and set it to 2 pixels wide, on a new layer start drawing some lines in the direction of the rest of the shapes, don’t go too crazy with them though, keep them subtle. Now make the line tool 1 pixel wide and on another new layer draw some more lines, almost as if the lines are fragmenting.

Step 12

To further enhance the energy let’s create some light streaks. So create some more thin sharp shapes and fill them in white. Go to filter>blur>motion blur and make the angle the same as the angle of your shape, with the distance set quite high to around 4-500. Duplicate and arrange some shapes and play with opacity and blending modes for more interest.

Step 13

The image is now looking great but it’s not quite complete, it needs some finishing touches. So create some more particles with the pen or lasso tool and fill them with white and position them behind most of the layers. Also create some larger shapes with subtle gradients and overlay blending mode to give off a nice look, position them as you’d like to achieve a nice balance. I’ve marked out where I’ve added some extra shapes to using selections in the screenshot below.

Step 14

Almost there, and to make things abit more dynamic for some of the shapes. Grab the brush tool at a size around 900 with the flow set to around 15-20%. Gently brush onto areas to lighten it up, be very subtle with this though as you don’t want to kill it. Then lower the opacity to blend it in nicely.

Step 15

For the finishing touch well, you may not be a fan of textures but I am, and for this piece it will work really well. Find a high res paper texture like the one in the screenshot and drag it above all layers in your main document, scale it up to fit if needs be and set the blend mode to color burn with opacity at around 40%. This makes the colours really come to life and makes the image more moody.

Step 16

So there we are, check the finished image below! With images like this, there is a minimalist route and a more chaotic route where we could have kept on going adding more and more shapes. But in this instance we’ve settled for something in the middle with a really nice balance.

The tutorial was created and written by renowned artist Mike Harrison