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.

Drawing Emojis in Illustrator CC (Grade 4)

For this project, I needed to seriously brush up on my Illustrator skills. I’ll be the first to admit that Illustrator is not my preferred tool for the reason that I CAN’T DRAW. So, I looked for guidance.

I found an excellent series of videos by a YouTuber named Danksy who I relied heavily on to learn how to draw the first three emojis I was going to teach the class. My idea is that I would create an Illustrator file with four empty artboards. Each week, the students would learn how to create one kind of emoji (I had happy, sad and angry) and in the fourth week – now they had some skills and experience under their belts – they would have a go and making their own in the fourth artboard.

To say the students were excited about doing this, is an understatement. They were practically ripping the door down before each class to come in. They absolutely loved it!!! It was, however, a lot of hard work. Each lesson had me give the students a couple of instructions before they ran back to their computers to do them. Many, many times! But there was a lot of energy in what we were doing, and there were some great skills to learn here, like using the pen tool, the arc tool, pathfinder -> divide and cut out, a lot of copying and pasting, nudging both in size and movement, and using exact colours based on hex codes.

I did not make videos in how to do these, since Dansky explains it very well. I made a few small concessions in my teaching, so I didn’t do it absolutely exactly the same, but it was pretty close, so I need to give him complete credit.

 

As far as the kids went with their own artwork, I was really blown away with what some of them came up with. The only rule I had was that it needed to be a face emoji. I’ve said it before, and I’ll say it again – I teach the skills, but the ideas that come from them is where the real joy of my job lies.

Here are some highlights:

 

 

Crafting Animal Composites with Photoshop CC (Grade 3)

This is my first big regret of the year. Not that the idea behind the project wasn’t a good one, but that the expectation was perhaps too great for my Grade 3 students, who are still very new to Photoshop.

The genesis of this project started with a conversation with the teachers in the Grade 3 team. Something I do regularly is to check in with the teams to see what they are covering in the upcoming term to see if I can those themes to my lessons. In this case, they told me that the students would soon be doing a unit on animal adaptations. They further told me that in the past they have done a fun engagement activity with the kids where they can design their own animal, using different animal bodyparts. I got the impression this was usually done as a sketch. Could this be done in Photoshop they asked?

The answer, of course, is yes – it can. The more important question is, are the students up for it? That, I was not so sure about. It usually takes some practise with a variety of tools (such as the quick selection tool, the magic wand, quick mask, etc) to make a good selection that you can then remove a background.

I planned this lesson to come right after the one they did on selecting and removing the background from superhero pictures (which is covered in a post last year here). In that case, the images were chosen by me, and had varying levels of difficulty in selecting the background correctly.

In this activity, students were to choose three animals. They were to find the pictures on Google and save them to import into Photoshop. But – there were some guidelines first. Each animal needed to be facing the same direction to make it easier. I wanted the students to visualise how they wanted the creature to look in their heads, before they finalised which pictures they were going to use. Most students followed this, but some still had some problematic choices. It says something about the kind of teacher I am, in that there were cases where I let the students choose difficult pictures so they could see where the problems would lie when they brought them into Photoshop.

In any case, the project was simple enough in concept. Bring in three pictures to Photoshop – each on a seperate layer. Choose one animal for the head, one for the body (including legs) and one for the tail. Cut out the background as best you can, and make any transformations needed to put together the animal.

The results were fairly mixed, it’s fair to say. This is perhaps one for a Grade 4 class who have a little more experience in using Photoshop. Nevertheless, the students were all pretty happy with how their menagerie came out.

Below is a video describing the workflow in Photoshop, and under that are some student examples.

Colouring in your photos using Colorscape (Grade 2)

A simple app for a simple project. The Grade 2 students were shown how to use an app called Colorscape. Basically, this app takes a photo (either directly from camera or saved on the camera roll) and turns it into a black and white line drawing like a colouring page. Students can then paint in colours however they like. There are a huge range of colours to choose from, including Palette Colours – which are a palette of colours taken directly from the original photo itself.

I got my trusty box of toys out that I normally use for stop motion videos, and had the students use them to photograph and to colour. When they had finished this first task, I then let them take photos of whatever they wanted. I did have a small caveat, and that was that if they were taking a photo of someone else, they needed to ask their permission first. Knowing the kids, they would have some fun with it!

Some students took it a little more seriously than others. The best works were those that were done carefully and patiently, with some thought into what colours they wanted to use.

The students really enjoyed it, and as an aside – my own 5 year old daughter loves using the app too.

Here below is a quick video in how to use the app, and below that some student examples.

Harnessing the Power of the Creative Cloud (Grade 4)

I had in my head for a long time an idea to have a project that starts from a photo, worked on with an iPad, and finished off using a desktop computer – and using a variety of Adobe tools to show the power of the Creative Cloud.

The lynchpin to all of this is the app Adobe Capture. This recent app is an amalgamation of various Adobe mobile apps like Adobe Color, Adobe Brush, Adobe Hue and Adobe Shape. Essentially it’s a way to capture a photo and create a shape, a pattern, colours or even a look (essentially a colour graded filter) to apply to other images.

Ok, so here’s what I asked the kids to do. I told them to go out and take two photos. One photo that you will use to create your own custom brush, and one photo to create their own custom pattern. Although I had showed them what a custom brush and pattern looked like before they went out, I saved showing them how to do it on the app until they all came back in. By the end of the first session, they had all saved their brushes in a creative cloud library on the iPad.

The second session was using the app Adobe Sketch and choosing their custom brush from the creative cloud library. Using that brush, they were free to draw whatever picture they wanted. Those pictures were then saved into their creative cloud libraries.

The third session they got on the computers in Photoshop to open up a template I created. The template (see below) basically has a transparent background and a lower third on top with some text to write over with their names. They needed to access the creative cloud library and bring in their sketch and then their pattern and put that as their background. Finally, they needed to put their names on the lower third.

So, you can see, plenty of fun to be had, and lots of creative choices along the way. I should say, there are a couple of issues using creative cloud libraries. Let’s go through them and what I did about them.

1) You need to have an Adobe ID to login to creative cloud, and you need to be 13 years or over to have one.

Ok, so my kids are younger than that. So I do what every other teacher does, and that’s create class accounts. I have 13 iPads and 13 computers. Each computer and iPad (say # 1) are linked to the same account. So you can create an Adobe account like yourschool+1@gmail.com and link the iPad and computer to that. Not 100% kosher, but not illegal by any means. I know plenty of educators that do this for their classes.

2) You need to have a license at your school that supports Creative Cloud libraries.

Check to see what your license includes, because many do not allow connections to the creative cloud.

Having said that, this was a fantastic project and I loved what the kids came up with. Below are three videos (one for each session) that goes into the workflow, and below that are a few examples from the students.

** Apologies for the sound. I wasn’t at my usual recording locations **

This slideshow requires JavaScript.

15

Honing Skills Using Adobe Sketch (Grades 2 & 6)

The mobile apps Adobe Draw and Adobe Sketch are almost identical. Both are drawing programs, both have the same interface and the same layering functionality. The difference mainly lies in what they are meant to be used for. Adobe Draw is supposed to be for creating vector artwork. The kind of artwork that can be scaled up and down without degrading the quality.

Adobe Sketch offers the same kind of tools but with the idea of – as it says – sketching artwork with built in or custom brushes. I touched on Adobe Sketch when the grade 4s did their project using Adobe Capture, Adobe Sketch and Photoshop. In that activity, the students created custom brushes out of photos they took using Adobe Capture.

Here I used this app with two year levels. The grade 2s were asked to sketch two objects – a living thing and a non-living thing. This related to their inquiry unit in their classroom. To do this, I allowed them to search for images on Google. What I wanted was for them to try and sketch an object they see in front of them, not one from a picture in their head. I wanted them to pay attention to the little details, and try and get proportions right. Some students chose something challenging like a horse or a tiger, and some went for something quite basic like a tree. I was quite strict with students choosing something “easy”, they had to get all the details right. For instance, when doing the non-living thing, two students wanted to do a soccer ball. The first time they came to me, it was just a circle. I sent them back saying I need to be able to tell it’s a soccer ball, not just a circle.

Really, that line was something I repeated again and again to the students. It doesn’t have to be perfect, but it needs to look something like what you have in front of you to sketch. If I’m confused by what you’ve done, maybe have a go at something easier. Many students reevaluated what they needed to do and looked for other pictures.

Once they were done, I collected the pictures, and made them into posters in Photoshop, labeling living and non-living things. Here are some examples:

With the Grade 6s, we went back to the idea of tracing artwork like I did last year with the Grade 1-2s, but gave these older students a challenge in trying to sketch Manga characters. In this case, I gave them some images in a library to choose from and gave them a couple of sessions to get it done. I chose Manga images because of the difference in style. One way of learning how to draw in this way is to follow and copy an example. The eyes are a big element of the style, as is the exaggerated expressions. I had some boys and girls in my library of examples, as well as a few Manga creatures (yes, I did get Pikachu). This proved to be a very popular lesson and produced some lovely work. Unfortunately, even with a couple of lessons, not everyone got to finish.

Here are some of my favourites:

This slideshow requires JavaScript.

The process of bringing an image into Adobe Sketch and using it as a background to trace over is practically the same as using Adobe Draw. You can find the post on that process here on my lesson on tracing with Adobe Draw.

 

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.