One of the best parts I like about making a piece in Photoshop is not necessarily the outcome but the process it takes to get to it. I learn a lot when I can visualize somebody’s progress in creating a graphic. I always enjoy seeing work in progress because it shows you that the skills to make that piece aren’t complicated at all and art is really all about visualizing and experimenting.

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.

And so I stumbled over this link when I was searching on youtube for some nice animation like last monday’s post and I was just shocked by how intriguing and talented this person was. This video was taken from a Ukraine’s version of “America’s Got Talent“.

Not only she used sand as her medium for painting, but she also makes it flow in the way that she tells a story. Kseniya Simonova gives an interpretation of Germany’s invasion and occupation of Ukraine during WWII. I enjoy art like this where it’s so multi-functional in how the art is played out. As long as we have creative people thinking outside the box, art is truly a phenomena.

http://www.youtube.com/watch?v=vOhf3OvRXKg

Enjoy the video, and make sure to join us next week for our Mundane Monday inspiration segment. Make sure to follow me on twitter, join me on facebook, and subscribe to my RSS.

A long time ago when I had my first blog, I came along this video on youtube that came from a student Savannah College of Art and Design. His senior project consisted of using Post-It Notes for his animation. You might have seen it, and it’s been popular across the blogs and other art sites, but I just have to give it another shout out for the hard work of Bang-yao Liu. I just love watching inspiring things like these.

I hope you enjoy those videos.  More inspiration coming soon.  I’ll try to make it a Monday weekly thing, so all of you have something to start off your mundane monday with.  So tune to my blog every monday for something inspiring to start your week off.

If you guys have any inspirational links or ideas, send them to me via twitter or email.

Finally decided web design and development is the path you want to take?  Now you may ask yourself, where do I start?  Based on my experience, I will give you a list of tools that I use for all of my works.  In addition, this list has alternatives for those that can afford the price or for those that need something quick and free.

So you already picked web design and development as something you want to do in the future, or maybe you just want to pick a hobby to pass your time away.  Either way, there’s always a few tools or resources that everyone needs to complete the job.  And in most cases it would be the same tools or just different versions of the tools that do the same thing.  When starting web design, the process ultimately comes down to 5 basic steps.

1.  Designing the Template
2.  Slicing the Template
3.  Coding the Template
4.  Filling the Content
5.  Final Clean-up

I will eventually go over those steps in future case studies and tutorials.

For now, we should concentrate on the tools that help us with those steps, and without further ado, here is the list of web design tools you should have in your arsenal.  If you have any other recommendations, feel free to comment below and share them.

Designing the Template

For designing a template, you need a graphics editing program. A program that can make gradients, boxes, shapes, etc… Here are the list of tools that I recommend.

1. Adobe Photoshop

Probably the most popular image editing program would be Adobe’s Photoshop line. The current version is Photoshop CS4, and may I add that it is quite expensive. However, the saying goes, you get what you paid for, and certainly after dishing out the money for a license gives you one of the world’s greatest editing program (sounds very exaggerated, but really, it’s that good). Photoshop is great not only for web design but for other fields and careers such as the art industry, photography, graphic design, print design, and pretty much anything that deals with pictures.

2. GIMP

So what if you don’t have Photoshop or the budget to afford it? GIMP is probably your next best bet. It has layers like photoshop, and a few other features. When I first tried GIMP when I was looking for other options since I couldn’t get my hands on Adobe Photoshop, I first thought the interface was really confusing (compared to Photoshop). However, lo and behold, someone has made a plug-in for GIMP that makes GIMP’s interface just like Photoshop which is very useful for those that may have to downgrade from Photoshop.

3. Need more options?

I recently stumbled over a post that I thought may be more helpful for others, and of course, I’m not into the whole copy and pasting other people’s hard written blog posts, so here are 19 more free image editors that you may like. Visit the site and see if there’s anything in there that may help you. There’s also more programs in that list that go beyond the tools needed for web design.

Also a reminder, you can slice your template with your graphic editor as well. No need to get a separate program for that.

Coding the Template

After you have your template designed whether it be a simple portfolio site or a complicated e-commerce site, it’s now time to code it. If you just want the most basic thing on the earth to code, then your computer already has it. Notepad. Since coding is just a language, all you need is a text editing program and you’re good to go. I would refrain from using editors that automatically format like Microsoft Word since they tend to add a lot of weird formatting that may conflict with your coding. Notepad, Wordpad, things like that is all you need. However, what if you would like some help with your programming or perhaps a more visual look to your code?

1. Notepad++

Notepad++ is a great editor for coding. It supports multiple languages and highlights certain syntax code words so it is easier to spot a mistake if you make one. It also has tabbing so you can open multiple files, and one of the good features I like about it is when you open it, it opens the last couple of files that you worked with on your last session. Very handy when you accidentally close it, or figuring out the next day on what you have to work on next. There is A LOT of features on Notepad++ that I don’t even use, but perhaps you will find a use for them sometime, or simply forget about them like me.

2. Scite

Scite is another text editor that I use a lot. I interchange with either programs. Honestly, there’s no difference except Scite doesn’t automatically open files in new tabs and it doesn’t save your last known session. However, it’s a lightweight program, that’s really nice to have.

3. Panic Coda

Since I’m also a Mac user, I can’t forget to give this program some credit. Panic Coda is probably one of the greatest code editors for the Mac right now. It is costly, starting at $99 but the price is worth it in my personal opinion. Although there’s a lot of alternatives, this is probably the most user friendly. You can connect to your files with your FTP information, upload, save files instantly, edit your files there, and even preview them. Very handy.

4. Mozilla Web Development Plug-ins and Add-Ons

Another method of editing code and seeing how it works would be using Mozilla Firefox’s plug-ins and add-ons. I’ve already listed some really good plugins for web developers in a previous post. Using those in combination with text editors to save to your ftp will result in faster coding. It may be quite obvious, but I’ll make sure I show you guys my process in editing code in a video cast later.

Other Useful Tools to have

There’s a lot of extra tools you might need to finish your development or make your design much more efficient. One important tool would be an FTP client. There are tons of FTP clients, and I’ve tried many of them and pretty much they all do what is needed for the most part. Some may have extra features or fancy interface, but all you need is a client that connects to your server or the client’s server, and you can upload and download from it. My favorite FTP programs would have to be either FireFTP which is an add-on for Firefox to use an FTP right in the browser or FileZilla which is a standalone client and supports multiple connections.

Here’s a link as well to even more web design tools you may or may not use, but personally here is my final list of web tools that are good for starters.

Since I use both Mac and PC, I’ll put what I use for both.

PC

1. Notepad++ (Text Editor)
2. Filezilla (FTP)
3. Mozilla Firefox Web Development Add-ons – Includes Firebug, Web Developer, etc..
4. Adobe Creative Suite CS4 (Photoshop, Flash, and Illustrator)

MAC

1. Panic Coda (Text Editor/FTP in one)
2. Filezilla (I use it sometimes for faster uploading)
3. Mozilla Firefox Web Development Add-ons – Includes Firebug, Web Developer, etc..
4. Adobe Creative Suite CS4 (Photoshop, Flash, and Illustrator)

Alright, so that’s definitely more than 10 and of course there may be better programs out there.  I wouldn’t waste my time with getting the advanced programs.  Wait until you’re comfortable with coding since the more you know, the more you’ll be able to use the extra features.  So don’t waste your time trying to research it all out. I’ve already done it for you. Come back for more case studies and resources for beginning web designers.

P.S I’d like to thank those that contributed to my comment and contribute for Haiti entry. A total of $5, but I’ll throw in another $5 to make it an even $10. I’ll do the transaction tonight and will post an update to that post later tonight. Thank you for your cooperation, and stay tuned for more ways to participate and even win some prizes.

Everyone has their little group of designers that they like to follow around and get inspiration from.  I decided to share some of my favorite artists and their pieces to give you guys some inspiration or  more places to go to look for some.  I don’t take credit for any of their works, and all of them are copyrighted to their respective owners.  Enjoy.

Pete Harrison

Nik Ainley

Justin Maller

Jeff Huang

Heiko Klug

Vina Nguyen

Conclusion

I hope you enjoyed the works, and please visit their sites to see the rest of their works. Share your inspirational artists, and I’ll check them out. Please comment below. Check out my twitter for upcoming tweets on some more inspirational resources.