katherinejiaxin

[katherinejiaxin]

Children's Book Reflection:

This project has been really fun and interesting!

This design project was a real journey into the world of sardines through design. At first, the idea of a kids' book about sardines may have seemed far-fetched and unusual, but it turned out to be an incredibly rewarding experience. I was sick during this process so I did not have a lot of time to allot to this project, but I am happy regardless. I aimed to be as minimal as possible and tried not to overdo the small details.

Inspiration and Concept

I was really inspired by a craving for sardines. For a while now I have been thinking about sardines a lot. I thought that this project would be the perfect opportunities to create something that was interesting to me as well as relevant to my daily life. I really liked coming up with individual poems.

Design Challenges

I have regressed a little in terms of InDesign skills, I forgot how to do paragraph styling but I quickly regained my skills. I think that it is really important for me to keep up with my skills otherwise I will forget them.

Another challenge for me was poor management of files and naming which made it quite confusing for me. I will try to improve on this for my next project.

Storytelling

Creating the illustrations and assets were my favourite part of this project. I really liked that I could explore a design project with my own personal style, and I was really happy I could tell my story through this project.

Improvement

An improvement for future me is to be more organised with files, images and screenshots so that my desktop does not become hard to work with and linked files disappearing.

I think I also need to brush up on my InDesign skills as I feel like I am still very slow at navigating the program.

Conclusion

Creating this children's book about sardines was really entertaining and boosted my skills at simplifying designs and ideas for my projects. I found that I could achieve a lot more goals when I started with a very simple plan.

Overall, this was a really great project and I enjoyed creating the designs very much :)

[katherinejiaxin]

Creative Process: Sardine Tales Technical Assets

I created two different styles for my book:

Here is a screenshot of my paragraph style. This style was for the text of the poem, which I applied to all the text of the poems. The text was centre aligned, except for Sardine Labs.

Here is a screenshot of my paragraph style. This style was for the text of the poem titles, which I applied to all the title texts. The text was centre aligned.

Here is a screenshot of my pages. I made two parent page styles. I applied the A parents to my endpapers, and the second page style to my poem pages. The A parents contained a page number - in document. The second page styles were originally set up with columns, but after creating my content for the book, I realised that it was easier for me to use a text box and text wrapping for the actual text as I did not have enough text to put into columns.

I used a text wrap around object and wrapped the words around the sardine and did this for the book. For round shapes I used a round text box to keep my words within the bounds of the shape.

[katherinejiaxin]

Creative Process: Sardine Tales Assets

Here are the assets I used for my main poem pages.

I mixed found images with Adobe Illustrator creations.

I first constructed a basic sardine that could be interchanged for the different poems. I drew out the basic shapes of the suit and then added the image of the fish's head. The fills of these basic shapes were textures I found online by just googling the material I wanted to and using Command+7 to create a clipping mask.

I created an extra necktie, nametag and hats for the different sardines. The aviator hat was found online. I used the Brush tool on top of the sardine to add personal features like moustaches and hair.

I drew out a few more fish options that I wanted to use as decoration. I became aware that the more I added, the less legible the book would become, so I did not use all the fish I created.

I found an image of a disco ball which I edited in PS to be less saturated and a satellite dish to add to my shark radar gadget.

I then created a magnifying glass and gadget using the pen tool on Illustrator, then filled it in with felt fabrics.

Then I created the asset for the end papers:

I drew these shapes out on Illustrator and added it to my swatch bar. I overlaid a Persian rug as I wanted there to be a more complicated pattern for my endpapers.

For my title pages I did the same thing as the can creation I drew out shapes and overlaid them and filled them with clipping masks. I wrote the handwritten letters with the Brush tool.

[katherinejiaxin]

Sardine Tin Tales Complete:

Here is my final Children's Book!

[katherinejiaxin]

Sardine Tales

For some reason, I have been really invested in sardines and have a creative craving for them. Therefore, I wanted to dedicate this book to sardines. I have lots of stories and poems of sardines that I have come up with. I wanted to create my own poems because sardines really have been controlling my brain a little bit. Here are the short concise ones that are easy to illustrate/ read to children.

1. Tiny Silver

In the briny depths they waltz with flair, Sardines in tuxedos, dancing without a care. Their silver scales, a disco ball’s gleam, Moonwalking through the ocean like a fishy dream.

2. Sardine Detective Agency

Sardines in trench coats solve oceanic crimes, Tracking lost treasure and missing sea slimes. With magnifying glasses and scales on the case, They unveil the ocean’s mysterious face.

3. Sardine Science Lab

In a lab made of coral and bubble glass, Sardines concoct potions with a splash and a pass. With beakers of plankton and a squid ink pen, They invent sea gadgets again and again.

4. Sardine Explorers

Sardines with maps and compasses set sail, On grand ocean voyages where tales never pale. They discover new reefs and hidden sea caves, Bringing back treasures from the ocean’s vast waves.

5. Sardine Tin Tales

In a tin, sardines convene, Sharing tales of the ocean scene. Pop the lid, and they’ll confide, Of underwater worlds they hide.

I have created a moodboard of images that i like that will help with the book:

These pictures represent the aesthetic I want the book to follow.

Here is a rough content map:

[katherinejiaxin]

Children's Book Project

Project Brief:

Create a 12 page A5 document. The document will be the beginning of a book of 5 (or more) nursery rhymes / children's songs / stories.  You will choose the selection of rhymes/songs and / or stories to populate the book with.

The book's content should be arranged as follows:

page 1: Cover, with title "Children's songs". - with or without a picture page 2: and 3 'end papers' (more on this next week but I will explain today) page 4: contents page page 5 - 9: the 5 songs page 1 and 11: end papers page 12: back cover

To be used in this book:

Paragraph styles

Character styles

Images (at least one per song, and at least 2 of them hand-drawn vector - (more, or all if you want)

Page numbers

Custom margins and columns applied via the parent pages

Make sure not to skip any of the above, as you'll be required to show evidence of those. 

Style

Consider the colours of the book - make them appropriate, and consider the theme and the content and how these fit with the visual style and the visual style and the content inform one another. Get together a selection of colours and typefaces (It's recommended not to use more than two typefaces here but you can use different font weights as needed). Think about how your text size will work with your content and how the images and text will share the available visual real-estate. 

Content flow

Make a plan of what will be on each page. Get your content together and think of your book's title BEFORE you start designing. 

[katherinejiaxin]

SOFTWARE FUNDAMENTALS SUMMARY:

FINAL REFLECTION

Overall, I enjoyed this class a lot and I have learned so many new skills, as well as I have learned just how complex some softwares can be.

Honestly, I was really nervous beginning this class, but also this degree in general, having absolutely 0 skill in any of the softwares, but I quickly gained confidence with each of the lectures. I found Illustrator the easiest to master, and I have now got quite good skills when it comes to drawing shapes. I might need to just refine the skills around drawing curved shapes with only perpendicular direction handles, but I am very happy with my progress and the speed that I am able to complete different illustrations now. I am going to be using illustrator for my DT Graphic design poster, which I am currently drafting up, which is another opportunity for me to level up my skills.

Going on to Photoshop, I really felt stuck, especially when it came to layer masks and handling them. But with the compositing homework, I practiced a lot of mask stuff and found it way easier to manage. I definitely have so much more to explore with Photoshop, and I want to master these skills. I have begun to watch the LinkedIn skills tutorials and I am slowly upgrading my skills in Photoshop. I am hoping that I will be able to display these skills in other areas of my work and explore it as a hobby.

Lastly, Indesign. These lectures were very straightforward, but I was away for one of the lectures, making it more difficult to manage. However, I feel quite comfortable with my skills and I am excited to begin thinking about my book design for semester 2. I really want to refine my skills and have enough skills to create a book that accurately recreates my brainstorms. I want to be able to create whatever comes to mind. and not be limited by my skills. This obviously goes for all the softwares that we have learned but I am excited to showcase my work.

Ultimately, this class was both challenging, yet rewarding. I am satisfied by my skills and will be working on them to be even better. But, anyways, I am proud of myself for how far I've come since my first day! :)

Thanks!

[katherinejiaxin]

Illustrator Pattern Making

We looked at creating patterns in Illustrator to add as "endpapers" in the InDesign booklet:

Create the icon to include in your pattern

My illustration I created was a cat:

IMG: Cat and Anchors/handles

2. Creating the swatch for the potential pattern

Draw a shape behind your icon, in this case we used both hexagons and squares.

Square:

Draw the square, then arrange the square to the back so that the icon is in front of the square:

Then DRAG THE ICON AND THE SQUARE INTO THE SWATCH PANEL (Window: Swatches)

IMG: Swatch palette with new pattern fill option

You can now create a shape to fill in with this pattern:

Just simply draw your shape and use the fill option with the new pattern swatch:

IMG: Random shape with new pattern fill

3: Editing the pattern swatch

To edit and view the properties of your pattern, double click the pattern icon/thumbnail and it will open up option panels for your pattern:

IMG: Pattern option panel after double clicking

There are many options to explore for this pattern swatch:

You can use the direct selection tool and edit points inside of your pattern by clicking into the illuminated square

You can edit the orientation, size and positioning of your pattern

You can add more elements using the pen and brush tools

You can change the colours of your pattern using the swatches bar and selecting the shapes

IMG 1: Option of positioning

IMG2: Different offsets of positions

IMG3: Colour changes in swatch tool

IMG4: Adding elements using brush tool

The updated pattern fill will automatically transfer to the shape with the fill:

IMG: Here is my pattern filled into a shape!

Hexagon:

Note: you can also use triangles and trapeziums for this shape pattern

Begin again by creating the hexagon shape then arranging it so that your pattern icon is in the front.

In this case we added an extra hexagon shape but this is optional to your designs:

IMG: Hexagon with cat

By using the art board tool:

We created an extra art board to work on.

Again, drag your selection of the hexagon pattern to the swatch panel:

IMG1: Hex pattern in the swatch board

IMG2: Shape with new hex pattern fill... except, there are gaps

As you may notice, the new fill has gaps between the hexagons so again we double click the swatch thumbnail and edit its presets:

Select Hex by row for the tile type to achieve a seamless hexagonal fill:

IMG1: Hex presets IMG2: Shape with seamless hex fill

4. Creating an endpaper

Draw a shape that fills the art board and use the pattern fill you want to fill the shape:

IMG: Endpaper design

Then to transfer this you must expand the selection, otherwise it does not transfer properly to Indesign as this swatch only is in Illustrator. Do this in Object: Expand

To check that the selection can be transferred use the wireframe shortcut Command+Y. If there is a wireframe created of the design, it is transferrable.

IMG: Wireframe mode of the pattern, if this shows up, the design can be transferred!

Open up Indesign and paste the selection onto preferred pages:

IMG: Endpapers in Indesign

To move the pages to the position of endpapers Shift + select the pages you want to move and drag to add under the pages in the ages panel:

IMG: Moved the endpapers

This pattern making tutorial has been extremely helpful to me because in my compositing task I hand drew and added each individual part of my pattern to the lollipop, when I could have adopted these methods! I am happy that my skills have progressed far and very quickly in Illustrator where following these tutorials remotely was very easy for me, and I completed it very quickly.

And, Fundies is complete... for now!

[katherinejiaxin]

Final Indesign Session pt.2

10: Text Columns cont.

Here are some examples of what text columns can look like at different text column presets:

IMG: Two columns vs three columns

11: Text overflow

This red box indicates that the text is overflowing from the text box, the text box is not big enough to fit that text.

One way to solve this is to redesign the page and text boxes so that the text does fit in properly.

Another way is to continue to the next page and create a new text box:

IMG: Creating a new text box

Then using the (V) Selection tool, dragging out from the red arrow into the new text box:

IMG: Overflow text placed in the new text box

12: Page design

IMG: Page 3 of my booklet

I then designed this page. I used wrap text and played around with the text sizes.

We then drew a black rectangle to fill another page. We did a single and double page with black fill:

IMG: Pages with black fill (Single and Double)

We then moved the page number elements to a new layer using the Layers tool:

13: Second Parent Page

We then created a new set of parent pages. This is done by clicking into the parent page area and dragging the A parent page to the = (+) button on the the bottom panel. ONLY replicate these parent pages if you are sure with the formatting on the A-Parent page because the formatting from the A is applied to the B pages.

The new parent page is called B-Parent:

IMG: B-Parent selected

After selecting the B-Parent pages, your screen should display this:

IMG: B-Parent display

After this we applied the B-Parent page to those pages we filled with black. The B-Parent page will allow for the text to be white instead of black for the page numbers.

Apply the B-Parent page by dragging the parent page selection onto the pages needed:

IMG: Page view of whole document

Then, IN THE PARENT PAGE SELECTION, change the text colour to white, this will apply to the pages with black fill then finally this will be the result:

IMG: B-parent applied!

[katherinejiaxin]

Final Indesign Session

(I was away for this session, so all info is recovered from the recording and moodle)

Important concept:

Parent pages Parent pages allow you to add common elements to pages within your multi-page document, such as page numbers and logos - things which appear on all, or several pages of your document. You can make changes to parent pages at any time, and in a similar way to how styles can be changed, these changes will update on the pages they were applied to. Because parent page editing is more visual than editing style properties, the change are made on a special page, or special pair of pages at the top of the pages tool palette

Creating the page

Select A5 as the page sheet will be half of A4 page (A5).

2. Change the increments of the page/ruler units

3. To unlock the control bar go to Window: Control

4. To open the pages menu go to Window: Pages. This way you will be able to see and create pages.

5. We created 12 pages using the (+) button (found at the bottom of the panel)

6. We then used the text tool (T) to add titles to our pages. We did this by dragging out a text box inside the margins where we wanted to fit our text:

IMG: The titles

This is the controls for size and font:

This is the controls for alignments:

Here is centre align:

6. We then created page numbers:

We went into our parent page (A). This way our page numbers would apply to all pages with parent page (A).

We added a text box and wrote "page 1"

Then we wanted to apply this same thing to the other page on the same side, so we dragged while holding the option key and released the text box on the other side as desired:

IMG: 2 Pages with page numbers

Then we selected the page number (1). We went into Type: Insert special characters: Markers: Current page number and applied it to the selected number

IMG: Where to find current page number

The result should be this as it is part of a parent page not an actual page for the booklet:

Then, checking throughout the document to see if this has been applied to all pages with the parent page (A):

IMG: Page numbering worked!

7: Removing a parent page format

To remove a parent page format select the page option "none"

You can tell that the parent page has been removed from the page as there is no letter A to indicate that it is part of the parent page format.

8: Margins and columns

We then went into designing a suitable margins and columns for the booklet format. This can be found in Layout: Margins and columns

To adjust the increments go into the panel and edit. Here we adjusted for 19mm margins. This was applied all around the page.

These increments are all linked, indicated by this button here:

This means that every adjustment made to any increment of the margins will be applied to the top, bottom, inside and outside.

To unlink, simply click on the button and edit accordingly. We added 24mm margins to the bottom as to cater to the page numbering we added.

We added 6 columns to the booklet format:

To do this, edit the Column number tab (as shown in the image panel on the right)

We then centred our page numbers by adding a centre align. We had to align to page as to get the page numbers properly centred.

IMG: Centre Align icon, options to align to page

9: Putting it all together

We added a black shape to the booklet to indicate where a picture could be. Then added a text box that indicated where our text would be. We used placeholder text to fill this text box:

IMG: Black square = image placement

10: Text columns

To apply a text column find the icon (pictured below) in the toolbar and edit the amount of columns you want for your text. Remember that this only pops up if you are in text editing mode and have the text box selected!

Then repeat this wherever!

Go to next post HERE for part 2!

To be honest this task was quite hard for me to follow remotely as I just could not figure the parent pages thing out! I definitely need more practice with Indesign as a whole. However, my friend Maxis helped me out and made life so much easier by actually finding the recording (which I for some reason just couldn't locate). It did take me much longer to do the work as it was hard to work the Indesign stuff while watching the recording. However, it all worked out in the end.

I see that there is a booklet project for semester 2, and I am really excited to begin on that, because it will involve a lot of illustrations which I am beginning to really enjoy doing as a hobby in my spare time. I really want to level-up my Indesign skills before that, so I will be practicing away and exploring the different tools that I can utilise for the project. I am just very excited to be able to showcase all the skills I have developed in the past few weeks in my own project.

[katherinejiaxin]

Class Work 14 March Indesign Images

Linked files:

Loading images into InDesign - and moving them around... easily.

InDesign images are stores as links. This means that rather than embed an image into your file (as you can in Illustrator or more commonly Photoshop), InDesign references the image on the disk. 

This behaviour means that if you change the link (image file), InDesign will give you the option to update it in the file. This means you don't have to reload the image in the traditional sense, as InDesign is already 'looking' at the image. 

With linked files, there's only one copy of each image file, and edits to it will show up in the file:

In the following examples "22 final draft" and "23 final file" are example files that may be being worked on.

The benefits of this is that the images are not included in the file, and remain 'live'. If you're supplying an InDesign as an archival package, you must supply the images with it.

To add an image to your InDesign document, choose File > Place , then navigate to the image (or images) you want to include. 

Moving images around. The important thing to understand in InDesign from the get go, is that anything added via  'place' is put into a frame, which is the same size as the image. Understanding this will avoid a lot of confusion.

We began by downloading the tif file with a frog and placed it into ID:

2. We then edited this image in PS, by adding our own small illustration to it:

3. We then opened the window:links in ID to see the linked file. We needed to press the refresh icon to refresh the new linked file:

4. Here is how it looked:

5. We then reversed these changes in PS and then used the refresh tool to update the file:

6. We then resized the image using v: SHIFT COMMAND and scaled it, and used V: Opt + Shift to size up

7. We then used a text wrap Window:textwrap

8. I placed the frog where desired and then added the text wrap:

Final image:

9: Using the text wrap tool again, we selected the wrap to shape tool. Then we created an eclipse with only stroke selected. Then we used command + x (Cut) then pasted the image back into the frame of the circle. Theres also options to add and delete points in bezier curves.

Here is the Final:

This task was quite easy to follow along with as it is kind of like an advanced version of Microsoft Word, which I have used for a while. I really like the fact that you can text wrap to shapes and that the software has a lot of automated functions for you to edit texts into columns, which makes designing a lot easier! I definitely will be looking into more of the tools for Indesign in my free time as I know there will be a larger project coming up.

[katherinejiaxin]

InDesign Commands + Terms:

Space: Pan

Z: Zoom

V: Select

A: Direct Select

Command + Click: Exits text edit mode

T: Type tool

W: Toggle preview mode

T:Command + Shift (mouse) <- -> : selects words

T:Command + Shift ^: selects paragraphs

T:Shift ^: Lines above or below

Shift return: Soft return

V: Shift + Command: Constrain when scaling images

Option + drag: Copies

Command+ Shift+V: Pastes in place

Command + A + Option + Up arrow: closes leading between two lines

margins — the negative space around the inside of a page, a safe zone for all content / text / images

character / paragraph styles — a pre-set of settings and formatting that can be applied to a word, a line of text, or an entire paragraph in one click

widows / orphans — a single word left by itself on a line of text at the end of a paragraph, or a single line of a paragraph left on a page by itself at the beginning or end of the paragraph

overflow — when the amount of text in your text box is more than the size of your frame and overflows into a second text box

page break — when a section of text is cut off and the remainder is bumped (or reflowed) to the next page

line break — when a paragraph is cut off and the remainder is bumped (or reflowed) to the next line

glyph — every character in a typeface, (e.g: G, $, ?, 7), is represented by a glyph; this includes all capital and lowercase letters, numbers, and symbols

gutter — how wide space is between columns

[katherinejiaxin]

Class Work 14 March Indesign Character and Paragraph styles

For graphic designers putting together printed items with text, such as web ads, print ads, brochures, books and PDFs for digital use, InDesign is a popular application.

InDesign has sophisticated tools for managing lots of text, and also creating spacial interactions between text and images and making all manner of layouts where text and images are combined.

Today we will be covering Styles and Linked Items.

Styles:

Character styles: Applies to ONLY CERTAIN PARTS

Paragraph styles: Applies to the WHOLE paragraph

What we did:

Open window:control to see the control panel

Open window: styles

Draw a text box inside margins, set the number of columns to 2

4. Clicked into type tool and selected fill with place holder text:

5. We then wanted to customise the paragraph styles and edit them, do this by double clicking:

6. We edited text size in the control panel:

7. Then we selected the headings and created a paragraph style with a bold Arial typeface:

8. We then applied this to all the headings:

9. We wanted to add in bullet points so we copied the text into text editor app:

10. We created a new paragraph style for the bullet points:

11. We edited the leading around the bullet points, this is the leading icon:

12: We then edited certain words that needed to be emphasised, we did this by creating a new character style and using bold italics:

Here was the final product:

This session was quite an easy introduction to Indesign, but I am expecting it to get more difficult. I have realised how much I am missing out on with Indesign! As a Powerpoint and Word fan, I have slaved away creating different styles and editing columns in the software, but Indesign makes this process so much easier! I am excited to keep exploring this software!

[katherinejiaxin]

Homework Photoshop Compositing Task Pt.2

Here was the finished illustration of Princess Bubblegum:

I then went on to draw Lady Rainicorn. I had to make sure that it looked like PB was on top of Rainicorn. I again began constructed the shapes that would create Lady Rainicorn, I also experimented with leg colouring shapes:

IMG1: Rainicorn head shapes

IMG2: Final Rainicorn outlines

IMG3: Final anchor/handles

I then unhid PB and moved her using the select tools so it would match seamlessly:

IMG: Rainicorn and PB interaction begins!

I then began to colour LR, I began with constructing shapes for the leg and body stripes"

IMG1: Shapes for leg fill created

IMG2: Swatches for fills

IMG3: Tail filled

I then began to fully colour LR:

IMG: Nearly finished Rainicorn

Then I added detailing I had missed into the face:

IMG: Tongue and eye detailing/fill completed

Now my illustration was complete!

IMG1: Final anchors/handles

IMG2: Final illustration of PB and LR

I then created a speech bubble using the ellipse tool and added a triangle shape. I then used the direct selection tool to delete points and create the speech bubble:

I added text using the T text tool:

IMG: Completed speech bubble

I was very happy with this drawing as it was very straightforward in what needed to be drawn in order to construct this illustration. I am very proud of my work so far. Then I added the illustration as a smart object into my PS work:

IMG: Illustration placed into PS

I then began to add things for the raster images. I first added a wood mouse. I used the object selection tool, created the image into a mask and then used the brush tool to finalise my image. I placed the mouse on the bench and added my new image.:

IMG1: Mouse added

IMG2: Edited mask (with brush tool)

I placed the mouse on the bench and added my new image:

IMG: Cat added

This image was harder to do as the object selection tool did not allow me to select the cat:

IMG: Object selection tool will not work properly!

When it was turned into a mask, bits were missing from the cat. So i used the brush tool to edit and smooth the edges:

IMG1: Finished restoration of cat using the Brush

IMG2: Cat outside of Mask Selection

I then noticed that the cat had a lot of green edges, I wanted to minimize that, so again I used the brush tool to dissipate them:

IMG: Getting rid of the green with brush tool

I then wanted to add a shadow of my cat. I used the drop shadow through the fx bar, however I could not position it in a way for it to look natural and I could not find a way to stretch the shadow and flatten it. This is something I want to ask Toby about in order to improve my editing skills.

IMG1,2: Exploring the shadow tools (it failed)

I then moved my mouse and cat into positions to make it seem like the cat was pouncing on the mouse:

IMG: Cat added and mouse moved in composition

Finally I wanted to edit the man's hand to show that he was holding the lollipop. I went into the layer mask and brushed out the hand in WHITE to reveal it.

IMG: Restoring hand with brush tools

Here was my final product:

Overall, I was pretty pleased with this task, there were definitely some barriers to what I wanted to achieve with the task that were because of my skills in Photoshop. I wanted to edit the image to look more cohesive and for there to be more shadowing done for the inserted images. I did not really know how to do this so I had just stick to what I knew (basically nothing). The photoshop experience is definitely humbling, and I am keen to learn and improve more.

I learnt some new tricks with editing images and blurring their edges to make them blend in seamlessly. I kind of got to understand more about creating shadows although it did not turn out how I wanted to.

I really enjoyed this project as it allowed me to be more creative and input some of my own ideas, which was really interesting and fun. I definitely also need to improve on my colouring skills on illustrator, as I feel it should not be so complex for colouring and there are probably tools and ways I could avoid having to draw out every fill.

Ultimately, I think this task went well. If I were to do it again, I would look into creating more shadows and choosing more complex illustrations to add into my creation.

Thank you!

[katherinejiaxin]

Homework Photoshop Compositing Task

For this homework we were tasked to create 2 Vector images and 2 Raster images that would interact with the "Jumping Man" image we worked on in class. I chose a candy kingdom theme for my composition.

I began with drawing a lollipop which I wanted the man to be holding. I mapped this out in Illustrator and drew the spiral:

IMG: First drawing of lollipop positioning

I liked the the concept so I began to draw the lollipop:

IMG: Spiral added to lollipop

I then began mapping out where I wanted the colours to be. I am sure there is a simpler way of colouring the lollipop, but I watched a few tutorials and could not figure out how to do the task on a mac. So therefore I mapped out where I wanted the colours:

IMG: Creating shapes to add fills for my lollipop

This was very repetitive but I finally finished the swirl colours of the lollipop and fit it perfectly to the spiral I had drawn (in blue). Here was the finished outlines:

IMG: Lollipop with fill shapes

I then began to add colour to the lollipop, this also took a really long time. I also had to arrange these in chronological order of how they appeared because I drew the shapes to overlap, so they had to be arranged so they did not look extremely horrid:

IMG1: Beginning to add fill to lollipop

IMG2: Finished fill for lollipop

IMG3: Different shapes that I had to create and fill, and their arrangement/ numbering

After I had finished with the colour, I decided to add another circle using the Ellipse tool to add a shine/gradient to my lollipop:

IMG1: Gradient added to lollipop

IMG2: Gradient position adjusted to create a highlight on the lollipop

I did the same to the stick of the lollipop:

IMG: Gradient added to the lollipop stick and its specs

And here was the finished lollipop!

IMG1: Final Lollipop

IMG2: Lollipop placed on PS file with the man

I then went on to think of a suitable background:

IMG: Candy Kingdom from Adventure Time street scene

I wanted it to look as if the man had stolen the lollipop and was escaping:

So then I got started on the illustration of Princess Bubblegum riding Lady Rainicorn chasing him:

I began by drawing out the shapes that the characters were comprised from, so colouring the illustration would be easier later. I did the hair last as I was unsure how to construct it to be easy to fill later on.

IMG1: Face and arms/hands added

IMG2: Crown added

IMG3: Speaker

IMG4: Magic bag added

IMG5: Dress added

IMG6: Hair added (showing anchor/handles)

IMG7: Final outlines created

I then began to colour the character. I created a colour swatch folder especially for the different pinks but all the colours used for the illustration were included. I also added small detailing gradients on some of the parts of the speaker, crown and bag.

IMG1,2,3: Colouring processes

IMG4: Gradient added to jewels and speaker

IMG5: Final coloured Princess Bubblegum

Go to part 2 HERE for more!

[katherinejiaxin]

Level Up Project:

Today I finished my Tumblr updates, so started working on the Illustrator tasks. I chose a silhouette of a squirrel to begin with:

IMG: Hand-drawn silhouette design

I drew the silhouette by hand then I added where I thought the handles would go for the image, I also labelled where I would use the ellipse tool.

IMG: Estimated anchor point and handle positions

Then I began drawing on Illustrator:

IMG1: Half-way through drawing

IMG2: Anchors and handles of shape

IMG3: Finished silhouette

I did not find much difficulty in doing this, as I have pretty much mastered drawing with bezier curves. I then filled this in with a black fill for the silhouette effect:

IMG: Filled silhouette

I then finished it off by adding the eye, which I constructed using the bezier curves and ellipse tool:

IMG1: Eye anchor/handles

IMG2: Eye finished

This was my finished project:

IMG: Finished squirrel with eye added

I was very happy with the outcome of this, I am proud of my progress in illustrator and I have begun to find enjoyment in completing these works.

The next coloured graphic that I decided to work on was Sandy from Spongebob:

I drew the character by hand and then I added where I thought the anchor points would be:

IMG: Hand-drawn character

Here are the anchor points:

IMG: Estimated anchor and handle positions

I then began drawing. This time (learning from the homework Oshawott task experience) I constructed Sandy bit by bit, shape by shape, so that the fill would be easier to do later on. This was a lot more difficult than the homework task as I chose a more complex design.

Here were the shapes that I drew to construct Sandy, and the different groups of shapes I used later on:

IMG1: Finished Sandy outlines

IMG2: Layers and grouping of Sandy drawing

After creating the shapes, I started to fill in Sandy's body and arranging the shapes in groups and in order so they would layer over each other seamlessly. I copied my original shapes to use as an outline layer over the fills:

IMG: Process of filling in my Sandy

I then started to add details to Sandy's face and body:

IMG1: Mouth details

IMG2: Zip and badge detail

And also her hands, I added a shadow shape then laid it under the outline, then I created a shadow for the arm, and turned down the opacity of the colour:

IMG1: Shape of hand shadow

IMG2: Shadow added

The top half of Sandy now looked like this:

IMG: Half finished Sandy!

I was happy with my progress and started to work on the feet. My layer looked like this:

IMG: Layers...

I began adding more details to the feet and completed the character.

IMG1: Final Anchor and Handles of completed Sandy

IMG2: Final Sandy

I forgot to take many process pictures, but as this was just a side task, I am not too fussed about it. I am happy with my progress and the developments I have made. I really enjoy creating things on Illustrator and it has brought me much satisfaction.

[katherinejiaxin]

Illustrator Class Task Fri 8 March

FINISHED WORK HERE

You’ll make two Illustrator pieces, in stages and document your process as you go along. For each of the two pieces, make the following steps:

1. Create a suitable drawing to work from

2. Mark on the drawing where the anchor points will be

3. Document the above, and make a note of what tools and methods you'll use, such as fills, gradients, reflect tool, pathfinder etc.

4. Make the graphic / illustration in Illustrator, with a scan of the drawing loaded into the layer beneath the vector artwork

5. Document the result with a reflection about how successful you were

Repeat this process twice -and make two graphics:  NOTE: Pick / draw objects that are at the edge of your ability. This will vary from person to person depending on what your current drawing skill and Illustrator skills are at. As part of your assessment, this effort will be graded relative to your own skills as demonstrated so far - not relative to some other measure. Make notes in your reflection to discuss your current abilities with Illustrator, such as what you found hard, what you found easy and what you'd like to work on. Remember, this reflective element is part of what counts towards the grade. So push yourself, but don't compare yourself to some outside measure - this is about your own learning. 

Graphic 1 - pick and draw or draw from reference / imagination, a graphic that is shown as a silhouette - for example: Skull and crossbones, an aeroplane, a wine bottle and a glass, a rubber plant

Graphic 2 - this should be an object or illustration that has an outline a fill colour and a shadow shading - using some of the same tradition as the penguin illustration

Select and design objects that challenge you slightly, and are manageable between the start of today’s session, finishing before next week. Plan it so the first one can be finished today in class and the second one is started today and finished as a homework assignment. Documentation and planning are KEY to this exercise. Your lecturer will be on hand to help out - record any new techniques and shortcuts and include them in your workbook alongside the screenshots of progress and scans of your drawings. 

The drawings

The drawings can be traces of things you’ve printed off, but also you can make your own drawings from scratch. Use tracing paper or thin paper held over the window to refine the drawings or make a second drawing that shows the anchor points where you plan to put them. For extra kudos, show the handles on the anchor points to illustrate them being curve points, hybrid, corner or broken. 

Must haves:

Create as few anchor points as possible

Adhere to the principle of putting your points at the apex 

Adhere to good file keeping practices

Recommended:

Today is our final Illustrator session, so this is a good time to wrap up a list of your keyboard shortcuts