Quotes:

Study without desire spoils the memory, and it retains nothing that it takes in.

owl

HumberGDPW

 

Launch HumberGDPW.com

 

I recently developed a newly designed website for Humber College’s Graphic Design for Print & Web (GDPW) program. The purpose of the new website is to showcase current and past student’s work–along with–providing information for future students and employers. Usability and navigation were some of the key components of making this website functional and easy to use. To accomplish this, the site takes on a responsive design approach to maximize the users experience on their mobile devices. The site was built using HTML5, CSS and jQuery for simple animations. A slide-panel menu for the responsive layout was added for the user to have access to the site’s navigation at any time. The website also has a database system, which enables an admin to edit and upload new content for future graduates. The applications and languages I used to design and develop the site were: Adobe Illustrator, Adobe Photoshop , jQuery and MySQL.

To maximize the website’s social reach to it’s users, this project also included the development of a WordPress content management system and the creation of social networks for the HumberGDPW program. Current students and alumni can keep in touch with each other through HumberGDPW’s Twitter and Facebook social networks, and the GDPW’s blog. The blog is an extension of the main website, which allows students to get access to the GDPW program’s news & events, job board postings and various information about the program’s developments and partnerships. In addition to providing information to potential applicants and current students of the GDPW program, the website provides Alumni with an outlet to stay in contact with their peers and faculty throughout their careers. A ‘Showcase’ section on the blog will carry student success stories and host achievements of their current students and faculty throughout the year. Students and applicants can also follow HumberGDPW on Twitter and Facebook to stay connected and keep up-to-date with the program and their course offerings.

Read more…

gta5poster

In this tutorial, I will go through the steps for streaming video within the Adobe Digital Publishing Suite. Adding video content to your DPS projects can add more value to your articles but it also adds to your folio’s file size. This also uses quite a bit of your readers bandwidth when downloading your folio. By streaming video and audio content to your DPS folio, you can now keep your folio size down in size and increase loading times and downloading speeds for your readers. Before deciding on whether or not you should stream your video content vs embedding it, you should understand that your reader may not have WiFi access or Data on their device at the time of reading your digital publication. They may also have a weak WiFi or Data signal, which will make the video buffer throughout its duration. Personally, I would recommend streaming video if the video is not crucial in moving the story or content further. If the video’s purpose is to deliver bonus content to a story, which does not affect the article in anyway, I would opt for streaming over embedding your video.

With that said, let’s go through the steps of streaming a YouTube video in a Digital Publishing Suite folio.

Download Source Files

 

Read more…

nike_ad

During my last class, I went through creating a pop-up effect using Multistate Objects (MSO’s) within the Adobe Digital Publishing Suite. This is a great technique to display more information about a given product, content or advertisement within your DPS publication. In this tutorial, I will be reviewing the process of building out a pop-up effect using the Object States panel.

Let’s Begin!

Download the resource files and create a folder called “Nike Volt.” You can create another folder inside and name it “links.” within the resource file folder, there is an image named Nike-Volt.jpg. Save the image inside of the Nike Volt folder you created, as well as, the icon – show.png and icon-hide.png files.

Download Demo Files

 

Read more…

Poster-image

View Demo

 

Recently, I decided to introduce Adobe Edge Animate to my class as a means of creating simple timeline animations to be used in their web and interactive projects. One project, is a WordPress powered blog theme and the other, is an interactive magazine, using the Adobe Digital Publishing Suite. With Adobe Edge Animate, creating simple javascript animations for web banner ads, article headings and image galleries in your web projects are possible. The creation of animated magazine covers for the Adobe Digital Publishing Suite are also some of the things that Edge Animate can be used to develop.

In this tutorial, I will be going through the creation of an animated web banner that can be used within a web page. If you’re coming from a Flash environment, some of these tools and concepts may be familiar to you.

Download Assets

 

Read more…

flyknit

Everyone know’s I love running and I’m a passionate about my sneakers. So when I received the new Nike Free Run Flyknit’s for review, I was ecstatic to say the least. At first glance the shoe immediately reminded me of Nike’s patented Huarache from the early 90′s. A shoe with advanced technology that combined the durability of an athletic cross-trainer with the snug comfort of a fitted sock. There’s no question that these are two vastly different shoes that serve two different purposes.  However, my point is, that the Flyknit Free Run shares the same advanced technology as did the Huarache when it was first released.

Read more…

pepsi_can_ad

With my students now working on their Technical Drawing assignment, I decided to put together this quick overview tutorial that will go over a few tips and techniques to begin colouring a vector illustration. In this assignment, students may use Illustrator’s Gradient Mesh to add depth and realism to their technical renderings. Student’s may also use any other tools, effects and techniques to create a realistic vector illustration.

Read more…

scroll-to-top-screenshot

View Demo

 

When creating a website with lengthy content, such as a blog or e-commerce site, your users may end up having to scroll through your articles and product pages for some time. If your website does not have a fixed or sticky navigation, it can be frustrating for some users to have to scroll all the way back up to the top of your page to access your navigation menu. An alternate way that can help your users quickly go back to the top of the page and get to the navigation menu is to have a floating or fixed “scroll-to-top” or “back-to-top” button appear on the page when the user starts to scroll down your page.

In this tutorial, we will add a scroll-to-top button to a webpage using jQuery.

Let’s Begin!

Read more…