Colour Adjustment Commands in Photoshop – Colour Collage

Computer, Digital Art, Editing, PC, Photoshop, U4_U37

In my Graphics class, I did an exercise that required me to experiment with the various colour adjustment commands in Photoshop. I had to find an already existing image that had a lot of colour in it to work with and edit.

Colour Adjustment Commands exercise BEFORE ND AFTER

The original image on the left is actually a cropped image of a photo taken by Davinsky on deviantART. I chose it because the umbrella display was very colourful and would be a good image to edit and play around with.

Before I opened the photo in Photoshop, I created a new canvas to work with that was split into even squares that would be easy to work with. I hit Ctrl + N on my keyboard to create a new canvas. In the settings, I set the dimensions to 10cm x 10cm with a resolution of 300 pixels/inch. I also set the colour mode to CMYK instead of RGB before clicking OK.

Once that was done, I created a grid. I did this by going to ‘Preferences’ under the ‘Photoshop’ menu tab at the top-left and clicked on ‘Guides, Grid and Slices’. I adjusted the grid settings to: Gridline: every 2 cm and Subdivisions: 1 and clicked OK. Once I finished editing my grid settings, I went to ‘Show Grid’ under the ‘View’ menu tab, as well as clicking on ‘Grid’ under ‘Snap To’. This will not only show my grid, but when ever I select a certain area on the image, the cursor will automatically snap to the gridlines. This will help avoid the trouble of selecting inaccurately when I edit the sections later on.

Screen Shot 2014-11-06 at 10.25.17

Once the canvas is ready,  I opened the image of the umbrellas and copy and pasted it into the new canvas. I adjusted the size by cropping it and transforming it so that the image filled the entire canvas. When rescaling it, I held down the Shift key to keep the aspect ratio of the image and avoid skewing it.

Before I did anything else, I created a new folder and called it ‘Adjustments’ to organise all of my edit layers into. This will make it easy to view and hide all the adjustments I make along the way.

Once everything was ready, I got the Rectangular Marquee Tool and selected a square in the grid. I then copied and pasted that section onto a new layer, isolating it. I put that layer into the ‘Adjustments’ folder and (whilst making sure I still had that particular layer selected,) then went to the Adjustments section above the Layers box to see how I could edit this particular section.

Screen Shot 2014-11-06 at 11.30.38

The various icons here show the many different ways of editing and adjusting your image. If you hover you cursor over an icon, it will tell you the name of the function. For example, if I selected the ‘Photo Filter’ icon, a drop box will open next to the ‘Adjustment’ section showing all the scales and drop-box options of that particular function. Before I started to change the settings, I clicked on the small icon at the bottom on the very left. This will clip the adjustments to the layer below it so that it only effected that particular layer, not the whole image. I played around with the settings quite a bit until I was satisfied with the preview on the image and left it.

Screen Shot 2014-11-06 at 09.53.46

I continued to do this for the rest of the squares using different filters and tools in the Adjustment box, seeing what effects I could make. (Posterize, Brightness and Contrast, Hue, Levels, etc)

The final collage came out like this:

Colour Adjustment Commands exercise



Website Wire-framing and Mapping – Design drafts and sketches

User Interface Design, web design, Website Design

For my Website Design class, I’ll be making a personal website with a portfolio of my art. This will be very useful for when I apply to any Universities or jobs in the future, and it will be a great way to show my work. Recently I’ve been sketching up some wire-framing and maps for my website.

Here's my brainstorming page for my website.

Here’s my brainstorming page for my website.

I first created a brainstorming page in my sketchbook to note and jot down my thoughts and ideas. It probably could have been done more neatly, but at the time I was still trying to figure out what I wanted on my website and what I didn’t. I would organise and modify my initial designs and go into more detail later on.

An in-depth site map.

A redrafted version of my site map.

After brainstorming, I turned to a new page and developed my site map. The idea was to have four pages including the homepage. I wrote down the content and widgets that each page would have, as well as navigational buttons.

Scan 1

Here are the second designs for my pages, excluding my homepage design.

The portfolio page was inspired by OMOCAT‘s portfolio page, but after some drafting I realised that the spacing of the gallery widget wasn’t very effective unless it took up the width of the page. So I decided to redesign the page.

These are my third designs of my webpages. They're more detailed and in-depth.

These are my third designs of my webpages. They’re more detailed and in-depth.

Here’s my final design for the homepage and portfolio page. I’ve changed the gallery widget to just a thumbnail grid format. To enlarge the thumbnails, the user will click on the icons and the icon will expand into the full size image on the page, with navigational buttons on the side to go to the next or previous image.

Scan 5

About and Contact page designs.

The About and Contact page remained pretty much the same. I just cleared and neatened up the overall layouts of the header, background and footer to the pages as a whole to make sure that it was all consistent, neat and easy to understand.

Using the Select tools in Photoshop – Sci-Fi movie poster motifs

Computer, design, Digital Art, Editing, Photoshop, Poster Design, U4_U37

Some of  the first tools that were introduced to me in my Digital Design class were the various Select tools. Our task was to use these tools to help create some print designs for our Sci-Fi poster assignment. The designs had to incorporate examples of classic Sci-Fi motifs such as UFOs, aliens and space related images and should be simple enough for it to be converted into a screen-print design. The purpose of the poster was to advertise the BFI Sci-Fi Film Festival which was coming up, but they weren’t our real client.

robot screen print

One of my Sci-Fi designs that I edited using Photoshop. I then chose this design to screen print.

Firstly I went on Google Images and searched examples of a simple robot to find inspiration and get a good idea of what I want to edit. Then I found an image and opened it in Photoshop.

Screen Shot 2014-10-23 at 11.37.53

I then created a new layer on top of it and a layer below it. I filled the layer below with white using the bucket tool. This would act as a background layer.

Screen Shot 2014-10-23 at 11.41.08

I set the robot reference layer’s opacity down to around 30% so that I could easily see where the cursor was when I began selecting the outline with the polygonal lasso tool and ellipse tool, holding down the Shift key to select a perfect circle. I switched between the Shift key and Alt key when using the polygonal lasso tool in order to add and edit my selection. Once I selected the areas that I wanted to make into a basic silhouette, I went to the layer above the robot reference and filled in the selected region in black.

Screen Shot 2014-10-23 at 11.44.12

Screen Shot 2014-10-23 at 11.43.23

I added and took away some details that I wanted and didn’t want. For example, I added striped to the robot mouth and made the black outline gaps in my silhouette to define the features like the arms and headphone-like shapes. Once I was satisfied, I hit Ctrl + D to deselect my selected area and hid the robot reference layer underneath my silhouette to see the outcome.

Screen Shot 2014-10-23 at 11.45.20The design had to be black and white and fairly simplistic because I was going to screen print it later on. I sent this final design to the screen printing room to get it exposed onto a screen with photo-sensitive emulsion. Of course, I wasn’t allowed to do this actual part myself as a student – so it was given to one of the staff members to expose. Once it was ready to print, I went to the screen-printing workshop room and got printing!

I also did other designs as well as a robot to use later on when creating ideas for the poster composition.

Screen Shot 2014-10-23 at 11.59.11