Creating iPad Icons Using Adobe Tools

This project takes the idea of redesigning some of the logos of the native Apple apps on an iPad. I explained to the students that I was turning them into mini graphic designer teams. Apple has asked for a fresh look for its own logos.

The project was done in four sessions, even though it was orginally planned for three. Sessions 1 & 2 were the students sketching their logos on the iPad using Adobe Draw. I got them using Adobe Draw rather than Adobe Sketch because I wanted their images to be vectorised pictures which could be scaled up and down without degradation. Also, with Adobe Draw, it’s easy to fill in a closed shape by pressing down inside the shape. These images were saved one at a time into the students Google Drive, ready to be used on a computer.

The next step in the second session was to bring all the images in Illustrator to crop them and resize them all uniformly. I provided them with a template file which contained 20 artboards, all in a grid, for the students to use. They didn’t need to fill in all artboards when exporting out their images.

Once this was done, the fourth and final session was the students placing the images into my iPad mockup InDesign template and labelling them. I even sourced the correct font that Apple uses on it’s iOS devices! Once that was done, their work was saved as a jpg and I cropped the bottom part of since no one got that far.

Below are two videos. The first one explains how I got the students using Illustrator to prepare their images, and the second video details how the students placed the icons into InDesign. At the end, I have some student examples.

The students found this an exciting project to do. It gave them a good appreciation of what it is like to fulfill a brief as a graphic designer. The only real notes I gave them along the way was to make sure it was obvious what app their icon design was for. You don’t want people looking at the icon and having no idea what it’s for – no matter how good it looks.

Here are some examples (apologies for the low res quality).

This slideshow requires JavaScript.

Advertisements

Creating your own handwritten Font with Fontise

Something that I bet my Grade 5 students had never thought about before. How do you create a font? The answer to that can be quite complicated and honestly a little dull. But creating their own handwritten font – using a simple app on the iPad? That has potential to be much more interesting.

There are many, many apps to create your own font, and some cost quite a bit of money. The one I chose is free and easy to use. Not just that – it can also be saved out to work on an iOS device or a computer.

The video below shows how to create a font using the app, and below that are a couple of student examples.

Creating Comic Books with Halftone (Grade 4)

Who doesn’t love a comic book? Maybe I should rephrase . . . What kid doesn’t love a comic book? Well, the answer is probably a fair few, so let’s try one more time. What kid doesn’t love creating a comic book? Ah, now the answer is much higher. Probably most kids, I would think. Judging by my students, there was a lot of fun to be had in this project. I also think it’s important to pitch it at the right age. Grade 4 for this project (that’s 9-10 year olds) is the perfect age. They are young enough to love the idea, but literate enough to craft a cohesive story.

So, the project was this. I told the students to go out and think of a photo story. Around 10-12 images photos would be ideal. Think of what the story is, and what photos you need to take to tell the story. That was a whole session in itself.

From there I modeled how to use Halftone (actually Halftone 2 is what we used). We also had a discussion on what elements make up a comic page. This page on Wikipedia was ideal in helping me to prepare for this. I showed how to create pages, find templates for the panels, insert speech bubbles and captions. Most importantly, I showed them the edit tool and what you could do. From there they went about creating their own comic book.

The kids had a great deal of fun with this. The app was a little challenging to them the first time they used it, but once they got into it, they flew through the process.

When saving their work, there is the option to save each page as an image, or the whole thing as a PDF, but it actually works really well as a video!

Here is a video that models the app – and again, apologies for the sound quality. That’s what you get for recording when you’re out of the country!

Here is one particular example I really enjoyed.

Week 8: Fingerpainting, Glow Painting, Logos and Magazine Covers

This week the Preps looked at a couple more types of art on the iPad in the form of fingerpainting and glow painting. The Grades 1-2s started work on their Digital Portfolio (more on that in the next post), the Grade 3-4s finished their app logos and the Grade 5-6s created Magazine Covers in InDesign.

FINGERPAINTING

It’s not easy to come up with Graphic Design lessons for 5-6 year olds. I approached it as looking at different ways to create art on an iPad – my device of choice with the younger kids.

The first app we looked at is simply called FingerPaint. The task here was to explore the app and come up with different ways to create Fingerprint characters. Here is a video that shows how I modelled the app.

Here are some examples from the Preps.

04 03 02 01

GLOW PAINTING

Our exploration of artistic pieces on the iPad with the Preps concluded with what I can only call Glow Paintings. When introducing this to the Preps, I told them that everything that we had been doing previously on the iPad (drawing, colouring, funny faces, fingerpainting) were the kinds of art you could use using paper and art tools in the classroom. This app – Art of Glow – differs because its a kind of art that can ONLY be done on an ipad. Flashing, moving, animated art.

Here is a video of how I modelled the app to the students.

I didn’t save any of their work this time around, but they certainly had a lot of fun. Again, their love of “rainbow” colours could hurt the head when gone too far – perhaps even bring on an epileptic fit if you’re not careful! The kids really loved it!

APP LOGOS IN ILLUSTRATOR #2

The grade 3-4s concluded their work in creating their logos on Illustrator. When they started I got them to create four artboards with the intention of creating four near-identical versions of their logo. The only difference being that they changed some colours around each time, so they could show me different variants of the same idea.

I then mapped their final chosen logo onto a 3D iphone image in Photoshop to come up with the end result. Here are some of the best ones I think the kids came up with.

This slideshow requires JavaScript.

I thought the best ones were the ones who had a clear idea of what they wanted to do from the beginning and who followed my advice in making some that was realistic to draw on Illustrator given the rudimentary skills they have so far.

MAGAZINE COVERS IN INDESIGN

The final activity for the grade 5-6s this term was to create a magazine cover in InDesign that would (hopefully) complement the magazine spread they had just finished last week. For the grade 5s, that meant a magazine on Environment or Sustainability and for the Grade 5s, that meant either a current affairs magazine or a Natural Disasters Magazine.

They were to include their article and byline on the cover as well as a suitable cover image. Like last time, I supplied them with some example magazine covers for them to look at. Unlike last time, however, I told them the examples were there to be used as inspiration, not as something to copy.

The video below explains how I modelled this to the class.

Here are some grade 5 examples that I put through Photoshop to make them more 3D and professional.

07 05 04 02

And here are some grade 6 examples where I have done the same.

06 03 01

Next week we are all doing Digital Portfolios. With the end of semester reports going out, I wanted there to be included in my comments a link to the students work so that the parents could see what they have been doing in Media Arts this year so far. See the next post in how I did this.

Week 7: Funny Faces, Storytelling #2, Logos and Magazine Spreads

This week the Preps had a lot of fun making faces out of fruit and other assorted objects, the Grade 1-2s were finishing off their Toy Stories using Adobe Spark Video, the Grade 3-4s started work on designing logos for their mock app games and the Grade 5-6s were given an extra session to finish off their work on magazine spreads.

FUNNY FACES

Based on the work by reknowned Italian artist Giuseppe Arcimboldo, I found a fantastic app for students to create funny faces (or anything really) using fruit, or other kinds of food and objects. I tried this one out on my four year old daughter prior to the lesson, and I was amazed at what she came up with. The Prep kids in my class did not disappoint. The app is super easy to use. I started off by showing them this video on how the app works.

Here are some of the stellar examples the students saved for their portfolio.

TOY PHOTOSTORIES #2

One of the things I love in Media Arts is how you can tie in the skills they learn with me to what they learn in the classroom. It’s a fine line though, and I only have 45min per class per week, so retreading what they do in class is kept to a minimum.

What I mean by this is that they learn in literacy how to create and construct a narrative. With me they learn how to take that narrative and make it interactive – in this case by constructing photostories using Adobe Spark Video. When I say I keep the retread to a minimum, I notice with a lot of them that although they successfully created the video, their skills in creating a cohesive narrative were a little patchy. But when we shared them, I didn’t dwell on it too much. For me, I wanted to see that the skills they learned using the app were up to par.

This week, with their “principle photography” done, I modelled how to create a front page (creating a title for their movie) a back page (with a photo of the creators) and choosing music and themes. The music was a tricky one because they needed to understand that the mix had to be right. The music shouldn’t be too loud that it makes the story hard to hear. Some groups understood that better than others.

Here are some fun stories to see.

 

CREATING APP LOGOS IN ILLUSTRATOR

When I was brainstorming ideas for Media Arts at the beginning of the year, this was one I had very clearly in my head. The last couple of lessons with Illustrator really built up to this. The first being their work with colour theory and creating complementary colour swatches. And the second being last week, learning to draw in Illustrator (with the robots) using shapes.

With these skills now put into practise, their task this week and for next week was to dream up a game for the iphone and create a logo that went with it. The logo was really more of a splash screen than a iOS icon, but the kids really dove into it.

I really wanted to impress on them that I wanted them to keep it simple. Some of the most successful logos in the world (actually, probably most of them) are pretty simple. I didn’t want them to get carried away drawing beautiful pieces of art on paper and then struggle recreating that in Illustrator. I urged them to use the shape and line tools to create what they want.

As you will see next week when I show the examples, some of them chose to follow that advice, and some of them didn’t.

This video goes into what I modelled to the students in more depth.

MAGAZINE SPREADS IN INDESIGN – FINAL

This activity was perhaps a little more ambitious than I originally thought. The grade 5-6s could do it, more or less, but they needed more time that I originally gave them. So this week they had an extra third session to finish off their work.

Remember, the lesson was not for them to create their own idea – but to recreate (or, I guess copy) a professional design. In this way, I wanted to expand their idea of what an article in a magazine can look like, whilst looking at feature points that they may not have paid much attention to before, such as the subheadings, byline, captions, columns, page numbers, drop caps, and so on.

With each example I have here below, you will see the original design and then their recreated design.

These first few are from the grade 5s. Although I wanted their mock designs to be themed to do with the environment, the body text of the article was just placeholder text.

g503

 

g502

 

g501

With the grade 6s, as I have explained, they had the additional task of importing a previously written report on natural disasters into their design, so it became a proper article.

g603

 

g602

 

g601

Next week, the Grade 5-6s will look at creating magazine covers – something I hope will be easier for them, considering they only have one session to finish it off.

Week 6: Colouring, Storytelling, Robots and Magazines

This week is very much a continuation of last week. The Grade 3s and 4s finished their robot, the Grade 5s and 6s continued with their magazine spread, and the Preps went on with trying to colour accurately on the iPad. The Grade 1s and 2s, however, started a new project – tying in with their storytelling and toys topic.

COLOURING ON THE IPAD #2

Again with the app DrawingPad, this was much the same as last week, but limiting the students to using only pencils and crayons. I also showed them the eraser tool and suggested that they really look critically at their work and erase parts that went over the line. On the whole, they did a pretty good job, and the kids themselves were very proud of their work – even if some of them maybe overused the “rainbow” crayons and pencils. So much so that it hurt a little to look!

Here are some of the better examples:

TOY PHOTOSTORIES

As one of the big parts of the media arts curriculum is storytelling, I wanted to do this project with the Grade 1 & 2s. I had previously asked them to come in with a couple of their favourite toys. And did they ever! Any excuse to bring toys to school, right?

The task was fairly straight forward. Tell a story using your toys. For this, they would be in bigger groups (of four) and they had to work together to construct a basic narrative that would work with their toys.

The tool for this would be Adobe Voice (now called Adobe Spark Video). I modelled how to use the app, taking photos of toys and putting an audio narration on each slide. I told them they only needed one line per page.

Next week I will upload some of the students’ final work.

DRAWING ROBOTS IN ILLUSTRATOR #2

This week the Grade 3s and 4s finished drawing their robots. The main issue the kids had were that a lot of them were not very confident in using a mouse. There was a lot of silly mistakes with mouses being used incorrectly, wrong buttons pressed, shakey hands. In fact, several times I had to reset the Illustrator workspace on kids’ computers because they had accidently put them everywhere. Note to Adobe: Please include a way to lock this down!

Given that this was the first time most of them had done anything like this (and no one had used Illustrator before), I think they did really well. Some kids still couldn’t catch to the idea of using the selection arrow tool to draw a marque and group objects to move. That was something I helped the kids the most with.

Since the idea was that their robots were meant to look the same as mine, I didn’t save any of the kids’ work. Next week, we start logos and that certainly will be saved and kept on their portfolio. Really, the idea behind the robot activity was to get them practising using the tools they will use for their proper project in the next couple of weeks.

 

Week 5: Colouring, Collages, Robots and Magazines

This week the Prep students worked on carefully colouring in pictures using a stylus, the Grade 1&2s took went for a photowalk and created nature collages, the Grade 3&4s got to know Illustrator by drawing a robot using shapes, and the Grade 5&6s learned how to set out a professional magazine spread.

COLOURING ON THE IPAD

Continuing with the app DrawingPad, I showed the Prep students how to access the two colouring books that come preloaded with the app. The students then could choose which pictures to colour in. For this lesson, I let them choose whichever tool they wanted (marker, paint, crayon, pencils, etc) but next week we’ll do the same thing but limit it to pencils and crayons so we can get more accurate colouring in. Those pictures we’ll save for their end of semester portfolio.

NATURE COLLAGES

I took the Grades 1 & 2s on a photowalk (a field trip, if you like) to take some nature photos for a collage they would make. We started off talking about what a collage is and how you would traditionally make one using scissors and glue. I took the Grade 1s to our Wetlands area and the Grade 2s to our Indigenous Garden. I instructed them to only take photos of nature – no people, no buildings, no cars. I also asked them to do close up photography.

Once the photos were taken, we came back inside, and I demonstrated the LiveCollage app. It’s pretty simple to use, and the results were pretty exciting. I was going to use PicCollage, but I liked LiveCollage better. Here is a video that explains it:

Here are some collages from the Grade 1s in the Wetlands:

And here are some collages from the Grade 2s in the Indigenous Garden:

DRAWING ROBOTS IN ILLUSTRATOR

Given that I’m hopeless at drawing, you wouldn’t be surprised to learn that Illustrator is not a widely used program for me. But like with tracings, I do know some cheats. And one of them is drawing, using shapes and lines.

To that end, I showed the student a picture of a robot that I wanted them to recreate as accurately as possible. I showed them the tools they needed (mostly the shape and line tools) and how to manipulate the shapes by either size, rotation or weight. We looked at how to copy and paste elements (such as eyes, arms and legs) to save time and also to look accurate.

The idea behind them copying what I had done is that I wanted them to experience all the shapes and how they can be used. Any students who finished early could colour in with various fills.

This project carries over next week, as one session is not enough. I’ll discuss more about some of the issues we had in the next post.

Here is a link to a video where I demonstrate how to draw the robot:

MAGAZINES SPREADS IN ADOBE INDESIGN

One of the key things I wanted to get out of doing Media Arts as a full time specialist subject is to expose students to professional techniques in creating various creative projects. Page layout is not something kids (or many adults) really think about when flipping through a magazine, but it’s an important skill to understand. Ultimately, if I can get kids to think differently about presenting their work, instead of just typing up something in Word, then I’ve done my job.

I approached this slightly differently for the Grade 5s and the Grade 6s. Although essentially doing the same thing, the Grade 5s would be making a mock magazine spread (ostensibly related to their biodiversity theme). The Grade 6s would be doing the same designs but they would import a report they did last term on natural disaster into the text columns to make it more relevant.

I had a pack of cards made up of different magazine spreads. I explained that the content wasn’t important, we were looking at the designs. How the heading is placed, how many columns, coloured boxes, pull quotes, captions and images were all discussed.

Their job was to recreate the design on their card in InDesign using relevant photos and placeholder text. The Grade 6s then had the additional job of importing text from their previous report into the spread. Below is a video explaining and modelling the process.

This lesson will go over three weeks as there is a lot to learn and a lot to do. I will share the students’ work at the end of it.

Week 4: Drawing and Tracing on the iPad – Colour Theory

This week the younger students learned some drawing skills using an iPad and stylus, whilst the Grade 3-6s learned a little about colour theory and created their own colour themes using Adobe Colour and Adobe Illustrator.

DRAWING ON THE IPAD

For the Preps, I wanted a simple fun app that would have a variety of easily accessed tools. I found that with an app called DrawingPad. Here is a fun little video that gives you a taste of what it can do!

This activity was a nice mess around for the kids. I didn’t save their work this time around. Next week we’re going to explore the colouring books that come with the iPad to practise our colouring-in skills.

TRACING USING ADOBE DRAW

It’s an open secret that I am the art teacher who can’t draw. Not even a bit of it. So, what do when teaching a class on drawing? Why, we trace of course!  Adobe Draw is a fantastic app that allows some more advanced controls than DrawingPad, but also allows images to be imported on an image layer, which can then be made slightly transparent for the students to draw over. You can then save the image with just the drawing layer to get the proper effect. Here’s an instructional video which shows how to do this (note: this is an older version of Draw than what is available now, but it still works practically the same way).

I gave the students some artwork to choose from and had it preloaded on the iPads. Since the grade 1s were doing space, I gave them a rocket to trace. The grade 2s had a choice of a castle, dragon, princess or Pegasus – relating to their unit on Storytelling.

Here are some examples:

COLOUR THEORY WITH ADOBE ILLUSTRATOR

The Grade 3-6s were introduced to a bit of colour theory as we explored the Adobe Colour website over at http://color.adobe.com

The site lets students create their own colour themes according to different colour rules. Students were asked to create their themes and then go into Adobe Illustrator and fill squares in to create a colour swatch. I had the file ready to go with the squares. All students needed to do was to fill in the colours, give the theme a name and then put in what colour rule they used for the theme.

If we had individual student licenses (not possible with the current Adobe agreement – plus the kids are under 13) then it would be a simple matter of saving their theme in a library from the website, open up Illustrator, find that library and use it that way. As it was, I needed to get the students to write down on a piece of paper the RGB values for each colour and then use that in the colour picker in Illustrator to fill in the squares. I have a couple of videos below that explain this process.

 

Here are some examples- one from each year level.

Next week, the Preps will be practising colouring skills, the grades 1 & 2s will be making nature collages, the grades 3 & 4s will be drawing robots using Adobe Illustrator and the grade 5 & 6s will be introduced to Adobe InDesign to create a mock magazine spread.

Week 3: Community Videos with Adobe Voice – Social Posters with Adobe Post

The Preps were finally at the level that they were comfortable using Adobe Voice that I gave them a project to do relating to important members of their community. The grades 1-6s all did Adobe Post posters relating to their Inquiry. I’ll discuss the Preps and then go into what I did with Post.

COMMUNITY VOICES

I had four images (below) that I saved on each iPad ready for the Prep classes to use. The idea was pretty simple. I wanted them to import the pictures, one on each slide, and then record a comment on who that was and what their role in the community was. I modelled this pretty explicitly, with a student coming to help me. We all discussed each one first so the kids had a good idea before they started their project. They have been discussing community members in the classroom, so this is – in effect – another piece of assessment the Prep teachers can use when assessing their understanding of their Inquiry.

I was glad that I did spend so long getting the kids used to the app. The technical part of the project proved no problem for them, and most got done quite quickly. They finished by getting photos of themselves for a front page, and choosing a design and music to go with the project. Here are a couple of examples.

The one issue I had was that some kids took their finger off the RECORD button a little too quickly, meaning that their audio was a little clipped. I tried to get them used to playing back each slide to check, but not everyone did. It’s a good thing to reinforce straight away.

SOCIAL POSTERS WITH ADOBE POST

With the students now familiar with the way Adobe Post works, it was time to put it to more meaningful use. The app is designed to create images for social media, after all. Obviously our students aren’t on social media, but they can still work at conveying an important message.

I discussed this project with each grade level (1-6) and what they were focussing on class dictated what I wanted them to create. So, it worked out that:

  • Grade 1  – Space
  • Grade 2 – Fictional Characters / Adjectives
  • Grade 3 – Persuasive Posters
  • Grade 4 – ANZAC Day Posters
  • Grade 5 – Environment Day Posters
  • Grade 6 – Social Awareness Posters

The Grade 1s were looking space and the solar system. They were tasked with creating some classroom posters highlighting an aspect of space – whether it be planets, stars, satellites, etc. Here are some examples:

The Grade 2s were looking at adjectives and also storytelling. Putting them together for this project, I asked the students to pick a favourite fictional character from books, TV or movies and think of three adjectives that go along with them. Here are a few results.

The Grade 3s just did a whole unit on persuasive writing. Their brief was to think of a persuasive topic they wrote about (or another one they know of) and think of a suitable image and statement that strongly enforces that belief. The Grade 6s did something similar, but with (hopefully) more mature topics.

Here are some of the Grade 3 posters:

And some of the Grade 6 posters:

The Grade 4s did a small unit concerned with ANZAC Day – which (if you’re not in Australia or New Zealand) honours the veterans of the First World War and our soldiers who fought and died in that war. The usual slogan: Lest We Forget – is used a lot in these posters. Here are some examples.

Finally, the Grade 5s were looking at biodiversity and sustainability – a very important topic especially with our school being a 5-Star Sustainable School. With World Environment Day coming up, the teachers decided to hold a competition to see which students could come up with the most meaningful poster about the environment. Here are some great examples.

Next week, the Preps will be doing some drawing on the iPad, the Grade 1 and 2s will be doing some tracing artwork on the iPad, and the Grades 3-4 will be introduced to colour theory and Adobe Illustrator.

 

Week 2: Introducing Adobe Post

The Prep classes this week continued to play around with Adobe Voice, but the Grade 1-6s had a chance to use Adobe Post – a fantastic new app from Adobe that allows the user to quickly and easily create beautifully designed projects. This week is meant to be the introduction to Adobe Post, and for most classes that was the case. But with a curriculum day this week and the ANZAC day holiday next week, grades 1 and 6 had to jump straight into using Post for a project. I will go into that in next week’s post. For this week, I’ll just write about introducing Adobe Post.

CREATING MEMES USING ADOBE POST

I love this app because it really gives you stunning results with minimal effort. The app is mainly used by people to create posters for social media – hence the many templates available for Twitter, Facebook, Instagram and so on. In exploring the app, I wanted the students to have a lesson just to fool around with it and get some tricks and design tips from me as they did so.

To this end, what could be more fun than creating memes? I did say to the kids they could do anything they wanted – a poster to celebrate their favourite sporting hero or an inspirational motivational type poster. But most, understandably, went for memes.

I advised them to use Google first to save an image they wanted (one without any text already there) and use that as a basis for their poster. I realise that goes against what we should teach about creative commons, royalty free images, but I am bringing that up later in the unit.

I encouraged kids to look for the balance between text and image. You didn’t want the text to cover or block the focus of the image, but equally, you needed the text to be clear and readable. The background shapes you can apply helps with that. Here are some examples from the grades who did this – the grade 2, 3 5s and 6s.

Next week the students will be making posters again, but relating to what they are studying in Inquiry.