What is the purpose of “Redesigning”?

The main purpose of a redesign is to be hip, or be “trendy”. If you see your competitors with new looking sites that are very visual and has a lot of functions, then surely in this generation, people are most likely going to view that site. And so, people/companies feel the need to update themselves so they can be in competition with everyone in addition to making their new site fit their brand and style as well as attending to their audience.

Sometimes people redesign in order to include a new addition to their community. If you run a ice cream store that recently acquired a cookie company, then most likely you want your site updated to match your new company.

Redesigning is a great thing to do to put a new life on an old site and give yourself a new image as well as giving your audience something to stare at.

Why design when you can replace/reuse?

What’s the use in designing when you can simply replace and reuse some old content, or old framework. It’s much easier and faster to redesign over something than to completely start from scratch. With this in mind, you already know what works, what doesn’t, what fits, what’s going to be a pain to code, and finally, you’ll know if it looks good since you can use the old site as a base.

As you may have seen on this site, there isn’t anything new other than a new background, the navigation moved down, and some shadows here and there. It’s the same site structure, but completely different look. Most people find it hard to design something new when in reality they can look at it in a different perspective and think of it as a redesign.

Redesigning in a Developer’s Mindset

The magic behind redesigning is the fact that you should keep the coding in mind at all times. When redesigning, you want to imagine how it’ll replace the code. Do they need to add something complicated, or can the extra pictures be just an extra div? As a designer and developer, it’s very easy for me to know and estimate how easy it is to code the new design and how complicated it’ll be because I’ve built the original base.

Redesigning in a Designer’s Mindset

When a designer tries to redesign, sometimes they don’t think about things like existing content, coding structure, etc… When they are told to redesign, they are opted to completely redesign it in order to surprise and give a whole new look. Pretty much a complete makeover. This leads to problems as it extends the coding process to a much longer period of time and not to mention a few graphical problems that may not be easy to fix with coding and so the redesigning process may have to be fixed.

Case Study: Soshified

Let’s look at this wonderful transition.

Soshified is a community forum based off a Korean female group called So Nyuh Shi Dae or SNSD for short. Originally, they’re design was simple at first. I can’t exactly remember what it was, however, the main thing, is they built it off from Invisionboard’s main framework which probably looks similar to this:

And their new redesign looks like:

Definitely a lot of features added than the normal look. Again, I’m not sure of their original layout so those features were probably already made, and they simply redesigned over it. From a normal person’s perspective, I’d think this was a whole new site and not an Invision board. And so remember, platforms are platforms. They run the site, but definitely not all looks the same. They may be structurally designed and layout the same, but the tip to redesigning are colors, placement, typography, and details.

What’s the verdict?

Was this completely coded from scratch and had a lot of problems, or was it a simply redesign pertaining to a few guidelines. That mystery will always be held by the designers and developer themselves.

Fooling the Audience (Clients)

And so designers/developers aren’t just designers and developers. The major talent that I believe we have is the skill to make an impression on the web whether it be a simple thing or a complicated thing. Not many people will know whether we took 5 minutes to do it or 5 hours to do it. In the end, it’s the end product that matters, and if it’s what people like, then our goal has been reached.

Final Result

Here’s what you will be making at the end of this tutorial (maybe not exactly, but the shape in there will be made):

You’ve probably seen these shapes quite often, whether it be my portfolio or in general designs out there. They are pretty trendy and add a lot of decoration to a design. When used right, the colors can be a great addition to a design and add that sense of abstractness.

Let’s set up our canvas. You should be able to do this with Photoshop CS and up. (maybe even Photoshop 7, it’s been a long time since I used that so I forgot whether it had custom shapes or not)

Step 1 – Setting Up Your Canvas

I always like to make a new canvas that’s 500px by 500px for all of my testings and experimentation when making shapes or brushes. It’s enough space to mess around with, and it’s not too small.

Step 2 – Setting Up Your Tools

The next step is to set up the custom shape tools so that you’ll be able to make your new custom shape. The settings I have are pictured above.

I turned Shape Layers on so that I can see the shape with color. And since this is our first shape it’s automatically defaulted to Creating a New Shape Layer. So pick the circle shape and let’s make our first circle.

Don’t make too big of a circle since you’ll need the space to add additional shapes.

Step 3 – Adding Multiple Shapes

While your circle is still selected (you’ll see a little ring around it), change the option of the custom shape tool to Add to Shape Area (+). From here, you can just have a free for all in making circles just like the picture below.

HINT: You don’t have to necessarily switch to that custom shape option. Rather you can hold shift, and your cursor will have a little plus sign similar to the cursor when you choose that option.

Step 4 – Subtracting From Your Custom Shape

Sometimes you may have added too many shapes, or you want to give your shape some interesting cuts in it. By choosing the Subtract Area (-) option, you can make shapes that will cut/erase your current shape like below.

It may look a bit busy, but if you wanted to see how your shape looks like without the pen lines, you can just hide them by pressing Crtl/Cmd+H.

Step 5 – Defining Your Custom Shape

After you finishing make your shape, select the pen tool from your tool bar or press the Photoshop shortcut key “P” and right click on the shape. You will see the option to “Define Custom Shape…”

After you click on that, name your custom shape and press “Ok“. You now have a custom shape. To access this custom shape, go to your custom shapes menu and look for it. Usually, newly created ones will show up last on the list.

And now you can use your shape as many times as you want, and even resize it without losing any pixels because it’s not rasterized yet.

Here’s my result after messing around with the same shape. I flipped it, I duplicated it, I rotated and changed it’s colors.

You can do a lot by making your own shapes. You’re not even limited to circles. Use other shapes, or even use custom shapes you’ve already made. The sky’s your limit on this one.

Conclusion

Thanks for looking at my tutorial about creating abstract custom shapes for Photoshop. If you have any questions or confusion, comment below and I’ll get to them. Show off your results as well here, or share a link.

Walk in the Park was probably one of my first pieces that I experimented fully with the use of stock photos and using the mask tool in Photoshop. I never knew you can blend in photos in that way so that they look seemless and natural (to an extent). Here’s my WIP on Walk in the Park (and also some notes on what I did).

The Concept Behind Walk in the Park

The main concept to this piece was to show how a unity between 2 people can bring life to their world. Hence you see the couple walking out of this black and dull city and into a colorful peaceful “island” with flowers, water, and more. This piece was created for Vina.

Initial Study and Preproduction

In order to convey my message, I had to gather stocks. And so I got most of my stocks through stock.xchng and from other free stock photo sites. My general process in this stage is to collect as much as I can that I think are usable. I got stocks of skies, clouds, mountains, rocks, water, beaches, couples, flowers, etc… If I think I could use it, I downloaded it. As to most people, this might be called the preproduction stage. You gather all your needed materials to start off your production.

Work in Progress – Screenshots

Step 1

1. I started off with my city. I had a good black and white stock of buildings (Figure 1.1), and basically I duplicated and positioned them around so I could form an island-like landscape (Figure 1.2).

Step 2

2. I placed in my mountain stock and masked unneeded parts. As you can see with Figure 2.1 the original picture of the mountain had a lot of things to it. And so I masked around it along with the other stocks to make it like Figure 2.2. In addition, I added and masked more pictures of that black and white city.

Step 3

3. I began to work the background by adding a sky. It was simply a gradient and then I brushed around with a grayish blue brush and set it to multiply to sort of mimic clouds.

Step 4

4. Following the same process as step 2, I had pictures of green forests and grasses, and I scaled them down to fit on the rocks. I set the layers to hard light, and they seem to work best for me. I duplicated them as well to make it more vibrant and green. You can also see me putting flowers in there as well.

Step 5

5. I messed around with the sky more and added some stocks of clouds and set them on overlay and screen to get the sky to be more bright. I picked out the picture I wanted to use for the couple and embellished that area with a rainbow (using a circle shapes and put a rainbow gradient with blending options) and also some bubbles. I also made the water bluer by painting a layer with a blue brush and setting its blending mode to “Soft Light”.

I also started my typography work since I wanted to make it a part of the piece rather than something slapped on at the end. Simple text with a gradient on it, and I brushed around to make it more fitting into the water.

Step 6

6. From here, I decided to change it up a bit and mess around with colors. I added a Sepia Toned Gradient Map and set it to multiply and added a Curves layer to increase the brightness a bit.

Step 7

7. One of my favorite things to do and I guess you can say it’s my style is that I always like to introduce shapes into my pieces. They add that piece of abstractness to a graphic and can give some great color, flow, and composition. From figure 7.1 and figure 7.2, I simply added more shapes. Some of them I made with the pen tool, and the other shapes are part of my Custom Photoshop Shapes that I made a while ago.

Step 8

8. At this time, I like to experiment with brushes. I had some brushes that I downloaded from deviantART or some other places (If you happened to make the brush, let me know.) And also I’ve used some brush sets that were made by Vtension. Her wireframe brushes and various shapes packs were the ones I used in this piece. Check out her blog for more brush resources.

TIP: Remember that you can mask pretty much anything. Sometimes brushes and shapes may not be good unless you mask out the parts that doesn’t fit into the piece.

I also added more shapes to add more to the piece. I also find myself doing more than what’s needed, but at this part of the piece, I eyeball what looks good to me.

Step 9

9. And finally, more brushes, and I added some fireworks stocks set to screen blending mode to put some particles into my piece. I touched up a few things here and cleaned some mess with masks and added a gradient map and photo filter. I cropped it a bit and added black bars on top and bottom. After all of that, my piece is finally done.

What Happened and What I’ve Learned

Basically I learned that it takes a lot of patience. You have to take the time to mask things accurately so that the photos can work together. You have to take the time and experiment with brushes and shapes to decorate the piece, and you have to also test out a lot of settings when creating your color scheme in the piece. Everything has to be in consideration, lighting, composition, colors, typography, and overall your idea.

Conclusion

Thanks for viewing my first WIP. If you have any questions specifically on this piece, I’ll be happy to answer them. Leave a comment and I’ll reply to them. I’ll have more WIPs in the future so make sure you follow and subscribe to see my updates.

It was supposed to be for New Years (January 1) in general, but I had some complication in not finishing it. With the inspiration (from her) to do something in Photoshop, I decided to make this for her.

Happy Valentines to you, Vina.

Thanks again to everyone following me on twitter, and subscribing to my feeds. In terms of what you can expect is a nice documentation on making a Wordpress theme which will also be converted into a PDF for people to download, and also continuing my HTML/CSS tutorials for the beginners.

Design galleries are very popular these days.  Perhaps way too popular.  It seems like every so often you will see sites similar to these that pop out of nowhere, and they would either be the same category, or something different.  Regardless of it being trendy, overused, and abused, I have to admit that these design galleries make it so much easier to gain inspiration, references, and you can also learn from them and enhance your skills in design.

Here are two galleries, that I personally use for inspiration and ideas.

Creattica

One of my favorite galleries that I always visit for inspiration for things like logos, business cards, and Photoshop work would have to be Creattica.  Creattica contains all different type of graphics from logos to even flash work.  The gallery also features a section where anyone can upload their work to the site and get featured once it has been cleared by the administrators.  You can also sign up and rank other people’s work.

As a result, this gallery site can turn into a place to get critiques and help from others.

Inspirationti.me

Inspirationti.me is a very unique site.  One of the first things that really got me to remember this site was the domain name.  By having a .me instead of .com, it’s very easy to remember since it spells out “Inspiration Time“.  This gallery site is geared more towards web design.  The examples they show at the site helps me a lot to pick the sites that I like to use for inspiration since it saves me time without having to click on every link to see the site.

With the gallery being nicely categorized such as icons, huge typography, and even colors, it’s easy for anyone to search through the site to find the inspiration you need.

Design galleries are great to have in your arsenal.  There are many out there that cover a variety of categories: Web Design, Icons, Fonts, and Illustrations.  In the near future, I will be releasing one as well.  I’m not exactly sure what it’ll be about, but I’ll be making the addition when the time comes.

I hope you enjoy this week’s Mundane Monday, and that you will collect all these inspirational resources into one archive to have one powerful library of references.

If you have any galleries that you like to share, feel free to comment and share the link.