CNH KIWIN’S
TECHNOLOGY MANUAL 2016-2017
R
Table of Contents
04 Technology Committee Introduction 08 Roles and Duties 10 Graphic Design 22 Web Development 34 Video Production
46 Newsletters 52 Key Club Graphic Standards 62 Technology Awards 72 Social Media 80 Closing
DIA NGELO DIANGELO SOR IANO SORIA NO
DISTRICT TECHNOLOGY CHAIR
N E W T ERM, WH O DIS ? What's up CNH KIWIN'S, I'm DiAngelo Soriano, your District Technology Chair for the 2016-2017 term. I'm a senior at Hercules High School (C/O 17 for life fam). I've been a member since sophomore year, and I'm hoping to finish my KIWIN'S journey strong and full of lasting memories. I've been making videos since I was in 6th grade, and I've been about that tech. life for just as long. I hope I can bring my passion for technology into the media that the Technology Committee and I create for the District. Being able to work with people from far and wide is an experience I'll never forget, and I know that this year will be full of fun, service, and Graphic Standards (Check out my Youtube: youtube.com/diangelosoriano). Yours in Service, DiAngelo Soriano 2016-2017 CNH KIWIN’S District Technology Chair
NH N H UNG TRA N TR AN
DISTRICT BULLETIN EDITOR
HE L LO ! My name is Nhung Tran and I am your District Bulletin Editor for the 2016-2017 term! If you have any trouble pronouncing my name, it’s “Nyoom” like a car speeding down a street. I began designing when I was around 6th grade. I realized how complicated the field was and I fell in love with it. I studied psychology and media, and invested thousands of hours to produce the designs I make today as a high school junior. I hold such a huge respect for technology and I love every part of it. Previously, I served as my club's Bulletin Editor and in the District Technology Committee as the Head of Graphics (That’s how I grew my love for Key Club Graphics Standards). I have met a diverse group of people throughout my years in KIWIN'S. It’s such an indescribable and heartwarming feeling when we are able to work together despite our differences and distance, and that’s when I knew I wanted to invest in this organization. I can’t wait to show what our District is capable of through technology! Hit me up if you would like me to design something for you! Yours in Service, Nhung Tran 2016-2017 CNH KIWIN’S District Bulletin Editor
AARON ZEPEDA DESIGN/VIDEOGRAPHY Hello everyone! My name is Aaron Zepeda, and I currently serve the Goldstone Division as their Chairperson of Technology, and my club's Tech Chair. I'm also a senior at Glen A. Wilson, and have been a member of KIWIN'S since my sophomore year. I discovered my love of graphic design when I made my first t-shirt design in middle school, and have been developing my passion for it ever since. I work with others in hopes that they learn about the wonders of creation and design, along with its impact in the world. Being in the Tech Committee has given me a place to practice and refine the skill, all with a special purpose in mind: for the service of others. I can't wait to see what the year unfolds, and I'm excited to share my excitement with all of you!
BREANNA FONG VIDEOGRAPHY/PHOTOGRAPHY Hello, I am Breanna Fong and I am from Jade Division. Since I have been the Historian for Hercules HS KIWIN'S, I only knew how to take good quality photos as well as photo-editing. I only had experience in photography with no experience in graphic designing. Since I joined, the Technology Committee has changed my perspective in the technology field. It has brought me closer to amazing and talented people who have helped me improve in graphic designs and video productions. I had never thought this committee can help me learn to love taking videos, and I can't wait to learn more from it. Overall, this has been the highlight of my third year of being a part of KIWIN'S, and I love every laugh, every skype call, every minute I spend with the Technology Committee.
PATRICIA DINH DESIGN/PHOTOGRAPHY Hi everyone! I’m Patricia Dinh and I’m a member from Jet Division. I’ve loved technology since I was young, and am honored to be able to contribute the skills that I have while actively involving myself in our community as a member of KIWIN’S. I have steadily developed a passion for photography and photo-editing since middle school, and I am definitely excited to learn about graphic design, video production, web design, and so many other useful skills by being a part of this wonderful committee this upcoming term. Getting to work with everyone in this Technology Committee has undoubtedly been one of the best experiences I’ve ever had and will be an unforgettable memory as I develop more skills and continue on into the best year of KIWIN’S yet.
VICTOR HUYNH DESIGN/PHOTOGRAPHY Hello hello! I'm Victor Huynh and I'm one of the historians at La Quinta KIWIN'S from Jet Division. I've been interested in technology ever since I knew what it was. I would always go around the internet to see what new phones and other devices were like. Although my interest in photography and graphic design are probably the most prominent, I also enjoy food, YouTube, and culture! I really like speaking and learning other languages and watching fat cat videos in my free time. Weirdly enough, I've also recently developed an addiction to Yakult and I don't think it's very healthy. I'm also usually sleep-deprived, which is also bad. Oops! Besides my funkiness, I plan to use Tech. Committee as a way to express myself and contribute to a greater good that is the work of CNH KIWIN'S!
THE RO L E OF
EDIT OR S
C RE A T E GR A P HI CS, F LY E R S,
A N D I L L U S T R A T ION S RE D E S I G N A N D UP D A T E
T HE CLU B W E B S ITE
C O M P I L E VI D E OS T H R O UGH
TH E MA N I PULA T I ON OF
V A R I OUS ME DIAS H A VE K N OWLE D GE OF E X T E RNAL
D EVIC ES AND S OF TWA R E P RO M O T E T HE C L U B ,
D I V I S I O N , A N D DI ST R I CT
G R A PHIC D E SIGN
Software
Ai Adobe Illustrator is highly recommended for high resolution vector-based graphics. In Adobe Illustrator, it is important to get comfortable in working with shapes and lines to build graphics. The option to freehand draw is available. Most designers prefer Illustrator for their work.
Ps Abobe Photoshop is an alternative to Adobe Illustrator, though it is more geared towards photo editing and illustration. Photoshops allows graphic pen stability for illustrating and basic photo editing options unlike Illustrator. Most artists prefer Photoshop for their work.
Hardware
A graphics tablet is useful in providing the designer the efficiency of a pen and paper rather than a mouse or trackpad. It can definitely shave down the time required to make certain graphics. Graphics Tablets come in many brands and sizes, Wacom Tablets being one of the reputable.
Fonts and Spacing
K
San serif fonts are modern and beautiful. Use San Serif fonts for Titles, Subtitles, and Body paragraphs. Key Club International recommends the usage of Myriad Pro, Century Gothic, or Verdana.
K
Serif fonts have a classic appearance. Serif fonts should be used on body paragraphcs only. Key Club International recommends the usage of Garamond Premier Pro or Goudy Oldstyle.
Giving Words Space
Ohana Ohana too close to bottom edge
Ohana acceptable
too close to top edge
Ohana acceptable
Ohana too close to left edge
Ohana acceptable
Typography
Direction has a
purpose Direction guides the reader’s eyes and creates interaction. This can be exemplified as reading from left to right, up and down, or applying different font sizes. Psychologically, people notice big fonts first before reading the smaller so use direction strategically.
Contrast is TRADITION Contrast is displayed through using different colors, sizes, and fonts. Light backgrounds pair with dark fonts and in special cases, light fonts. Dark backgrounds pair with light fonts. It is not recommended to use the pure saturation of a color as it strains the eyes. Stick with a shade, tint, or tone of any color.
th y h R creates
m
LIFE
Rhythm creates viewer interaction through text layout. Arranged words immediately evoke a mood, which is important when introducing a visual project or item. It is important to find a balance in using rhythm, as too much can stress the eyes and too little can be easily dismissed by viewers.
Basic Rules of Graphic Design
The job of a graphic designer is to effectively communicate with the audience using visual content. The audience should always be kept in mind when designing. Ask yourself, “Would they be able to read this?”, “Does this call others to action?”, and “Does it look aesthetically appealing?” Do not use crazy fonts and numerous colors, especially when society is favoring minimalism.
Psychology plays a part in graphic design. Color is a major component as it affects the mind subconsciously. Each color casts a mood and are assigned purposes. For example, the color blue relaxes the mind and is mainly used to promote technology.
Less is more It’s tempting to fill every space of your design, but doing so can create distractions and take away the purpose of effective design. Removing unecessary elements will make your designs more mature and will place less stress on the audience. Negative space is there for the audience’s eyes to rest.
Y
E
A
H
Good contrast is extremely important in design. Avoid using light font on light backgrounds, dark fonts on dark backgrounds, or similar colors. Don’t make the audience squint to read about your event.
BIG GRAPHIC
MEDIUM TITLE SMALL EXTRA INFO
A hierarchy makes it easier for the audience to go through the information. Always have a big, medium, and small element. There is no need to have every element big just to fill up space.
Just be good. Many fuss over trying to be original in the design world because it seems like almost everything has been done. Rather than being orginal all the time, it is more important to be good. Reflect back to the basics and go at your own pace and artistic style. This produces more quality work rather than stressing over originality, which is simply a bonus.
Flat Design
Flat design is a minimalistic design approach that emphasizes usab two-dimensional/flat illustrations composed of layered, manipulated sha
bility.It features clean, open space, crisp edges, bright colors, and apes. Long shadows usually accompany flat design to provide depth.
Flat Design Examples
WE B D ESIGN
Software
Dw The most commonly used software is Adobe Dreamweaver. Without much coding needed, you can use Adobe Dreamweaver to easily design your website and upload onto a host.
< >
For a more adventurous and advanced method of web design, you may use a notepad such as Notepad++ to write your code. There are plenty of applications available based on your experience level which allows everyone to learn web design.
Hardware
</>
</> </>
</>
Web Development has been made easy with recent technological advancements. With an Internet connection, you can easily code with applications found on the Google Chrome Web App Store. Coding can be done on tablets and mobile phones. However, for the true coding experience, use a desktop application.
Coding Languages
HTML H yperText M ark u p L an g u ag e HTML is the standard markup language used to create websites. Browsers translate contents of an HTML file into webpages.
CSS Ca sc a d i n g Sty l e Sh e e ts CSS defines the appearance of contents in a web page by applying rules within a markup language file. It controls the color, font, and organization of a webpage.
J a vasc ri pt Javascript is a programming language that dictates user interaction by embedding scripts in markup language files. It is created for animation.
jQ u ery jQuery is an online Javascript library containing scripts. It is designed to simplify Javascript coding.
Basic Structure HTML documents contain HTML tags which describes different document content (e.g. the <p> tag stands for paragraph). Here is a simple HTML document along with the breakdown of common terms used in coding. < ! D O C T YPE h t m l> < ht ml > < he a d > < t i t l e > T e r m s </ tit le > < / he a d > < body > < h1 > T h e B as ic s < / h 1 > < p> T h e r e ar e c o d in g t erms. < /p> < / bod y > < / ht m l>
Tag Start Tag
End Tag
< bo d y >
< /b o d y >
le f t- a ng le bra c k e t
charact er(s )
r i g h t - an g l e br ack e t
left-angle bracket
charact er(s )
rig h t -a n gl e br a c k e t
Element
< title> Terms </title> start tag
co n t e n t
end tag
Sample Code
(Spaced out for visual purposes.)
<!DOCTYPE html> <html> <head> <title> KIWIN ’S </title> </head> <body>
<h1>One Family. One Mission. One Word: KIWIN’S </h1
<p> KIWIN’S, the 32nd District of Key Club Internationa </body> </html>
Translation
DEFINES DOCUMENT AS HTML BEGINS HTML DOCUMENT PROVIDES INFO ABOUT THE DOC PROVIDES A TITLE FOR THE DOC (VISIBLE ON TAB) ENDS <head> TAG VISIBLE CONTENT
1>
HEADER TEXT
al...</p>
PARAGRAPH TEXT END OF VIS IBLE CONTENT END OF HTML DOCUMENT
Fo r mo r e c o d i ng t i ps, vi si t cod eacad em y . co m
Code Embedding
SHARE
EMBED
Embed Buttons Most sites such as Issuu and Youtube contain embed buttons which allow you to copy a snippet of code which you can implement onto your website. Embedding allows the viewer to experience the content without having to leave the tab.
Website Requirements
ABOUT US HISTORY OF KIWINâ&#x20AC;&#x2122;S (32ND DISTRICT
OF KEY CLUB INTERNATIONAL)
DISTRICT PROJECTS/EMPHASES CLUB BOARD PROFILES OTHER WEBSITES (DISTRICT AND INTERNATIONAL)
UPCOMING/PAST EVENTS BRIEF DESCRIPTIONS EVENT PHOTOS OR VIDEOS
CONTACT US CLUB BOARD CONTACT INFO
Templates
Weebly
Wix
Weebly allows you to build a website using drag-and-drop features. There is a library of website templates in which you can start the layout of your website. Weebly has fairly cheap subscription plans which all remove the watermark from your website. The common Pro plan enables all drag-and-drop features.
Wix allows you to create a website with their drag-and-drop tools and apps from the Wix App Store. One drawback is that editing the website through coding is not encouraged, however, embed codes works. Wix has affordable subscription plans that remove ads and allow you to connect to a domain.
drop here
VIDEO
PR OD
O
DUCTION
Software
Ae This software can be used to edit and create videos of all shapes and sizes. After Effects may not be the most ideal for creating very long projects, but is perfect for motion graphics and short projects with effects not available in other softwares. Photoshop and Illustrator projects can be easily imported into your project to create stunning visual graphic videos.
Pr This software is more geared toward basic productions with little to no special effects, and can be used to effectively handle large projects with many sources. Premiere Pro is ideal for editors who are not as experienced with video production, but want something more than iMovie or Windows Movie Maker. Adobe Premiere Pro can be paired with After Effects to blend special effects with large project workflow. Other softwares such as Adobe Audition or Adobe Media Encoder can also be used in tandem with Premiere for maximum efficiency.
Hardware
For first time or more casual video producers, Windows Movie Maker, Final Cut Pro, and iMovie are perfect for starting off in the world of video production. Easy to use tools and workflow as well as low cost make these programs great for beginners or those on a budget.
A tripod, monopod, or other means of stabilization such as a flat surface or a roll of duct tape eliminate shaky footage and boost production value.
Most filmmakers will agree that good sound is one of the most important parts of any video. Getting external microphones close to the talent and out of harsh winds or noise will dramatically increase the quality of the video.
Video Production
NOT EVERYONE WILL HAVE ACCESS TO A PROFESSIONAL CAMERA BUT HERE ARE SOME UNIVERSAL RULES VIDEOGRAPHERS ABIDE BY. GOOD LIGHTING IS EVERYTHING AND FILMING IN DARK OR SHADED AREAS WITHOUT PROPER PREPARATION CAN RUIN FOOTAGE. PLAY WITH YOUR SETTINGS OR USE EXTERNAL LIGHTING. AVOID SHAKY FOOTAGE! USE A TRIPOD OR FLAT SURFACE TO PLACE YOUR CAMERA ON, OR BREATHE SLOWLY WHEN HOLDING YOUR CAMERA. GOOD VIDEO WILL HAVE GOOD AUDIO. EXTERNAL MICROPHONES OR RECORDERS WILL HELP. QUIET ENVIRONMENTS ARE YOUR FRIENDS IF YOU DONâ&#x20AC;&#x2122;T HAVE ACCESS TO AUDIO EQUIPMENT.
Compositions Good video should contain different angles and shots. Here are different ways to film angles for more attractive footage. Certain compositions are more effective for different situations like interviews or scenary shots. Notice how your attention moves when you frame things a certain way. Video is all about engaging the eyes. Object of focus
Other objects
Shift in audienceâ&#x20AC;&#x2122;s focus
DEPTH
LEADING
LINES
FRAMING
NEGATIVE
SPACE
RULE OF
THIRDS
Publishing Videos
Great, youâ&#x20AC;&#x2122;re finally done with that new video! But now what? Itâ&#x20AC;&#x2122;s time to make that video public via Youtube, Facebook, Instagram, or even Myspace. By publishing to one of these sites, the author of the post is agreeing to the terms and conditions of each site. Generally, social media sites will have similar rules and regulations, but no matter the site, they are bound to U.S. Copyright laws.
Any music, video, or content used for videos, particularly on Youtube, must be property of the poster, unles the video is for educational purposes or satire. That means using copyrighted music in that club video is against the law if it is posted to Youtube.
There are, however, sites or Youtube channels that provide royalty free or non-copyrighted music to use in your productions. Sorry, that new Taylor Swift song on your new club promotional video will most likely be taken down if posted on Youtube for copyright infringement.
Video created for the Club Video Contest at DCON also cannot contain copyrighted material. Generally, slideshows, private videos, or other small scale media not on Youtube will not be scrutinized for copyright claims. More information on copyright laws in the United States can be found here: www.copyright.gov/title17/
Advanced Production Accessories
V a r iab le N D Fl i ter An ND filter is basically like sunglasses for your camera. With an ND filter (NDF), you can open up your aperature and keep your shutter speed low while in video mode. A variable NDF will allow you to quickly adjust the exposure of the camera while recording (Learn how to shoot on manual video settings!). This could also be helpful in filming in an area where youâ&#x20AC;&#x2122;re experiencing constant change in external light, like an event thatâ&#x20AC;&#x2122;s both in and out of shade.
Li gh t B ounc er or Di ffuser Light bouncers and diffusers give you control over sunlight or external light. On a bright, sunny day, subjects will have unsightly shadows across their faces, but adding a reflector to the opposite side can reflect some of the lgiht back, filling in those harsh shadows. An inexpensive 5-in-1 light from Amazon is a great way to start experimenting with natural light.
LC D Viewfinder Loupe Have you ever struggled to see if something was in focus? Unable to see your LCD screen because of the sun? Get yourself a scren loupe/viewfinder. These are like little enclosures for your LCD, and with them, you’ll be able to nail focus pulling, preview your shots, and see more of the details of your LCD while you’re out in the sun, or when there are other lights producing glare on the screen.
Vide o St abiliz e rs These stabilizers will take some of the shake out of your handheld footage. For the filmmaker on the move, these are highly recommended. Don’t let the price discourage you because there are plenty of DIY/PVC stabilizer tutorials on Youtube! Smooth footage is crucial for good films.
NEW S NEWS
NEWSL
ETTERS
Tips
LEFT-ALIGN, JUSTIFY PARAGRAPHS, AND AVOID HYPHENATING WORDS KIWIN'S, the 32nd district of Key Club International, is a student-led organization that enthusiastically promotes the development of character and leadership through community service within the Kiwanis family. KIWIN'S, the 32nd district of Key Club International, is a student-led organization that enthusiastically promotes the development of character and leadership through community service within the Kiwanis family. KIWIN'S, the 32nd District of Key Club International, is a student-led organization that enthusiastically promotes the development of character and leadership through community service within the Kiwanis family.
It is more pleasing to the eye to have everything in a smooth chunk. Formatting your text with justification will make your text seem even and ordered instead of chaotic. Avoid centering paragraphs of text so that the eyes do not have to continuously move to the center. Left-align with justification allows for quick and easy reading.
HAVE A BALANCE BETWEEN VISUAL
ELEMENTS AND BODIES OF TEXT
If something can be explained in a few sentences, do so. Donâ&#x20AC;&#x2122;t try to overcomplicate anything. Then use the extra space around the text to place a visual element to retain interest with the information. With huge bodies of text, text can be built around a visual element, or make a header or footer for an easy way to get a visual element on there. It is important to gain the interest of the audience and retain it.
Configuration
COVER PAGE TO ATTRACT READERS
TABLE OF CONTENTS KEEP IT SIMPLE
EVENTS
BRIEF OVERVIEW
CLUB STATUS
INCLUDE HOURS AND FUNDS
RECOGNITION
SHOW THEM THEYâ&#x20AC;&#x2122;RE APPRECIATED
EXTRAS
BOARD, SOCIAL MEDIA, PROMOTIONS
IMPLEM
GRAPHICS S
ENTING
STANDARDS
Colors
Fonts
Sans Serif Myriad Pro
Century
Gothic
Serif
Garamond
Premier Pro
Verdana
Logos Give our seal some space. It has its own personal bubble too. Use the outer ring to judge how much space the logo needs.
Always pair our CNH KIWINâ&#x20AC;&#x2122;S Logo with the Key Club International logo.
R
New Graphics
Pencils
Visit keyclub.org/fad/cm/brand.aspx for more
graphics standards resources
Application
Hello.
Application
GET A
THIS NOTES
Application
H E Y! WHATâ&#x20AC;&#x2122;S UP?
TECHNOLOG
GY AWARDS
Club Poster
Attracts and retains new members
Use Graphic Standards
Be Original
Visually Appealing
Promote Key Club International
Dimensions 18 x 24in
Include Key Club International Seal
No theme necessary
No bearing names of schools, communities, or districts
Club Shirt Be original
Promote KIWINâ&#x20AC;&#x2122;S
Be creative
Be unique
Visually Appealing
No professional help
Encouraged to follow theme
Club Video Be original
Promote Key Club International
High quality footage
No copyrighted music
No professional help
$ Cannot spend more than $200 for production
Club Website Be innovative, interactive, creative
KIWINâ&#x20AC;&#x2122;S oriented/ KIWINâ&#x20AC;&#x2122;S related content
User friendly/ Easy accessible
Abc Links to district website
Proper gram Spelling
Original Material
Loading time reasonable
Functions well with/ without images
c
mmar/ g
Accurate, current, updated content Web blogs are not qualified
f
S OCI AL
M ED I A
F a c e boo k
Establish Facebook groups
and organized whenev PROFILE PICTURES,
OTHER PICTURES,
AND GRAPHICS
MUST BE PROFESSIONAL
Create e
Can be used to store service events photos for future reference and archiving
Create a club as a
s to keep members notified
ver releasing information
event pages for service events or fundraisers.
a physical Facebook account that represents the a whole.
I n s t a g ram
FEATURE A MEMBERâ&#x20AC;&#x2122;S EXPERIENCE
PROMOTE EVENTS AND FUNDRAISERS
HOST GIVEAWAYS OR CONTESTS
S n a p ch at
SHOW MEMBERS HOW FUN SERVICE EVENTS CAN BE
QUICK AND INFORMAL REMINDERS
CREATE A SNAPCHAT PROMOTE AN EVENT
FILTER
TO
THANKS FOR
READING! DISTRICT TECHNOLOGY COMMITTEE Mrs. Ross
Breanna Fong
Technology Committee Advisor
Photography & Videography
kiwins.diamondra@gmail.com
bfpanda48@gmail.com
DiAngelo Soriano
Patricia Dinh
District Technology Chair
Photography & Graphic Design
kiwins.techchair@gmail.com
phdinh101@student.hbuhsd.edu
Nhung Tran
Victor Huynh
District Bulletin Editor
Photography & Graphic Design
kiwins.dbuled@gmail.com
victorthanghuynh@gmail.com
Aaron Zepeda Videography & Graphic Design aaron.zepeda33@gmail.com R