Adobe Illustrator Basics

Adobe Illustrator CC, app design, Book Sleeve, design, Digital Art, Editing, Photoshop, U62_U63

I began learning how to use the various Pathfinder functions in Illustrator CC and how I can create, merge, cut and edit basic shapes to create more complex ones.

Illustrator_Pathfinder_IRASUTORAITAA_HAJIMEMASHITEEE-01

The Shape Mode functions include Unite, Minus Front, Intersect and Exclude. These functions allow multiple shapes to be either cut away or merged together to become another compound shape.

Pathfinder

The Pathfinder tools are Divide, Trim, Merge, Crop, Outline and Minus Back. These tools help separate shapes from each other, dividing them across their outlines to create cut-off pieces that can be edited to become their own shape.

 

Advertisements

Photoshop – Matte Painting Background

2D animation, Animation, Digital Art, Editing, Photoshop, U3_U53

I learnt how to paint a background with the help of photo references and Photoshop. I used the basic tools such as the brush tool and eraser tool to paint most of the scene in. I also brought in textures and images from online and set their layers to Overlay and Multiply to help with giving the painting more realism. I also adjusted the overall tone of the painting by going to Hue/Saturation.

Screen Shot 2015-06-18 at 14.38.25

matte painting exercise

Fantasy Staff Promotional Flyer: Design 3

3D, advertising, design, Digital Art, Photoshop, promotional flyers, U34_U51

For my third design, I chose a photo that I took by the coast from when I went location shooting.

This one in particular was really appealing to me because the sky and ocean horizon gave a sense of wonder and adventure. The strong sunlight also gave me the idea of having the staff as a silhouette against it.

Promotional Flyer Design 3 screenshot 1

I opened the photo into Photoshop and resized it appropriately with the Transform tool. I held down the Shift key as I did so to keep the proportions correct.

I copied and pasted my staff into the file and adjusted it with the Transform tool. I often used the Mac keyboard short-cut Cmd+T to transform things.

Then, I moved it so that it was placed directly in front of the light to create a sort of silhouette. I then edited the Eraser tool so that it was softer and erased the lower parts of the staff to give the illusion that it was standing in the grass.

Promotional Flyer Design 3 screenshot 2

Now that I had the staff and photograph in place, I adjusted the Brightness and Contrast to get a clearer image before moving on.

Promotional Flyer Design 3 screenshot 3

Then I applied some precise shadows to the staff to give a better sense of depth. I used the brush tool and worked a new layer that was set to Multiply.

I also right-clicked on the layer and selected Create a Clipping Mask so that everything that was drawn onto this layer would only show up on top of what was underneath it. This stopped the shadows from unnecessarily going outside of the staff.

Promotional Flyer Design 3 screenshot 4 STAFF SHADOW

After that, I moved onto making the highlights of the staff. Because of the light source behind it, I decided to give the staff a sort of halo effect by adding a simple large highlight over the entire staff on another clipped layer.

I used the Brush tool as a big airbrush and very carefully painted on top of the staff. I set the new layer to Linear Dodge (Add) to make the yellow look more luminescent against the staff background. Because the layer was clipped, the highlight only applied itself to the staff layer directly underneath it, leaving the rest of the photo unaffected.

Promotional Flyer Design 3 screenshot 5 HALO

Once I had completed the highlights, I also made a vignette shadow around the edge of the image to help with the text later on. Because I still wanted to use white coloured type, I had to make it clearer to read against the light blue sky in particular. So I added some shadows around parts of the image to help darken those areas and also to help make the direction of light more obvious. I lowered the layer’s opacity to make more subtle.

Once I was happy with the shadows, I added the text in. Because the mood and theme of this design was more brighter and lighter than the previous two, I decided to adjust the title font a little. I chose Cambria because of how clean and clear it was for a serif font. It matched the atmosphere of the sky behind it – plain and simple, yet still appealing.

Promotional Flyer Design 3 screenshot 6 TEXT

I didn’t add any glow or outline to it because it was already very bright and delicate, and also because it would ruin the simplicity and neatness of it.

Lastly, I added in the product details and logo at the bottom. The dark grass behind it made it easier to see than the sky above, so I didn’t need to do too much editing here.

Promotional Flyer Design 3 screenshot 7 LOGO

Here’s the final:

fantasy staff promotional flyer 2

Fantasy Staff Promotional Flyer: Design 2

3D, advertising, design, Digital Art, Editing, Photoshop, promotional flyers, U34_U51

I decided to make this one landscape to play around with the layout and composition. It made the overall design more interesting and allowed room for me to show a close-up of the staff’s main details.

I took the photo by a river originally, but I really liked the bokeh-styled photography and thought it would compliment my fantasy staff really nicely without overpowering the overall design too much.

I copied and pasted my fantasy staff in, this time with a close-up of the staff’s head so that there was more focus on the textures and details, rather than the overall shape and form.

Promotional Flyer Design 2 screenshot 1

I went in with the Transform tool again to position and resize the staff.

I adjusted the Levels on the overall image to give it some darker and more defined contrasts.

Promotional Flyer Design 2 screenshot 2

Then, I added a soft glow to the crystal gemstones on a couple of new layers set them to Linear Dodge (Add) and Soft Light. I adjusted the Brush tool to get a soft airbrush effect with a light lilac.

Promotional Flyer Design 2 screenshot 3

Promotional Flyer Design 2 screenshot 4 LIGHT PARTICLES

After finishing the image editing, I went on to add the text in. I used the same typeface as the previous design, keeping the glow on the title text to make it really stand out against the night sky.

I also changed the tagline so that it suited the context of this design more appropriately.

Promotional Flyer Design 2 screenshot 5 TEXT

I kept the product description and small print details the same to keep consistency.

Lastly, I inserted the branding and placed it in the corner of the flyer to not let it obscure the main design.

Promotional Flyer Design 2 screenshot 6 logo

Here’s the final:

fantasy staff promotional flyer 3

Fantasy Staff Promotional Flyer: Design 1

3D Design, advertising, design, Digital Art, Editing, Photoshop, promotional flyers, U34_U51

For my final promotional flyer design, I had to create three examples of it using Photoshop.

I used the .png files that I had saved from my previous post in Cinema4D and opened them in a new A4 Photoshop document.

Promotional Flyer Design 1 screenshot 1

I used the Free Transform function to rescale the photo to fit the canvas. I also had to crop some edges off to frame it better.

I then did some basic adjustments on the on the photo before composing the .png file of my fantasy staff that I had saved in Cinema4D.

Promotional Flyer Design 1 screenshot 2

Here I adjusted the Brightness and Contrast to make the photo a little clearer and more distinguishable.

Promotional Flyer Design 1 screenshot 3

I then copied and pasted my fantasy staff into the document and used the Transform tool to scale, rotate and position it so that it looked like it was leaning against the side of the door.

Creating the shadow for the staff was a little tricky because using the Drop Shadow function would only make it look like it’s floating from the photo which was not what I wanted. So I ended up duplicating the staff layer and colouring it all black with the opacity locked. I then set the layer mode to Multiply and went to Filter –> Blur –> Gaussian Blur to soften the shadow.

I then went into Filter –> Liquify and made the brush large so that I could move areas of the shadow to make it look like it was on the stone wall around it.

Promotional Flyer Design 1 screenshot 4 shadow

Promotional Flyer Design 1 screenshot 4 shadow 2

I used the Liquify tool to move the shadow so that it wasn’t sitting unnaturally against the background.

I then added the glow on the gemstones and the light particles surrounding it by creating a new layer and setting it to Lighter Colour. I then set the Brush tool to an airbrush setting and went in with a light aqua blue. I varied the opacity and size of the brush as a went along to give a feeling of depth.

Promotional Flyer Design 1 screenshot 5

Promotional Flyer Design 1 screenshot 11 light particles

I then created a vignette border to bring more focus to the source of light coming from the product. I created a new layer and set it to Multiply and used a very large airbrush to go around the edges of the canvas. I lowered the opacity a little so that it wouldn’t be too obvious.

Promotional Flyer Design 1 screenshot 6

After that, I played around with the overall Levels adjustment of the document to help bring more contrast and definition to the piece.

Promotional Flyer Design 1 screenshot 7 Levels

Once I was happy with the composition, I added the text in. I wanted something that was modest, but modern to contrast the setting a little. I chose the colour white because it really stood out from the dark background, making it more easy to read.

Promotional Flyer Design 1 screenshot 8 TEXT 2

I decided to have some fun with the product description and added some fantasy terminology from various MMORPG games that I had played in the past.

I gave the title of the product a glow to make it stand out even more. I also placed it at the top of the canvas to make sure that it was seen and read first in regards to the information hierarchy. The punchy tagline came next to help link the text to the related image.

Promotional Flyer Design 1 screenshot 8TEXT

At the very bottom, I typed in a little small print and threw in a fake company logo to give the flyer cover a more realistic and professional presentation.

I had to start a new document to create the logo separately. I did some quick brainstorming on a piece of paper and stuck with a design to then re-create in Photoshop.

Here, I used various tools such as the Ellipse tool and the Path tool to create the wings. For the diamond, I just edited a regular square by using the Transform function. I made it black and white so that it would match the white text in the flyer and also not overpower the main features of the flyer.

Promotional Flyer Design 1 screenshot 9 LOGO

I used the Path tool to create the shape of the wings and then right-clicked on the path to fill it in with white and stroke it with a black outline.

Promotional Flyer Design 1 screenshot 9 LOGO 2

Promotional Flyer Design 1 screenshot 9 LOGO 3

I went for a simple, symmetric design. Not only was this design modest to the flyer design itself, but it also clearly presented its own symbols and shapes to give the idea of a modern, sleek and stylish brand.

After I finished creating the logo, I thought of a fantasy-esque company name and a fantasy typeface that wasn’t too obscure and added it to my promotional flyer.

I created the trademark symbol by going to the drop-down by the Rectangle tool and selecting the Custom Shape tool. From there, I could choose the trademark shape from the edit menu along the top of the window.

Promotional Flyer Design 1 screenshot 10

Here’s the final:

fantasy staff promotional flyer 1

Example of a Promotional Flyer – Lawn Mower

advertising, design, Digital Art, Editing, Photoshop, promotional flyers, U34_U51

I took one of my previous modified advertisements for the lawn mower and edited it so that it became a proper promotional flyer cover.

I first opened the previous image into Photoshop and began adding text with the Type tool. I chose the font Stencil because it really gave a rough and bold appearance that fitted with the rest of the design and theme.

advert text screenshot 1

After typing in the tag line, I added a dark but faded outline on it so that it would stand out from the busy background and become more readable.

advert text screenshot 2

I then added the rest of the promotional text in and edited them the same way to keep consistency. I based the text off of this product’s description as they’re both lawn mowers.

advert text screenshot 3

I then thought that the lawn mower was a little too dark and almost camouflaged within the background – so I created a new layer, set it to Linear Light and picked a light lime with the Brush tool and highlighted the product. I turned down the layer’s opacity to make it not too obvious.

advert text screenshot 4

I then created a dark border around the edge to reinforce the product and make the background less busy looking.

advert text screenshot 5

Again, I lowered the layer’s opacity to make it more subtle. I then saved the image as a .PNG once I was done.

lawn-mower-contrast advert

Promotional Flyers – Complimenting and Contrasting Backgrounds

advertising, design, Digital Art, Editing, Photoshop, promotional flyers, U34_U51

Today I was given the task of finding two backgrounds that would go with various day-to-day products that will have two very different effects on them. One background will compliment the product and be set in a very obvious and fitting environment – whereas the other background will be contrasting and unexpected, making the product have a different kind of impact to the viewer.

The first object was a lawn mower.

An obvious depiction of a lawn mower in a neat and well kept lawn.

lawn mower contrast I got an image of a lawn mower with a transparent background so that it would make it easier for me to edit it into the background.

The first background of a garden is quite suitable for a lawn mower. It shows what the product is capable of by showing a neat and well-kept lawn – a fairly standard depiction of a lawn mower in an advertisement.

The second version shows a lawn mower in a jungle environment, the complete opposite of the neat lawn in the previous advert. This suggests the potential of a really powerful lawn mower. Almost as if it the lawn mower is ready to sort out the jungle surrounding it. It gives a more interesting an adventurous approach than the first background and the mood is sends to the viewer is that of a more confident and impressive one.

The second item was a hairdryer.

hair dryer compliment comp hair dryer contrast comp

The first background is used as a very common depiction of a hairdryer advert. Models are in almost every advert out there that is somewhat hair-related to show how good the product is and to compliment both the product’s design and performance.

The second background gives the entire advert a more contemporary interpretation to it. Using a completely organic and natural form to contrast with the modern and man-made item is a stark contrast to the previous advert. I took the “dryer” part of the word “hairdryer” and ended up searching for dry environments and ended up with the Grand Canyon. I chose this photo in particular because of the way the walls of the structure are so smooth, much like that of the hair in the typical hair-styling adverts. Except these smooth lines were natural, suggesting that this hairdryer could be a necessary part in creating totally smooth and natural looking hair.

The third was a vacuum cleaner.

hoover obvious comp hoover contrast comp

The first vacuum cleaner advert is set next to a background of an office with a really clean floor, so much so that it’s reflective. This gives the impression of a professional, industrial vacuum cleaner that is capable of leaving floors immaculately clean.

The second advert is again, a more contemporary one compared to the first. It’s strangely irrelevant dancer on the right is contrasting compared to the product on the left, but the simplistic and exposing design draws the viewer’s attention as to how these two are related. The tag line that I had in mind for this was, “High Performance” – a high performing dancer, and a high performing vacuum cleaner. The product can also be seen as flexible and easy to move like the dancer.

The fourth was an iron.

clothes iron compliment clothes iron contrast comp NO TEXT

The first advert shows the iron against a row of well ironed and neatly hung shirts, a very obvious background that suites the purpose of the product. It depicts and environment that is commonly seen with clothes irons and demonstrates its household use logically.

The second advert throws in a pinch of comedy into the design as the household iron is compared to a road roller, suggesting that it’s a very powerful product. A few tag lines to create a clearer comparison and understanding, and you have a very contrasting yet effective advertisement.

The fifth was a pair of ice skates.

ice skates obvious ice skate contrast

The first advert shows an ice skate in an ice rink. Typical, yet very colourful and vibrant. The original image was horizontal, but I decided to crop it so that the layout was portrait. This way, there’d be room for text at the top and maybe even below the product.

The second layout was flipped horizontally to create  ‘Z’ layout. I had an idea that the text would be placed on the top left of the design. You wouldn’t normally find a pair of skates in the sky, but it does suggest that the skates are capable of ‘flying’ and are streamline.

The sixth was a wood plane.

wood plane obvious 2 wood plane contrast

These two images both feature something wooden and crafted. The first being a bedroom with regular household furniture, and the second one being a boat washed ashore. A slightly more extreme example, but effected nonetheless.

And the seventh and last item was a rose flower.

rose obviousrose contrast

The moods and tones of the two images are set in day and night, making them both contrast each other and draw out different impressions from the viewer. The first rose has warm colours in its environment making it welcoming. The couple in the background implies the idea of a wedding or engagement. The second rose has a dark and cold night-time background, making the flower seem mysterious, alluring and perhaps even haunting. The mood is completely different from the first one.

Final Web Design Pages

design, Digital Art, laptop, Photoshop, User Interface Design, web design, Website Design

Here are my final web design pages put into a laptop template.

Laptop render HOMEPAGE

The homepage. This is just to present the design of the web pages, so I’m leaving some of the undecided images and text out for now.

Laptop render GALLERY 1

This is hopefully what the gallery page will look like.

Laptop render GALLERY 2

Here’s what the folder tab will look like when the cursor hovers over it. I’m thinking of adding an animation to the arrow icons too if I can get good enough at the coding part.

Laptop render GALLERY 3

This is what the full-view mode will look like.

Laptop render GALLERY 4

When the cursor hovers over the image, these functions will slide/fade in.

Laptop render ABOUT

This is the About page.

Laptop render CONTACT

This is the Contact page, with the cursor over the deviantART link.

Website Design Progress – The Page Designs

Computer, design, Digital Art, Photoshop, User Interface Design, web design, Website Design

Here’s the design process for my website pages. I designed how the individual widgets and components of each page will (hopefully) look.

For each page, there will be an icon representing it underneath the menu tabs. I got these great icons from www.thenounproject.com and credited the appropriate artists at the footer of the website.

Example of the Homepage icon. The text underneath it is called Lorem Ipsum and is often used in design to represent an area of text.

Example of the Homepage icon. The text underneath it is called Lorem Ipsum and is often used in design as example text.

I had to change the resolution of the actual icon.png because when I’ll use it later in my actual website, it needs to be the correct dimension. Resizing it in the design document won’t change the original image dimensions.

For the homepage, I wanted to have an example of my art featured as well as an introductory line to briefly let viewers know what this website has to offer, and who I am. I also put a link to my deviantART at the bottom.

website template homepage

I hadn’t decided on what art I would display on the homepage, so I left it blank for now.

I made the banner in Photoshop as well using the Rectangular Marquee Tool  and the and the Polygonal Lasso Tool and then filled in the selections with the bucket tool. I edited the deviantART logo to white so that it would stand out against the red banner and fit with the clouds background.

On my portfolio page, I wanted to organise my artwork into various folders so that the presentation was organised. I also took this opportunity to add interactive elements to my website.

The most difficult part of my portfolio page design was definitely coming up with a gallery widget that worked well. I tried many designs and worked my way until I found something that I was happy with. The first draft of my portfolio was a simple slide-show-like gallery, with the main image there with navigational arrows on either side of it. Below would be a row of small thumbnails and either a scroll bar or more arrows to slide through the thumbnails.  However, this didn’t include any folder options, so I tried a different method. I changed the design to a grid format, with each piece of art being shown as a thumbnail and placed little folder tabs at the top. I thought that this design would function better than the previous one, but I then realised that the tabs along the top of the grid were limited to the width of the grid. This wouldn’t work if I couldn’t fit all of the folder tabs that I wanted on the top.

I used a couple of example works to see how the artwork would fit in with the gallery.

Screen Shot 2015-01-08 at 16.20.02

My first design for my gallery. It was very simple and basic, but was limited to only a certain amount of images and had no folders.

Eventually I thought up a gallery design that would meet all my requirements and still fit the style of the website. I decided that since I wanted my gallery folders so badly, I would base the design around that first, then worry about my images. It ended up like this:

Screen Shot 2015-01-08 at 16.20.18

Here’s my final gallery design.

Each row represents a gallery, and if you wanted to see more than you would click on the arrows to slide along the to the next thumbnail. The ribbon-like banners on the end also fit with my red banner on the homepage to add a sense of consistency. I changed the colour of the banner to fit the colour scheme by adjusting the Hue and Saturation.

I also thought a lot about how the user would interact and navigate with the gallery. I decided to add elements of animation into this design to reveal more information about the gallery to the viewer.

Screen Shot 2015-01-08 at 16.20.42

Here’s what happens when the mouse rolls over a tab on either arrows on a particular group.

The banner will extend and reveal the name of the folder. It will stay there so long as the mouse is on the arrows. I also considered having a rotating animation for the icon so that it spins when the mouse rolls over it.

If the viewer wanted to view the image in full screen, then they would click on the thumbnail. The screen will dim and the full version of he image will appear in the centre like so:

gallery full view 1

This is what the full screen mode will look like when the viewer clicks on a thumbnail preview.

To exit this view, the viewer will simply hit ‘Esc’ on their keyboard or just click outside the area of the image. The footer text remains unaffected because it is important to keep the copyright and credits clearly presented in every part of the website.

I also considered navigation in this view as well. So when the viewer’s mouse rolls onto the image, navigation arrows will slide in. I also included a name and description of the piece too.

gallery full view 2

Here’s what it will look like when the mouse rolls over the image.

This gallery was a lot more complex than my original idea, but in order to accommodate the requirements that I wanted, I had to play around and develop the idea.

I drew in the rectangles with the Rectangle Tool and then lowered the opacity so that they weren’t obstructing the entire image beneath it. I also used the same arrow icons and the same font as the rest of the website to keep consistency.

For my About page, I simply had a paragraph of who I am and some information on what programs I use.

Screen Shot 2015-01-08 at 16.42.33

On the Contact page, I had my e-mail address and deviantART link. I made it so that when the mouse rolled over any linked text, the text would turn red. I copied the text layer by selecting it and pressing cmd + j (Ctrl + j on Windows,) to duplicate the layer and then changed the text colour.

CONTACT 1

This is how the Contact page would look like normally.

CONTACT 2

This is what it will look like when the mouse rolls over the deviantART link.

To return to the homepage, the viewer can simply click on the header and the page will navigate to it.