1
Potato Killers
KAUNAS UNIVERSITY OF TECHNOLOGY
FACULTY OF INFORMATICS
MARIUS GRYBAUSKAS
OVIDIJUS MATUZAS
DŽIUGAS MARTINKĖNAS
RYTIS KAZAKEVIČIUS
Reklamos kūrimo technologijos
(įrankiai, metodai, pavyzdžiai)
Advertising development technologies
Group project
Jusas Nerijus
Bagdonas Kazimieras
KAUNAS, 2014
P a g e 1 | 30
2014.12.17
2
Potato Killers
Contents
1
Introduction............................................................................................................................................4
2
Adobe Flash ............................................................................................................................................5
2.1
Adobe Flash - advertising development technology ............................................................................5
2.1.1
What is Adobe Flash? ...................................................................................................................5
2.1.2
Why should I use Adobe Flash? ....................................................................................................5
2.2
Main uses of Macromedia Flash ...........................................................................................................8
2.3
Adobe Flash popularity .........................................................................................................................8
2.4
Adobe Flash projects ............................................................................................................................9
2.4.1
3
What are the standard sizes? .......................................................................................................9
Connect .................................................................................................................................................. 11
3.1
Connect - advertising development technology ............................................................................... 11
3.1.1
What is Connect? ....................................................................................................................... 11
3.1.2
Why should I use Connect? ....................................................................................................... 11
3.2
Main uses of Connect ........................................................................................................................ 12
3.3
Connect popularity ............................................................................................................................ 13
3.3.1
Mobile usage: ............................................................................................................................ 13
3.3.2
NFC & QR technology: ............................................................................................................... 13
3.4
Interesting Facts ................................................................................................................................ 14
........................................................................................................................................................................... 15
4
Adobe Photoshop ............................................................................................................................. 15
4.1
5
Photoshop - advertising development technology ........................................................................... 15
4.1.1
What is Adobe Photoshop ......................................................................................................... 15
4.1.2
Why should I use Adobe Photoshop? ........................................................................................ 16
4.2
Main uses of Photoshop .................................................................................................................... 17
4.3
Adobe Photoshop Popularity............................................................................................................. 19
4.4
Interesting Facts ................................................................................................................................ 20
HTML5 .................................................................................................................................................... 21
5.1
HTML5 - advertising development technology ................................................................................. 21
5.1.1
What is HTML5?......................................................................................................................... 21
5.1.2
Why should I use HTML5? ......................................................................................................... 21
5.2
Main uses of HTML5 .......................................................................................................................... 25
5.3
HTML5 popularity .............................................................................................................................. 25
5.4
HTML5 vs Flash .................................................................................................................................. 26
P a g e 2 | 30
2014.12.17
3
Potato Killers
5.5
Examples of websites created using HTML5 ..................................................................................... 26
....................................................................................................................................................................... 26
6
Conclusion ............................................................................................................................................ 28
7
Literature .............................................................................................................................................. 29
P a g e 3 | 30
2014.12.17
4
Potato Killers
1 Introduction
P a g e 4 | 30
2014.12.17
5
Potato Killers
2 Adobe Flashi
2.1 Adobe Flash - advertising development technology
2.1.1
What is Adobe Flash?
Adobe Flash (formerly called Macromedia Flash and Shockwave Flash) is a multimedia and
software platform used for creating vector graphics, animation, games and rich Internet applications (RIAs)
that can be viewed, played and executed in Adobe Flash Player. Flash is frequently used to add streamed
video or audio players, advertisement and interactive multimedia content to web pages, although usage of
Flash on websites is declining. Flash originated with
the application SmartSketch, developed by Jonathan
Gay. It was published by FutureWave Software,
which was founded by Charlie Jackson.
SmartSketch was a drawing application for pen
computers running the PenPoint OS. When PenPoint
failed in the marketplace, Smart Sketch was ported
to Microsoft Windows and Mac OS. As the Internet
became more popular, Future Wave added cell
animation editing to the vector drawing capabilities
of SmartSketch and released Future Splash Figure 1 – Macromedia Flash Logo
Animator on multiple platforms. FutureWave
approached Adobe Systems with an offer to sell them Future Splash in 1995, but Adobe turned them down at
that time. FutureSplash was used by Microsoft in itsFigure
early2work
with 1Figure
the Internet
(MSN),Flash
and Logo
by Disney
– Animation
3 – Macromedia
Online for their subscription-based service Disney's Daily Blast. In 1996, Future Splash was acquired by
Macromedia and released as Flash. Flash is currently developed and distributed by Adobe Systems, as the
result of its 2005 purchase of Macromedia.
2.1.2
Why should I use Adobe Flash?
2.1.2.1 Analysis
Flash manipulates vector and raster graphics to provide animation of text, drawings, and still images.
It allows bidirectional streaming of audio and video, and it can capture user input via mouse, keyboard,
microphone and camera. Flash applications and animations can be programmed using the object-oriented
language called ActionScript. Adobe Flash Professional is the most popular authoring tool for creating the
Flash content, which also allows automation via the JavaScript Flash language (JSFL). Adobe's attempt to
foster open source Flash development appears to have been abandoned.
Adobe Flash Player makes the Flash content accessible on various operating systems such as
Windows, OS X and Linux, and is available free of charge for common web browsers (as a plug-in) under a
few of the major operating systems, some smartphones and tablets, and a few other electronic devices using
Flash Lite.
2.1.2.2 Alternatives
HTML5 is often cited as an alternative to Adobe Flash technology usage on web pages. Adobe
released a tool that converts Flash to HTML5 and Google released an experimental tool that does the same.
Tools
P a g e 5 | 30
2014.12.17
6
Potato Killers
Commercial software packages that
can create SWF files include Toon Boom,
Xara Photo & Graphic Designer, Vectorian
Giotto, CelAction2D, Toufee, KoolMoves,
Express Animator, Alligator Flash Designer,
Amara Web and Anime Studio. These
applications provide additional capabilities for
creating cartoons, especially with tools more
tailored to traditionally trained animators, as Figure 4 – Animation 1
well as additional rigging for characters,
which can speed up character animation considerably. Additionally, there are programs available, which
translate 3D information into 2D vectors for display in Flash Player.
Several third-party tools are able to use and
generate SWF files, and some tools such as IrfanView are
capable of rendering SWF files, using Flash Player. Flash
Player cannot ship as part of a pure open source, or
completely free operating system, as its distribution is
bound to the Macromedia Licensing Program and subject
to proposition first from Adobe. There is no complete free
and open source software replacement which offers all the
functionality of the latest version of Adobe Flash Player.
Figure 5 - Animation 2
Open-source Flash content creation software includes
Ajax Animator, Clash, OpenOffice Impress, KToon,
Salasaga, and Synfig.
Compilers
Swfc is an open-source ActionScript 3.0
compiler that generates SWF files from script files,
which includes SVG tags. It is currently the most
complete alternative for building Flash content in
Linux, despite being entirely script-based and not
having a GUI. The Ming library is able to import and
export graphics from XML into SWF. Ming has
bindings for popular scripting languages such as
PHP and Python.
Figure 6 - Animation 3
P a g e 6 | 30
2014.12.17
7
Potato Killers
Flash 4 Linux
project was an initiative to develop an open source Linux application as an alternative to Adobe
Flash Professional. Development plans included authoring capacity for 2D animation, and tweeting, as well as
outputting SWF file formats. F4L evolved into an editor that was capable of authoring 2D animation and
publishing of SWF files. Flash 4 Linux was renamed UIRA. UIRA intended to combine the resources and
knowledge of the F4L project and the Q Flash project, both of which were Open Source applications that
provided (to some extent) an alternative to the proprietary Adobe Flash. UIRA was free software, but was
never truly completed. It reached a stage of being no more than a shell of a UI with limited functionality. Due
in part to the adoption of the DADVSI law in France, the UIRA project was shut down in January 2008,
according to the project's page in Source Forge.
2.1.2.3 Several of Microwave Flash uses
3D
Flash Player 11 introduced a full 3D shader API, called Stage3D, which is similar to Web GL.
Flash Video
Virtually all browser plugins for video are free of charge and cross-platform, including Adobe's offering of
Flash Video, which was first introduced with Flash version 6. Flash Video has been a popular choice for
websites due to the large installed user base and programmability of Flash. In 2010, Apple
publicly criticized Adobe Flash, including its implementation of video playback for not
taking advantage of hardware acceleration, one reason Flash is not to be found on
Apple's mobile devices. Soon after Apple's criticism, Adobe demoed and released a
beta version of Flash 10.1, which takes advantage of GPU hardware acceleration even
on a Mac. Flash 10.2 beta, released December 2010, adds hardware acceleration for
Figure 7 – FLV format
logo
the whole video rendering pipeline.
Flash Audio
Flash Audio is most commonly encoded in MP3 or AAC
use ADPCM,
audio codecs.
Flash allows sample rates of 11, 22 and 44.1 kHz. It cannot have
48 kHz audio sample rate, which is the standard TV and DVD
sample rate. On August 20, 2007, Adobe announced on its blog
that with Update 3 of Flash Player 9, Flash Video will also
implement some parts of the MPEG-4 international standards.[20]
Specifically, Flash Player will work with video compressed in
H.264 (MPEG-4 Part 10), audio compressed using AAC (MPEG-4
Figure 8 – Adobe Flash
(Advanced Audio Coding) however; it can also
Sound logoFigure 9 – FLV
Nellymoser
(Nellymoser Asao Codec) and Speex
format
logo
Part 3), the F4V, MP4 (MPEG-4 Part 14), M4V, M4A, 3GP and Figure 10 – Adobe Flash Sound logo
MOV multimedia container formats, 3GPP Timed Text
specification (MPEG-4 Part 17), which is a standardized subtitle format and partial parsing capability for the
'list' atom, which is the ID3 equivalent iTunes uses to store metadata.Figure
MPEG-4
2 and H.263
will platforms
not work
11 Part
– HTML5
and Flash
comparisonFigure 12 – Adobe Flash Sound logo
P a g e 7 | 30
2014.12.17
8
Potato Killers
in F4V file format. Adobe also announced that it would be gradually moving away from the FLV format to
the standard ISO base media file format (MPEG-4 Part 12) owing to functional limits with the FLV structure
when streaming H.264. The final release of the Flash Player implementing some parts of MPEG-4 standards
had become available in fall 2007. Adobe Flash Player 10.1 does not have acoustic echo cancellation, unlike
the VoIP offerings of Skype and Google Voice, making this and earlier versions of Flash less suitable for
group calling or meetings. Flash Player 10.3 Beta incorporates acoustic echo cancellation.
Scripting language
ActionScript is the programming language used by Flash. It is an enhanced superset of the ECMAScript
programming language, with a classical Java-style class model, rather than JavaScript's prototype model.
2.2 Main uses of Macromedia Flash
Adobe Flash continues to be a favored animation program for low-cost 2D television and commercial
animation, in competition with Anime Studio and Toon Boom Animation. Notable users of the software
include DHX Media Vancouver for productions including Pound Puppies and My Little Pony: Friendship is
Magic, Fresh TV for Total Drama, Nelvana for 6teen and Clone High, Williams Street for Metalocalypse and
Squidbillies, and Nickelodeon Animation Studios for Wow! Wow! Wubbzy! El Tigre: The Adventures of
Manny Rivera, Danny Phantom and Happy Tree Friends. Flash is less commonly used for feature-length
animated films; however, 2009's The Secret of Keel’s, an Irish film, was animated primarily in Adobe Flash,
and was nominated for an Academy Award for Best Animated Feature at the 82nd Academy Awards.
Flash for mobile platforms
Flash Player for smart phones was made available to handset manufacturers at the end of 2009. Adobe stops
supporting Flash Player for mobile device browsers after the release of 11.1. It continues to support deploying
Flash based content as mobile applications via Adobe AIR.
The Adobe Flash Professional multimedia authoring program is used to create content for the
Adobe Engagement Platform, such as web applications, games and movies, and content for mobile phones and
other embedded devices.
2.3 Adobe Flash popularity
The
table
below
Figure 13 – HTML5 and Flash platforms comparison
http://en.wikipedia.org/wiki/Comparison_of_HTML5_an
d_Flash
compares the features of the Flash
platform,
the
HTML5
specification and the features
implemented
in
modern
web
browsers. Web browsers cannot
render Flash media themselves,
instead it is rendered primarily
using the proprietary but freely
available Adobe Flash Player.
Until 2008, there was no official specification which was allowed to be used to create an alternative player.
P a g e 8 | 30
2014.12.17
9
Potato Killers
Alternative players have been developed before 2008, but they support Flash to a lesser degree than the
official one. The latest version of the Adobe Flash Player runs on Microsoft Windows, Mac OS X, RIM, QNX
and Google TV. Earlier versions run on Android 2.2-4.0.x (Flash has been released for 4.0, but Adobe has
announced that they will discontinue support for Android 4.1 and higher.) (Flash 11.2), PlayStation 3 (Flash
9), PSP (Flash 6). Adobe Flash Lite runs on Wii, Symbian, Maemo Linux, Windows Mobile, and Chumby.
Apple does not allow Flash to run on iOS, the operating system, which runs on iPad, iPhone, iPod Touch, and
Apple TV. Apple stated that it has no plans to do so. In February 2012, Adobe announced it would
discontinue development of Flash Player on Linux for all browsers except Google Chrome by dropping the
support for NPAPI and using only Chrome’s PPAPI.
2.4 Adobe Flash projects
Web banners or banner ads typically are graphical ads displayed
within a web page. Many banner ads are delivered by a central ad server.
Banner ads can use rich media to incorporate video, audio, animations,
buttons, forms, or other interactive elements using Java applets, HTML5,
Adobe Flash, After Effects, Photoshop and other programs. Web banners
function the same way as traditional advertisements are intended to
function: notifying consumers of the product or service and presenting
reasons why the consumer should choose the product in question, a fact
first documented on Hot Wired in 1996 by researchers Rex Briggs and
Nigel Hollis. Web banners differ in that the results for advertisement
campaigns may be monitored real-time and may be targeted to the
viewer's interests. Behavior is often tracked through the use of a click tag.
2.4.1
What are the standard sizes?
Ad sizes have been standardized to some extent by the IAB.
Figure 14 – Adobe Flash banner 1
Prior
to
the
IAB
standardization, banner
ads appeared in over 250 different sizes. However, some
websites and advertising networks (outside of the Euro
sphere or North America) may not use any or all of the IAB
base ad sizes. The IAB ad sizes are. Frame ad (traditional
banner)
Frame ads were the first form of web banners. The
colloquial usage of "banner ads" often refers to traditional
frame ads. Website publishers incorporate frame ads by
P a g e 9 | 30
2014.12.17
1
Potato Killers
0
Figure 15 - Adobe Flash banner 2
setting aside a particular space on the web page. The Interactive Advertising Bureau's Ad Unit Guidelines
proposes standardized pixel dimensions for ad units.
Pop-ups/pop-under
A pop-up ad is displayed in a new web browser window that opens above a website visitor's initial
browser window. A pop-under ad opens a new browser window under a website visitor's initial browser
window.
Figure 16 - Adobe Flash banner 3
Mobile advertising
Mobile advertising is ad copy delivered through wireless mobile devices such as smartphones,
feature phones, or tablet computers. Mobile advertising may take the form of static or rich media display ads,
SMS (Short Message Service) or MMS (Multimedia Messaging Service) ads, mobile search ads, advertising
within mobile websites, or ads within mobile applications or games (such as interstitial ads, “advert gaming,”
Figure 17 - Adobe Flash banner 4
Figure 18 - Adobe Flash banner 4
or application sponsorship). Industry groups such as the Mobile Marketing Association have attempted to
standardize mobile ad unit specifications, similar to the IAB's efforts for general online advertising.
P a g e 10 | 30
2014.12.17
1
Potato Killers
1
Figure 19 - Connect logo
3 Connect ii
3.1 Connect - advertising development technology
3.1.1
What is Connect?
New York-based Clear Channel Outdoor is bringing its global interactive mobile advertising
platform Connect, which uses NFC tags or QR codes on advertising panels at pedestrian-accessible
sites, to U.S. markets this June. The platform, called Connect, has already rolled out in several
countries and will launch in the U.S. in San Francisco and Washington, D.C., in June. The plan is to
reach nearly 175 million consumers monthly across the globe.
The Connect platform provides a truly global opportunity for advertisers, reaching over 175
million consumers a month in 23 countries across Europe, Asia-Pacific, North America and Latin
America, through more than 75,000 enabled sites. Advertising panels on CCO’s pedestrianaccessible sites across the globe are being turned into mobile launch pads, enabling consumers
instant access to rewarding offers, advertiser messages and content via their smartphones on the
move. Connect provides seamless integration between out-of-home and mobile, driving deeper brand
engagement with consumers when they are out and about: helping advertisers and their agencies to
realise mobile strategies fit for the real world.
Connect has already launched in Singapore, Belgium, Finland, Ireland, the Netherlands and
the U.K. Between May and June Connect will roll out in over a dozen more countries and, all told,
will be available in 23 countries.
3.1.2
Why should I use Connect?
Bus shelters and street-level advertising structures, such as can be found in shopping malls
and airports, will have Connect tags that are permanently attached to digital or static panels.
Consumers can then tap or scan their smartphone over the NFC tag or QR code, which will send the
consumer to whatever online brand they’re looking at. Advertisers and planners that opt to use
Connect will have access to the data and metrics that Clear Channel Outdoor captures, including
date, time, location, clickthroughs and even the mobile device used.
P a g e 11 | 30
2014.12.17
1
Potato Killers
2
The Connect platform offers a
unique way for advertisers to integrate their
outdoor campaign with their online content,
helping them build increasingly effective
mobile
channels,
prompting
purchase,
generating direct response, promoting brand
discovery and encouraging consumers to
have fun with their brand.
Advertisers can harness these opportunities though a range of offers for consumers on the move
such as:
- Shopping: ‘buy-now’ capabilities, discounts / Figure 20 – Connect popularity is growing by each day.
vouchering, special offers
- Information: search, maps, location-relevant, utility
- Entertainment: gaming, video, photos, music and app downloads
- Sharing experiences: social media integration, text/IM
3.2 Main uses of Connect
How does NFC work?
NFC stands for “Near Field Communication” and, as the name implies, it enables short range
communication between compatible devices. This requires at least one transmitting device, and another to
receive the signal. A range of devices can use the NFC standard and can be considered either passive or
active, depending on how the device works.
At its core, all NFC is doing is identifying us, and our bank account, to a computer. The technology
is simple. It's a short-range, low power wireless link evolved from radio-frequency identification (RFID) tech
that can transfer small amounts of data between two devices held a few centimeters from each other.
Passive NFC devices include tags, and other small transmitters, that can send information to other
NFC devices without the need for a power source of their own. However, they don’t really process any
information sent from other sources, and can’t connect to other passive components. These often take the
form of interactive signs on walls or advertisements.
Active devices are able to both send and receive data, and can communicate with each other as well
as with passive devices. Smartphones are by far the most common implementation of active NFC devices, but
public transport card readers and touch payment terminals are also good examples of the technology.
P a g e 12 | 30
2014.12.17
1
Potato Killers
3
Just like Bluetooth and WiFi, and all manner of other wireless signals, NFC works on the principle
of sending information over radio waves. Near Field Communication is another standard for wireless data
transitions, meaning that there are specifications which devices have to adhere to in order to communicate
with each other properly. The technology used in NFC is based on older RFID (Radio-frequency
identification) ideas, which uses electromagnetic induction in order to transmit information.
3.3 Connect popularity
75,000 sites worldwide will be equipped with NFC, QR code and/or SMS capabilities a mobile network
reaching 175 million consumers monthly across 23 countries on 5 continents;
3.3.1

Mobile usage:
By 2017, it is expected that the total number of smartphone subscribers worldwide will be
almost 4 billion (from 3.6 billion in 2014) – equivalent to 80% of the global adult population
[Source: Cisco 2014 Mobile VNI Study]

It is estimated the percentage of the U.S. population using smartphones will rise to 64.3%, in
2017, up from 45.7% at the end of 2013. [Source: eMarketer]

Mobile devices accounted for 55% of Internet usage in the U.S. in January. [Source:
comScore]

The total value of global mobile payments predicted by 2017 is $13 trillion. [Source: A.T.
Kearney]

U.S. mobile consumers making proximity mobile payments are expected to reach 54.1
million in 2017, as compared to 10.9 million in 2013. [Source: eMarketer]
3.3.2

NFC & QR technology:
416 million smartphones with NFC will be shipped in 2014 as compared to 120 million in
2012; nine out of the top 10 smartphone manufacturers now produce NFC enabled handsets.
[Source: IHS Technology]

31% of U.S. smartphone owners have scanned a QR code or texted to get more information
on a special in-store deal; 40% of these QR code users claimed that they made purchases they
hadn’t planned as a result of the information they received. [Source: Vibes
P a g e 13 | 30
2014.12.17
1
Potato Killers
4
3.4 Interesting Facts
Connect is the first global out-of-home mobile interactive advertising
platform
P a g e 14 | 30
2014.12.17
1
Potato Killers
5
Figure 21 Photoshop Logo
Adobe
4 Adobe Photoshopiii
4.1 Photoshop - advertising development technology
4.1.1
What is Adobe Photoshop
Adobe Photoshop is a raster graphics editor developed and published by Adobe Systems for Windows and OS
X.
Early history
In 1987, Thomas Knoll, a PhD student at the University of Michigan began writing a program on his
Macintosh Plus to display grayscale images on a monochrome display. This program, called Display, caught
the attention of his brother John Knoll, an Industrial Light & Magic employee, who recommended that
Thomas turn it into a full-fledged image editing program. Thomas took a six-month break from his studies in
1988 to collaborate with his brother on the program. Thomas renamed the program ImagePro, but the name
was already taken. Later that year, Thomas renamed his program Photoshop and worked out a short-term deal
with scanner manufacturer Barneyscan to distribute copies of the program with a slide scanner; a "total of
about 200 copies of Photoshop were shipped" this way.
During this time, John traveled to Silicon Valley and gave a demonstration of the program to
engineers at Apple and Russell Brown, art director at Adobe. Both showings were successful, and Adobe
decided to purchase the license to distribute in September 1988.[8] While John worked on plug-ins in
California, Thomas remained in Ann Arbor writing code. Photoshop 1.0 was released on 19 February 1990 for
Macintosh exclusively. The Barneyscan version included advanced color editing features that were stripped
from the first Adobe shipped version. The handling of color slowly improved with each release from Adobe
and Photoshop quickly became the industry standard in digital color editing. At the time Photoshop 1.0 was
released, digital retouching on dedicated high end systems, such as the SciTex, cost around $300 an hour for
basic photo retouching.
Photoshop was created in 1988 by Thomas and John Knoll. Since then, it has become the de facto
industry standard in raster graphics editing, such that the terms "photoshopping" and "photoshop contest" were
born.
P a g e 15 | 30
2014.12.17
1
Potato Killers
4.1.2
6
Why should I use Adobe Photoshop?
4.1.2.1 Analysis
It can edit and compose raster images in multiple layers and supports masks, alpha compositing and
several color models including RGB, CMYK, Lab color space (with capital L), spot color and duotone.
Photoshop has vast support for graphic file formats but also uses its own PSD and PSB file formats which
support all the aforementioned features. In addition to raster graphics, it has limited abilities to edit or render
text, vector graphics (especially through clipping path), 3D graphics and video. Photoshop's featureset can be
expanded by Photoshop plug-ins, programs developed and distributed independently of Photoshop that can
run inside it and offer new or enhanced features.
4.1.2.2 Alternatives
GIMP
An
Photoshop
open-source
that
debuted
alternative
on
to
Unix-based
platforms, GIMP stands for GNU Image
Manipulation Program. Today it's available in
versions for Linux, Windows, and Mac.
GIMP offers a wide toolset, similar to
Photoshop in many ways, and is a great
Figure 22 - GIMP
alternative if you're looking for a no-cost image
editor. The interface differs somewhat from
Photoshop, but a version of GIMP is available that mimics Adobe's look and feel, making it easier to migrate
over if you're ditching Photoshop. The full suite of tools is available here - everything you're accustomed to is
within easy reach, including painting tools, colour correction, cloning, selection, and enhancement. The team
that oversees development has worked hard to ensure compatibility too, so you'll be able to work with all the
popular file formats without any trouble at all. You'll also find a very capable file manager built in, along
similar lines to Adobe's Bridge. Overall, this is a great option whether you've either got a limited budget, or
want to move away from Photoshop for other reasons.
Paint.net
Paint.net is a Windows-based alternative
to the Paint editor that Microsoft shipped with
versions of Windows. Don't let that put you off,
though, as it's a surprisingly capable and useful
tool, available completely free of charge. The
software started out life as a Microsoft-sponsored
undergraduate project, and has become an open
Figure 23 – Paint.net
P a g e 16 | 30
2014.12.17
1
Potato Killers
7
source project maintained by some of the alumni.
The focus is on ease of use, and there's a definite tendancy towards photo editing rather than
artistic creation. That said, there are a range of special effects available, allowing you to easily create
fake perspective, blend and push pixels around the canvas, tile and repeat selections, and so on.
A good range of selection tools, support for layers, and adjustments such as curves and
brightness/contrast mean that Paint.net is a great alternative to Photoshop for photo editing,
especially if you can do without some of the more recent additions to Photoshop's toolset.
Pixlr
Pixlr claims to be "the most
popular online photo editor in the
world", which may have something
to do with the fact that it's free.
But it also boasts more than
600 effects, overlays, and borders and
lets you do all the main things you'd
expect from a photo editor, from
cropping and re-sizing to removing redeye and whitening teeth.
And if you're used to using
Photoshop, then you'll find Pixlr's user
interface easy to pick up quickly, as it's
Figure 24 - PixLr
very similar. This free app is available
in both iOS and Android varieties.
Figure 25 – Many useful and easy tools to use and learn to promote your Event
4.2 Main uses of Photoshop
Upon loading Photoshop, a
sidebar with a variety of tools with
multiple
image-editing
functions
appears to the left of the screen. These
tools typically fall under the categories
of drawing; painting; measuring and
navigation;
selection;
typing;
and
retouching. While newer versions of
Photoshop are updated to include new
P a g e 17 | 30
2014.12.17
1
Potato Killers
8
tools and features, several recurring tools that exist in most versions are discussed below.
Pen Tool
Photoshop includes a few versions of the pen tool. The pen tool creates precise paths that can be
manipulated using anchor points. The free form pen tool allows the user to draw paths freehand, and with the
magnetic pen tool, the drawn path attaches closely to outlines of objects in an image, which is useful for
isolating them from a background.
Measuring and navigation
The eyedropper tool selects a color from an area of the image that is clicked, and samples it for
future use. The hand tool navigates an image by moving it in any direction, and the zoom tool enlarges the
part of an image that is clicked on, allowing for a closer view.
Selection
Selection tools are used to select all or any part of a picture to perform cut, copy, edit, or retouching
operations.
Slicing
The "slice" and slice select tools, like the crop tool, are used in isolating parts of images. The slice
tool can be used to divide an image into different sections, and these separate parts can be used as pieces of a
web page design once HTML and CSS are applied. The slice select tool allows sliced sections of an image to
be adjusted and shifted.
Video Editing
In Adobe CS5 Extended edition, video editing is comprehensive and efficient with a broad
compatibility of video file formats such as MOV, AVI, MPEG-4, and FLV formats and easy workflow. Using
simple combination of keys video layers can easily be modified, with other features such as adding text and
the creation of animations using single images.
3D Extrusion
With the Extended version of Photoshop CS5, 2D elements of an artwork can easily become threedimensional with the click of a button. Extrusions of texts, an available library of materials for threedimensional, and even wrapping two-dimensional images around 3D geometry.
Mobile integration
Third-party plugins have also been added to the most recent version of Photoshop where
technologies such as the iPad have integrated the software with different types of applications. Applications
P a g e 18 | 30
2014.12.17
1
Potato Killers
9
like the Adobe Eazel painting app allows the user to easily create paintings with their fingertips and use an
array of different paint from dry to wet in order to create rich color blending.
Camera Raw
With the Camera Raw plug-in, RAW images can be processed without the use of Adobe Photoshop
Lightroom, along with other image file formats such as JPEGs, TIFFs, or PNGs. The plug-in allows users to
remove noise without the side-effect of over-sharpening, add grain, and even perform post-crop vignetting.
3D Printing Tools
Requiring Photoshop version 14.1, users can now create and edit designs for 3D printing. After
downloading 3D photo models from numerous online services, users can add color, adjust the shape or rotate
the angles. Artists can also design 3D models from scratch.
4.3 Adobe Photoshop Popularity
Over its 20-year history, Photoshop has evolved significantly from a simple original display program
to a wildly popular application that has over 10 million users worldwide
The impact of Photoshop is everywhere – billboard
signs, magazine covers, major motion pictures, even the logo
on
the coffee cup you drink out of every morning. All have likely
been touched by the software. Over 90 percent of creative
professionals have Photoshop on their desktops and today
Photoshop is used by professional photographers, graphic
designers and advertisers, as well as architects, engineers and
even doctors. Whether it’s bringing visual effects to life in the
blockbuster
film
Avatar, helping save
lives
in
partnership
with
forensics
departments and the Figure 26 - Poster made with Photoshop 1
Center for Missing and
Exploited Children, or challenging the human eye to determine if an
image is real or fake, Photoshop continues to find new uses and
advocates.
Before any type of print media is published, whether it is a
magazine, newspaper, or even novel it is likely the case that Photoshop
has been used to enhance and clean up the imagery on many if not all
Figure 27 – Poster made with Photoshop 2
P a g e 19 | 30
2014.12.17
2
Potato Killers
0
of the pages. Magazines use Photoshop and many of its tools in order to enhance the imagery and text in their
publications. Many Health and Beauty Magazines employ in-house designers to retouch photos of models to
enhance their beauty. They add finishing touches to the imagery by using tools that balance color and add
drop shadows, among other edits.
Photoshop is an excellent tool for the design of the ads displaying a lot of creativity. If you take a
closer look at the billboards around us, some of these ads are actually quite unique and interesting. It is the
creation in advertising that really impresses the public, designed by the talented people who master the
ultimate tool of Photoshop creativity.
4.4 Interesting Facts
The best place to learn all about Photoshop? The National Association of Photoshop Professionals of
course. Scott Kelby is the president of NAPP, and knows more about Photoshop than just about anyone. He’s
also in charge of putting together the Photoshop World Conference and Expo coming up March 24th in
Orlando.
Adobe prefers people to use the term “photoshopping” when referring to photo editing to prevent its
trademark from becoming generalized. Yet its never caught on as much as they had hoped, and today we
regularly use “photoshop” as a verb.
P a g e 20 | 30
2014.12.17
2
Potato Killers
1
5 HTML5iv
Figure 28 – HTML5 Logo
5.1 HTML5 - advertising development technology
5.1.1
What is HTML5?
HTML 5 is a revision of the Hypertext Markup Language (HTML), the standard
programming language for describing the contents and appearance of Web pages. HTML5 was
developed to solve compatibility problems that affect the current standard, HTML4. One of the
biggest differences between HTML5 and previous versions of the standard is that older versions of
HTML require proprietary plugins and APIs. (This is why a Web page that was built and tested in
one browser may not load correctly in another browser.) HTML5 provides one common interface to
make loading elements easier. For example, there is no need to install a Flash plugin in HTML5
because the element will run by itself.
One of the design goals for HTML5 is to support for multimedia on mobile devices. New
syntactic features were introduced to support this, such as video, audio and canvas tags. HTML5 also
introduces new features which can really change the way users interact with documents including:









New parsing rules for enhanced flexibility
New attributes
Elimination of outmoded or redundant attributes
Drag and drop capabilities from one HTML5 document to another
Offline editing
Messaging enhancements
Detailed rules for parsing
MIME and protocol handler registration
A common standard for storing data in SQL databases (Web SQL)
HTML 5 was adopted by the new working group of the World Wide Web Consortium
(W3C) in 2007. This group published the first public draft of HTML 5 in January 2008.
5.1.2
Why should I use HTML5?
5.1.2.1 Accessibility
HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA.
The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>,
<aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to
determine what a given <div> was even if you assigned it an ID or Class. With new semantic tags
screen readers can better examine the HTML document and create a better experience for those who
use them.
ARIA is a W3C spec that is mainly used to assign specific “roles” to elements in an HTML
document – essentially creating important landmarks on the page: header, footer, navigation or
article, via role attributes. This has been well overlooked and widely under-used mostly due to the
P a g e 21 | 30
2014.12.17
2
Potato Killers
2
fact that it wasn’t valid, however, HTML5 will validate these attributes. Also, HTML5 will have
built in roles that can’t be over-ridden making assigning roles a no brainer. For a more in depth
discussion on HTML5 and ARIA please visit the WAI.
5.1.2.2 Video and Audio Support
It makes your videos and audio truly accessible with the new HTML5 <video> and <audio>
tags. Getting your media to play correctly has always been pretty much a nightmare, you had to use
the <embed> and <object> tags and assign a huge list of parameters just to get the thing visible and
working correctly. Your media tags just become these nasty, huge chunks of confusing code
segments. HTML5’s video and audio tags basically treat them as images; <video src=”url”/>. But
what about all those parameters like height, width and autoplay? No worries my good man, just
define those attributes in the tag just like any other HTML element: <video src=”url” width=”640px”
height=”380px” autoplay/>.
It’s actually that dead simple, however because old evil browsers out there don’t like our
HTML5 friend, you’ll need to add a little bit more code to get them working correctly… but this
code isn’t nearly as gnarly and messy as the <object> and <embed> tags:
<video poster="myvideo.jpg" controls>
<source
src="myvideo.m4v"
type="video/mp4" />
<source
src="myvideo.ogg"
type="video/ogg" />
<embed
src="/to/my/video/player"></embed>
</video>
5.1.2.3 Doctype
<!DOCTYPE html>
Yup that’s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more
cutting and pasting some long unreadable line of code and no more dirty head tags filled with
doctype attributes. You can simply and easily type it out and be happy. The really great thing about it
though, beyond the simplicity, is that it works in every browser clear back to the dreaded IE6.
5.1.2.4 Cleaner Code
If you are passionate about simple, elegant, easy to read code then HTML5 is the beast for
you. HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily
P a g e 22 | 30
2014.12.17
2
Potato Killers
3
separate meaning from style and content. Consider this typical and simple header code with
navigation:
<div id="header">
<h1>Header Text</h1>
<div id="nav">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
So this code is pretty clean and simple? But with HTML5 you can clean this up even more
and at the same time give your markup more meaning:
<header>
<h1>Header Text</h1>
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</header>
With HTML5 you can finally cure your “divitis” and “classitis” by using semantic and
HTML headers to describe your content. Previously you would generally just use div’s for every
block of content than drop an id or class on it to describe its content but with the new <section>,
<article>, <header>, <footer>, <aside> and <nav> tags, HTML5 allows you to code your markup
cleaner as well as keep your CSS better organized and happier.
P a g e 23 | 30
2014.12.17
2
Potato Killers
4
5.1.2.5 Smarter Storage
One of the coolest things about HTML5 is the new local storage feature. It’s a little bit of a
cross between regular old cookies and a client-side database. It’s better than cookies because it
allows for storage across multiple windows, it has better security and performance and data will
persist even after the browser is closed. Because it’s essentially a client side data base you don’t have
to worry about the user deleting cookies and it is been adopted by all the popular browsers.
Local storage is great for many things, but it’s one of HTML5 tools that are making web
apps possible without third party plugins. Being able to store data in the user’s browser allows you to
easily create those app features like: storing user information, the ability to cache data, and the ability
to load the user’s previous application state. If you are interested in getting started with local storage,
check out Christian Heilmann’s great 24 Ways article from last year — Wrapping Things Nicely
with HTML5 Local Storage.
5.1.2.6 Better Interactions
Awe, we all want better interactions, we all want a more dynamic website that responds to
the user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas>,
the drawing HTML5 tag that allows you to do most (if not more) interactive and animated
possibilities than the previous rich internet application platforms like Flash.
Beyond <canvas>, HTML5 also comes with a slew of great APIs that allow you to build a
better user experience and a beefier, more dynamic web application — here’s a quick list of native
APIs:





Drag and Drop (DnD)
Offline storage database
Browser history management
document editing
Timed media playback
5.1.2.7 Game Development
Yup, that is correct, you can develop games using HTML5’s <canvas> tag. HTML5
provides a great, mobile friendly way to develop fun, interactive games. If you’ve built Flash games
before, you’ll love building HTML5 games.
5.1.2.8 Legacy/Cross Browser Support
Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and
Opera) and the HTML5 doctype was created so that all browsers, even the really old and annoying
ones, er, IE6 can use it. But just because old browsers recognize the doctype that doesn’t mean they
can use all the new HTML5 tags and goodies. Fortunately, HTML5 is being built to make things
easier and more cross browser friendly so in those older IE browsers that don’t like the new tags we
can just simply add a Javascript shiv that will allow them to use the new elements:
P a g e 24 | 30
2014.12.17
2
Potato Killers
5
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
5.1.2.9 Mobile, Mobile, Mobile
Mobile technology is becoming more popular these days. Mobile devices are taking over the
world. The adoption of mobile devices continues to grow very rapidly and this means that more and
more users will be using their mobile browsers to view your web site or application. HTML5 is the
most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of
mobile Flash, you will now count on HTML5 to do your mobile web application development.
Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as
designing and constructing for their smaller touch screen displays — hence the popularity of
Responsive Design. There are some great meta tags that also allow you to optimize for mobile:



Viewport: allows you to define viewport widths and zoom settings
Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode
Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen
of an IOS and Android mobile device
5.2 Main uses of HTML5
HTML5 has been designed to deliver almost everything you'd want to do online without requiring
additional software such as browser plugins. It does everything from animation to apps, music to movies, and
can also be used to build incredibly complicated applications that run in your browser.
There's more. HTML5 isn't proprietary, so you don't need to pay royalties to use it. It's also crossplatform, which means it doesn't care whether you're using a tablet or a smartphone, a netbook, notebook or
ultrabook or a Smart TV: if your browser supports HTML5, it should work flawlessly.
We've come a long way since HTML could barely handle a simple page layout. HTML5 can be used
to write web applications that still work when you're not connected to the net; to tell websites where you are
physically located; to handle high definition video; and to deliver extraordinary graphics.
5.3 HTML5 popularity
According to a report released on 30 September 2011, 34 of the world's top 100 Web sites
were using HTML5 – the adoption led by search engines and social networks. Another report
released in August 2013 has shown that 153 of the Fortune 500 U.S. companies already
implemented HTML5 on their corporate websites.
As of 2014, HTML 5 is at least partially supported by most popular layout engines.
P a g e 25 | 30
2014.12.17
2
Potato Killers
6
5.4 HTML5 vs Flash
http://media.accusoft.com/blog/1037/flash_vs_html5_infograph_v2.png
While Flash has definitely maintained a large market penetration that probably won’t
evaporate completely, it would be hard to argue that it’s not ceding ground to other technologies,
namely HTML 5. In accordance with Steve Jobs’ letter, Apple products such as the iPad and iPhone
do not offer built-in Flash support (although there are add-ons that will allow it to work). Assuming
you have accepted their trial, YouTube now uses Flash only as a fallback; if your browser supports
HTML5, YouTube uses the newer HTML5 video playback features. YouTube very much sees
HTML5 as the future, made clear on their blog when they said: "We are very excited about HTML5
as an open standard and want to be part of moving HTML5 forward on the web."
If the decisions made by those big players aren’t enough to convince you a shift is
happening, consider this: Adobe themselves have announced they “will no longer adapt Flash Player
for mobile devices to new browser, OS version or device configurations.”
5.5 Examples of websites created using HTML5
The homepage is a mishmash of
coloured
images
rectangles
and
holding
patterns.
It's
words,
visually
appealing and philosophically mysterious.
The Projects page is not yet complete Chimero
is
in
the
process
of
rephotographing - but you can view some
prints in the Archive.
Figure 29 - HTML Website example 1
P a g e 26 | 30
2014.12.17
2
Potato Killers
7
538 is the largest
radio
station
Netherlands.
in
the
Rotterdam-
based agency Supersteil
created
its
site.
The
agency decided to use
HTML5 when building
the site from scratch. One
of the main challenges
Supersteil
Figure 30 – HTML5 Website example 2
"developing
faced
a
was
content-
heavy website that offered
a user experience that was as rich as possible on multiple platforms", explains creative partner William
Duijzer.
Figure 31 – HTML5 Website example 3
Andy Wilson Financial Services' website is made by Laser Red
and uses HTML5 structural elements, microdata and native video.
P a g e 27 | 30
2014.12.17
2
Potato Killers
8
6 Conclusion
At first, we had trouble understanding our assignment - the topic
seemed confusing. After talking it over as a team, we put minor problems
aside and successfully started our group work. From this group work we
learned a lot about advertisement making and technology, which will be helpful
in our future studying and working environment. A drop of wisdom - before
starting, to avoid misunderstandings and to make teamwork more fluent, every
group should hold a meeting to discuss the topic, develop a plan and split up
the actual work.
P a g e 28 | 30
2014.12.17
2
Potato Killers
9
7 Literature
http://www.adobe.com/software/flash/about/
http://en.wikipedia.org/wiki/Comparison_of_HTML5_and_Flash
http://en.wikipedia.org/wiki/Adobe_Flash
http://clearchannelinternational.com/connect/all
http://www.clearchannel.com/pages/Clear-Channel-Outdoor-launches-Connect-the-first-global-outof-home-mobile-interactive-advertising-platform.aspx
http://www.adweek.com/news/advertising-branding/clear-channel-outdoor-rolls-out-new-mobileplatform-connect-156555
http://www.iab.net/html5
http://blog.accusoft.com/2012/october/html5-vs-flash-what-do-you-need-to-know-part-1
http://tympanus.net/codrops/2011/11/24/top-10-reasons-to-use-html5-right-now/
http://www.creativebloq.com/web-design/examples-of-html-1233547
http://www.creativebloq.com/photoshop/alternatives-1131641
http://en.wikipedia.org/wiki/Adobe_Photoshop
http://www.photoshopnews.com/
http://thesherwoodgroup.com/advertising-2/35-amazing-ads-created-in-photoshop/#.VIR-mHv0RbQ
http://virtualphotographystudio.com/2010/02/photoshops-20th-anniversary-7-fun-facts-aboutphotoshop/
https://www.adobe.com/aboutadobe/pressroom/pressreleases/201002/021810PS20Anniversary.html
P a g e 29 | 30
2014.12.17
3
Potato Killers
0
Table of Figures
Figure 1 – Macromedia Flash Logo _____________________________________________________________________ 5
Figure 2 – Animation 1Figure 3 – Macromedia Flash Logo __________________________________________________ 5
Figure 4 – Animation 1 ______________________________________________________________________________ 6
Figure 5 - Animation 2 _______________________________________________________________________________ 6
Figure 6 - Animation 3 _______________________________________________________________________________ 6
Figure 7 – FLV format logo ___________________________________________________________________________ 7
Figure 8 – Adobe Flash Sound logoFigure 9 – FLV format logo _______________________________________________ 7
Figure 10 – Adobe Flash Sound logo ____________________________________________________________________ 7
Figure 11 – HTML5 and Flash platforms comparisonFigure 12 – Adobe Flash Sound logo _________________________ 7
Figure 13 – HTML5 and Flash platforms comparison _______________________________________________________ 8
Figure 14 – Adobe Flash banner 1 ______________________________________________________________________ 9
Figure 15 - Adobe Flash banner 2 _____________________________________________________________________ 10
Figure 16 - Adobe Flash banner 3 _____________________________________________________________________ 10
Figure 17 - Adobe Flash banner 4 _____________________________________________________________________ 10
Figure 18 - Adobe Flash banner 4 _____________________________________________________________________ 10
Figure 19 - Connect logo ____________________________________________________________________________ 11
Figure 20 – Connect popularity is growing by each day. ___________________________________________________ 12
Figure 21 - Adobe Photoshop Logo ____________________________________________________________________ 15
Figure 22 - GIMP __________________________________________________________________________________ 16
Figure 23 – Paint.net _______________________________________________________________________________ 16
Figure 24 - PixLr ___________________________________________________________________________________ 17
Figure 25 – Many useful and easy tools to use and learn to promote your Event _______________________________ 17
Figure 26 - Poster made with Photoshop 1 ______________________________________________________________ 19
Figure 27 – Poster made with Photoshop 2 _____________________________________________________________ 19
Figure 28 – HTML5 Logo ____________________________________________________________________________ 21
Figure 29 - HTML Website example 1 __________________________________________________________________ 26
Figure 30 – HTML5 Website example 2 ________________________________________________________________ 27
Figure 31 – HTML5 Website example 3 ________________________________________________________________ 27
i
Adobe Flash - formerly called Macromedia Flash and Shockwave Flash
Connect - mobile advertising platform
iii
Adobe Photoshop - is a raster graphics editor
iv
Standard programming language for describing the contents and appearance of Web pages
ii
P a g e 30 | 30
2014.12.17