Humber Graphic Design Showcase 2026 Mark-Anthony Karam // @edtechxd 2026-04-09 | You're invited! Celebrate our Humber Polytechnic Graphic Design students and grads on April 23rd. Check out projects, portfolios, and participate in hands-on design activities!Visit our website for details. showcase.humbergdes.ca Music from #Uppbeat (free for Creators!):uppbeat.io/t/ottomp3/coconut-jamLicense code: OAYXW0KBEU6XL9KJ
Humber Polytechnic Graphic Design Showreel 2026 Mark-Anthony Karam // @edtechxd 2026-04-09 | Apply: http://humbergdes.caBecome a #HumberGDES student!Launch your career as a graphic designer in visual communication and creative strategy!Humber Polytechnic's Graphic Design program prepares you to become a versatile designer capable of producing creative communication solutions for brands, digital experiences, motion graphics, websites, and multi-platform visual strategies for creative industries.Produce a professional portfolio through studio-based learning, industry-focused projects, critiques, and emerging technology while building the confidence, connections, and collaborative experiences needed to launch your career. Graduates develop the creative, technical, and strategic skills needed to work across advertising agencies, design studios, technology companies, media organizations, publishers, nonprofits, retail brands, startups, entertainment companies, in-house creative teams, and their own freelance design companies.Ready to build your portfolio, grow your creative network, and start designing your future? Apply now!#graphicdesign #humberpoly #humberpolytechnic #humbercollege #humbergdes #portfolio #design #adobe #typography #motion #webdesign #photoshop #illustrator #indesign //Video Reel Credits: Motion design & video editing by: cjveloso.caArt direction, content creation & photography by: http://mark-anthony.caMusic from #Uppbeat (free for Creators!):uppbeat.io/t/ottomp3/coconut-jamLicense code: OAYXW0KBEU6XL9KJ
Part Deux: Humber GDES+MMDD xMUSIC Album Art Showcase. December 9th 2025 at 11:30am-2:00pm. Mark-Anthony Karam // @edtechxd 2025-12-05 | Join our first-semester Graphic Design #HumberGDES & Multimedia Design & Development #HumberMMDD students on December 9th 2025 at 11:30am-2:00pm, as they showcase their end-of-semester design studio project.This year, some of our students collaborated with the Bachelor of Music program to design album covers for their thesis projects. #albumart #graphicdesign #Design #Typography #Photoshop #Illustrator #MotionDesign #WebDesign Music from #UpBeat (free for creators!):upbeat.io/t/walz/golden-ageLicence code: GTZXVMHFVHIBAMSH
HumberGDES & HumberMMDD Album Art Showcase Mark-Anthony Karam // @edtechxd 2024-12-09 | Join our first-semester Graphic Design #HumberGDES & Multimedia Design & Development #HumberMMDD students on December 12th 2024 at 11:00am-2:00pm, as they showcase their end-of-semester design studio project.#CreativeThinking #Design #Typography #Photoshop #Illustrator #MotionDesign #WebDesign Music from #UpBeat (free for creators!):upbeat.io/t/walz/golden-ageLicence code: GTZXVMHFVHIBAMSH
Humber Polytechnic, Graphic Design Program — Portfolio Reel. Mark-Anthony Karam // @edtechxd 2024-04-02 | Visit our #HumberGDES website for more details and how to apply: http://humbergdes.caHumber’s Graphic Design, Advanced Diploma program (GDES) offers a learning experience that prepares students for the design careers of the future. Our program develops strategic designers who wish to create visual communication strategies through a mix of cross-collaborative opportunities and hands-on training. Our program enables students to combine art, design thinking, and creative technologies to produce innovative solutions with a human-centred design approach in the areas of interactive design, branding & editorial design, user experience (UX), information design, and production art. Additionally, our program will prepare you for your career through professional practice and entrepreneurship to round-out a comprehensive skill set to attain employment or freelance work.#graphicdesign #humberpoly #humberpolytechnic #humbercollege #humbergdes #graphicdesign #portfolio #design //Video Reel Credits: Motion design & video editing by: cjveloso.caArt direction, content creation & photography by: http://mark-anthony.caMusic from #Uppbeat (free for Creators!):uppbeat.io/t/kidcut/say-thatLicense code: RMHSKOE5HPM8DRB9
Typography Tips: Hyphens & Dashes Mark-Anthony Karam // @edtechxd 2023-12-04 | Just a short for my Typography 1 students.Typography rules for using hyphens, en dashes, and em dashes.
Typography Tips: Tracking & Kerning Mark-Anthony Karam // @edtechxd 2023-12-04 | Just a short for my Typography 1 students.Typography rules for tracking and kerning.
Typography Tips: Leading & Line-height Mark-Anthony Karam // @edtechxd 2023-12-04 | Just a short for my Typography 1 students.Typography rules for leading and line-height.
Adobe Illustrator: Vector Rocket Tutorial Mark-Anthony Karam // @edtechxd 2022-09-18 | In this video, we use some of the tools we've learned in previous video lessons to create a vector composition. We will use basic shapes, the pen tool, and transform tools; while learning how to use layers, the eyedropper tool, and the shape builder tool to create a vector rocket illustration.Demo Files: dropbox.com/s/8fmeq5ffcepeq1p/Vector%20Rocket%20Demo.zip?dl=0///TIME STAMPSAnalyze Composition: 00:00:48Create New Document: 00:01:16Tool Setup: 00:02:12Place Image: 00:03:11Layers & Drawing Shapes: 00:04:43Transform & Reflect 00:11:16Offset Path: 00:14:44Basic Shapes: 00:16:02Eyedropper Tool/Sampling Colour: 00:20:20Grouping Objects: 00:25:55Shape Builder Tool: 00:29:02Type Tool (Point Text): 00:33:08Symbol Sprayer Tool: 00:37:54Saving Files and PDF and JPG: 00:44:00Summary: 00:45:32///*This video is part of a series of introductory lessons for my graphic design students. Some lessons were delivered in a blended format. ie: remote-online & in-person.
Adobe Illustrator: Pen Tool Basics Mark-Anthony Karam // @edtechxd 2022-09-18 | In this video, we'll learn how to use the pen tool with Adobe Illustrator and use modifier keys to perform some of its drawing functions.*This video is part of a series of introductory lessons for my graphic design students. Some lessons were delivered in a blended format. ie: remote-online & in-person.
Getting Started with Adobe Illustrator: Basic Shapes Mark-Anthony Karam // @edtechxd 2022-09-18 | In this video, we'll go through some of Illustrator's basic shape tools and get familiar with using modifier keys to perform shortcut commands.///Modifier Keys: 00:00:18Basic Shapes: 00:01:30Rectangle Shapes: 00:02:15Ellipse Shapes: 00:07:11Spiral Art Shapes: 00:10:15Line Shapes: 00:10:52*This video is part of a series of introductory lessons for my graphic design students. Some lessons were delivered in a blended format. ie: remote-online & in-person.
Getting Started with Adobe Illustrator: The Anatomy of a Vector. Mark-Anthony Karam // @edtechxd 2022-09-18 | In this video, we will be introduced to Adobe Illustrator and go over the anatomy of a vector graphic. We will compare vectors to raster based graphics and learn the various types of anchor points, paths, and attributes that are used to create vector objects using Adobe Illustrator.///Overview: 00:00:15Vector Anatomy: 00:02:28Anchor Points: 00:02:46Paths: 00:03:33Attributes: 00:03:48*This video is part of a series of introductory lessons for my graphic design students. Some lessons were delivered in a blended format. ie: remote-online & in-person.
Getting Started with Adobe Illustrator: The Workspace. Mark-Anthony Karam // @edtechxd 2022-09-18 | In this video, we'll take a look at the workspace of Adobe Illustrator, including setting up documents, menus, and panels.*This video is part of a series of introductory lessons for my graphic design students. Some lessons were delivered in a blended format. ie: remote-online & in-person.
File and Folder Management for Designers Mark-Anthony Karam // @edtechxd 2021-09-21 | *This video was created for my first year graphic design students. In this video, I go over how to organize and manage your files and folders for our design courses.Folder Structure Infographic: mark-anthony.ca/file-management-folder-structure-infographic-for-designersDesign File Worksheet: dropbox.com/s/31t4x34ipdv3uo3/file-type-definitions.docx?dl=0Web Design File Worksheet: dropbox.com/s/tiw91fhfy9kznzz/web-terms-resources.docx?dl=0///File Types: 00:00:20Image Files: 00:01:09Naming Files: 00:01:28Backing Up Files: 00:01:59Folder Management for print projects: 00:02:44Folder Management for web projects: 00:03:55*File & Folder Management Practice Exercises: 00:05:03File Storage Options: 00:05:33Creating and Organizing Folder Demo: 00:05:46
Create a Simple UI Style Tile Using Adobe XD Mark-Anthony Karam // @edtechxd 2020-11-09 | Adobe XD UI Style Tile Template: mark-anthony.ca/product/ui-style-tile-templateIn this video we will use Adobe XD to design a style tile. Once you’ve collected inspirational elements such as fonts, colours, imagery, and graphical elements to create a mood board, the next step in the design process is to design a semi-fleshed out Style Tile. ///TIME STAMPSCreate New Document: 00:01:52Grid Setup: 00:02:01Section Headings: 00:03:03Logo Placeholder: 00:05:35Adjectives: 00:06:09Typography: 00:06:42Buttons & Links: 00:12:56Iconography: 00:15:59Colour: 00:17:53Images: 00:21:17Copy Artboard: 00:23:19Save & Export As JPG + PDF: 00:23:39Conclusion: 00:24:57
07 The Perspective Grid — Swiss Inspired Typography Effects Using Adobe Illustrator Mark-Anthony Karam // @edtechxd 2020-10-05 | In this video, we will apply objects and text to the perspective grid using Adobe Illustrator. You will create text to outlines, use the paragraph alignment tools, adjust leading, apply colour and apply objects to two sides of a perspective grid.
01 Swatches & Gradients — Swiss Inspired Typography Effects Using Adobe Illustrator Mark-Anthony Karam // @edtechxd 2020-10-05 | In this video, we will apply swatches and gradients to objects and text using Adobe Illustrator. You will use tools such as the swatch panel, gradient panel, gradient tool, text tool, and the attribute panel.
09 Save & Export / Design Challenge — Swiss Inspired Typography Effects Using Adobe Illustrator Mark-Anthony Karam // @edtechxd 2020-10-05 | In this video, we will learn how to save our files as images for web and a print-ready PDF using Adobe Illustrator. You will use tools such as the Save for Web dialogue, the Asset Export panel, and the Save as function for saving a High Quality PDF.At the end of the video, you will be prompted to design your own Swiss themed artwork using the effects and tools you've learned in these tutorials. Post and Share to social media and tag me on Instagram at @edtechxd TIME STAMPSave for Web 00:00:12Asset Export Panel 00:01:00Save PDF 00:02:53Design Challenge/Conclusion 00:04:38
00 Introduction + Document & Grid Set Up — Swiss Inspired Typography Effects Using Adobe Illustrator Mark-Anthony Karam // @edtechxd 2020-10-05 | In this video, we will create our document and set up our rule of thirds grids on all artboards using Adobe Illustrator. You will use tools such as the rectangle tool, split to grid, and paste on all artboards.
03 Type on a Path & Transform Scale — Swiss Inspired Typography Effects Using Adobe Illustrator Mark-Anthony Karam // @edtechxd 2020-10-05 | In this video, we will apply text on a path and use the transform scale tool using Adobe Illustrator. You will learn how to use tools such as the transform again, the glyph panel, and shortcut keys to help you navigate the workspace more efficiently.
06 3D Effect Extrude & Bevel — Swiss Inspired Typography Effects Using Adobe Illustrator Mark-Anthony Karam // @edtechxd 2020-10-05 | In this video, we will apply a 3D Extrude & Bevel effect to text using Adobe Illustrator. You will use tools such as the text tool, the 3D effect, the eyedropper tool, and the layer panel.
08 / Bonus. The Shape Builder Tool — Swiss Inspired Typography Effects Using Adobe Illustrator Mark-Anthony Karam // @edtechxd 2020-10-05 | In this video, we will use the shape builder tool to subtract and merge objects and text using Adobe Illustrator. You will use tools such as the the type tool, line tool, the shape builder tool, and create text to outlines. The tutorial also includes a bonus example using the shape builder tool.TIME STAMPBonus Shape Builder Example: 00:08:56
02 Blend Modes — Swiss Inspired Typography Effects Using Adobe Illustrator: Mark-Anthony Karam // @edtechxd 2020-10-05 | In this video, we will learn how to apply blend modes to objects and text using Adobe Illustrators transparency panel. You will learn how to convert text to outlines, use tools such as the colour panel, swatch panel, and text tool.
05 The Blend Mode — Swiss Inspired Typography Effects Using Adobe Illustrator Mark-Anthony Karam // @edtechxd 2020-10-05 | In this video, we will learn how to apply the blend tool to type and objects using Adobe Illustrator. You will use tools such as the swatch panel, text tool, and the layer panel.
04 Envelope Distort — Swiss Inspired Typography Effects Using Adobe Illustrator Mark-Anthony Karam // @edtechxd 2020-10-05 | In this video, we will apply a 'make with mesh envelope distort' to objects and text using Adobe Illustrator. You will use tools such as the line tool, the distort and transform effect, the lasso tool, and envelope distort.
Headspace. A lofi playlist to design + chill to. Mark-Anthony Karam // @edtechxd 2020-05-12 | 🎧 💆🏾♂️Headspace. A lofi playlist to design and chill to. (vol.1)How’d We Get Here? #Podcast #Lofi #EdtechXD #DAFPodcast: http://howdwegetherepodcast.comListen on Soundcloud: soundcloud.com/mark-anthony-karam/sets/a-lofi-playlist-to-design-chill-to///01 - Get Up, Go (Intro) 00:00:0002 - Commute 00:00:2003 - Pumpkin Spice 00:04:3304 - Monday, 8am 00:06:3205 - Style Guides 00:09:1006 - Week 8 00:13:2907 - Take Fifffteen / Recess 00:17:3808 - Prototypes 00:21:1009 - Work Period 00:24:1610 - 11-59 (Due Dates) 00:27:0411 - Waze Home (Bonus) 00:29:40///If you’ve ever been a student or guest in my classroom, you’d notice the sounds of hiphop and jazz instrumentals leak from the classroom speakers as we work, CRIT, or present final design projects.After laying out the sound and story I’d like to present from this collection of instrumentals ( made by my nephew and music producer @danielfadelle ), I wanted a sound that would also compliment my ‘How’d We Get Here? Podcast’ for students and teachers to listen to while working, designing, or just relaxing. This playlist mix tells a story of “a life in the day of…” and our headspace as we go through the process of design and the weekly grind of everyday life. Let me know if you catch the themes behind the tracks/playlist.S/O to my nephew D for producing these instrumental beats and for my podcast / video tutorials. 🙏🏾 👑 Special thanks to Reuben Looyenga @reubenlooyenga for the portrait cover art illustration. To all of you who’ve ever shared a classroom with me, there’s way too many of you to tag but I see you all 👀 and you inspire me to be who I am. #Headspace #HowdWeGetHerePodcast #Podcast #Education #Design #Wellness #EdTechXD #DAFTo purchase and stream beats by @danielfadelle on Spotify, links are below. ✌🏾Enjoy,M.—Beats produced by Daniel Fadelle: http://.youtube.com/channel/UC2fGqbn0tIoUgqwSBDYIvBABuy/Stream ‘Thinking Space’ the album by Daniel Fadelle on Spotify: http://open.spotify.com/album/6D40sg0ePQ…UiRwSbI_l_x7K3sg
Create a UI Style Guide Prototype Using HTML + CSS Grid. Mark-Anthony Karam // @edtechxd 2020-04-06 | Introduction: 00:00:04UI Sketch Sheet Download: 00:00:50Document Setup: 00:01:09Google Font Import: 00:01:53Type Scale: 00:04:21Header, Logo + Navigation: 00:06:15Hero Section + Animation: 00:10:12The Grid Section using CSS Grid: 00:14:34The Colour Section using CSS Grid: 00:18:22Up Next + Conclusion: 00:20:50///In this video, we’ll take our existing UI style guide from our e-commerce web design assignment and code a HTML and CSS prototype using a combination of CSS Grid + Floats.///Download: UI UX Sketch Pad Sheets – mark-anthony.ca/wireframe-sketch-pad-sheetsView Project Folder Infographic: dropbox.com/s/0i3nc2kd2gplznj/folder-structure.pdf?dl=0 Download: Web Template File – dropbox.com/s/b719tx4p0i0m93j/html-css-template-start.zip?dl=0 ***Read the code notes + slide deck in our course lesson files on Blackboard. Music by: DAF for EdTechXD
Create a Web Design Mockup from a Wireframe Using Adobe XD Mark-Anthony Karam // @edtechxd 2020-03-25 | Adobe XD UI Style Tile Template: mark-anthony.ca/product/ui-style-tile-templateDuplicate Artboard: 00:00:51Importing Images & Assets: 00:01:33Responsive Mockups: 00:04:46iPhone 11 Layout Demo: 00:05:40Overview: 00:09:27- - - - In this video, we’ll take an existing wireframe and use it to build a static mockup for desktop and mobile layouts.Exercise Files:docs.google.com/presentation/d/1InBp5socztzy2N6RMAiFs_guyTmVNvvVMg_kNe7yYHA/edit?usp=sharing Music by: Profound Beats (RIP)
Create a Simple Wireframe Using Adobe XD Mark-Anthony Karam // @edtechxd 2020-03-25 | Document set up: 00:00:46Grids & Layout: 00:01:16Align & Distribute 00:03:30Placing Elements on a Grid: 00:07:26Wireframe Tips: 00:07:54Summary: 00:10:48- - - - In this video we’ll create a simple low to mid-fidelity wireframe using Adobe XD. We’ll apply some really basic layout rules, like setting up grids, using the alignment tools, and distributing space for page elements.We’ll also use basic shapes as placeholder elements for our wireframe, while applying colour, and labelling our page elements with XD’s text tools.After completing our wireframe in XD, we can duplicate our layout and use it as a foundation to build our mockups for desktop and responsive layouts.Exercise Files:dropbox.com/s/r4cr1duvtr2iaiq/wireframe-mockup-ex-files.zip?dl=0Music by: Profound Beats (RIP)
Vector Rocket Ai to GIF Tutorial Mark-Anthony Karam // @edtechxd 2017-09-20 | View Tutorial: mark-anthony.ca/vector-animation-tutorial-using-adobe-illustrator-photoshopFinal example of my sketch to Ai to Ps GIF tutorial. Adobe Illustrator (level 1 course)
01 - Defining Highlights and Shadows: Creating a Vector Portrait Using Adobe Illustrator CC Mark-Anthony Karam // @edtechxd 2016-11-19 | © Mark-Anthony Karam | 2018
07 - Drawing Hair With The Blob Brush: Creating a Vector Portrait Using Adobe Illustrator CC Mark-Anthony Karam // @edtechxd 2016-11-19 | © Mark-Anthony Karam | 2018
05 - Applying A Midtone Colour: Creating a Vector Portrait Using Adobe Illustrator CC Mark-Anthony Karam // @edtechxd 2016-11-19 | © Mark-Anthony Karam | 2018
06 - Colouring With Blend Modes: Creating a Vector Portrait Using Adobe Illustrator CC Mark-Anthony Karam // @edtechxd 2016-11-19 | © Mark-Anthony Karam | 2018
03 - Drawing Midtone Shapes: Creating a Vector Portrait Using Adobe Illustrator CC Mark-Anthony Karam // @edtechxd 2016-11-19 | © Mark-Anthony Karam | 2018
08 - Creating A Custom Hair Brush: Creating a Vector Portrait Using Adobe Illustrator CC Mark-Anthony Karam // @edtechxd 2016-11-19 | © Mark-Anthony Karam | 2018
04 - Drawing Highlights & Shadows: Creating a Vector Portrait Using Adobe Illustrator CC Mark-Anthony Karam // @edtechxd 2016-11-19 | © Mark-Anthony Karam | 2018
02 - Document & Tool Setup: Creating a Vector Portrait Using Adobe Illustrator CC Mark-Anthony Karam // @edtechxd 2016-11-18 | © Mark-Anthony Karam | 2018
00 - Tutorial Overview: Creating a Vector Portrait Using Adobe Illustrator CC Mark-Anthony Karam // @edtechxd 2016-11-18 | © Mark-Anthony Karam | 2018
01 - The Workspace: Creating HTML5 Google Ads with Adobe Animate CC Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
02 - Creating HTML5 Documents: Creating HTML5 Google Ads with Adobe Animate CC Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
04 - Importing Images To The Library: Creating HTML5 Google Ads with Adobe Animate CC Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
03 - The Properties Panel: Creating HTML5 Google Ads with Adobe Animate CC Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
05 - Placing Images On The Stage: Creating HTML5 Google Ads with Adobe Animate CC Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
07 - Creating HTML5 Google Ads with Adobe Animate CC: Adding Keyframes To The Timeline Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
06 - Converting Images To Symbols: Creating HTML5 Google Ads with Adobe Animate CC Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
10 - Publishing Timeline Animations: Creating HTML5 Google Ads with Adobe Animate CC Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
08 - Creating Timeline Animations: Creating HTML5 Google Ads with Adobe Animate CC Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
09 - Adding A URL Using Actionscript 3.0: Creating HTML5 Google Ads with Adobe Animate CC Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
11 - Creating A Google Ad Web Mockup: Creating HTML5 Google Ads with Adobe Animate CC Mark-Anthony Karam // @edtechxd 2016-11-12 | creating HTML5 Google Ads with Adobe Illustrator and Adobe Animate CC
