BUY & DOWNLOAD NOW - $11 $15
Order this great PSD template today, , for a special price and get the premium clipart library for FREE! You can buy it for yourself or for your client. Your order will be processed by Template Monster (JetImpex Inc, USA).

Easy Template CustomizationWhy start a web design design from scratch? Get this professionally designed template and simply make the required changes! You can quickly and easily change any detail of this great PSD template using included images and source files (psd, no html source files are provided) or order the customization.

Best Photoshop HostingWe are glad to offer you our super-fast, stable and secure cloud hosting for your PSD based website. Host your web design website and register a domain for only $9.95/year on HostMagia.com!

The basic process for a server-side web templating system: content (from a database), and "presentation specifications" (in a web template), are combined (through the template engine) to mass-produce web documents.

This article has multiple issues. Please help improve it or discuss these issues on the talk page. (Learn how and when to remove these template messages)

This article needs additional citations for verification. Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed. (June 2008) (Learn how and when to remove this template message)

This article possibly contains original research. Please improve it by verifying the claims made and adding inline citations. Statements consisting only of original research should be removed. (April 2011) (Learn how and when to remove this template message)

This article may require cleanup to meet Wikipedia's quality standards. No cleanup reason has been specified. Please help improve this article if you can. (April 2011) (Learn how and when to remove this template message)

(Learn how and when to remove this template message)

A web template system is used in web publishing to allow web designers and developers to work with web templates for the automatic generation of custom web pages, such as the results from a search. This allows for reuse of the static elements of a web page, while allowing the dynamic elements to be defined based on the parameters of the web request. Web templates are also used in the creation of static content, providing a basic structure and appearance characteristic for web content. It can be present in content management systems, web application frameworks, and HTML editors.

Overview

A web template system is composed of the following:

A template engine: the primary processing element of the system;

Content resource: any of various kinds of input data streams, such as from a relational database, XML files, LDAP directory, and other kinds of local or networked data;

Template resource: web templates specified according to a template language;

The template and content resources are processed and combined by the template engine to mass-produce web documents. For purposes of this article, web documents include any of various output formats for transmission over the web via HTTP, or another Internet protocol.

Motivations and typical uses

Applications

Web templates can be used by any individual or organization to set up their website. Once a template is purchased or downloaded, the user will replace all generic information included in the web template with their own personal, organizational or product information. Examples of common uses of Templates are listed below:

Display personal information or daily activities as in a blog.

Sell products online.

Display information about a company or organization.

Display family history.

Display a gallery of photos.

Place music files such as MP3 files on-line for play through a web browser.

Place videos online for public viewing.

To set up a private login area online.

Mass-production

Various agencies and organizations use web template systems for mass-production of content when slower production alternatives prove unfeasible.[citation needed]

For an introductory overview, take a news website as an example. Consider a "static website", where all web pages are static, built by a web designer. It would be very repetitive work to change individual pages as often as the news changes. A typical strategy to automate the web designer's "repetitive work" using Templates could be as follows:

choose a web template system to maintain the website;

group news items with different presentation needs;

specify the "presentation standards" through web templates, for each group of news;

specify a content resource to generate or update the content of each news item.

Style standardization

This section needs expansion. You can help by adding to it. (March 2012)

Separation of concerns

Main article: Separation of concerns

A common goal among experienced web developers is to develop and deploy applications that are flexible and easily maintainable. An important consideration in reaching this goal is the separation of business logic from presentation logic. Developers use web template systems (with varying degrees of success) to maintain this separation.

For the web designer, when each web page comes from a web template, they can think about a modular web page structured with components that can be modified independently of each other. These components may include a header, footer, global navigation bar (GNB), local navigation bar and content such as articles, images, videos etc.

For programmers the template language offers a more restricted logic, only for presentation adaptations and decisions, not for complex (business model) algorithms.[citation needed]

For other members of the "site team", a template system frees webmasters to focus on technical maintenance, content suppliers to focus on content, and gives all of them more reliability.

Moreover, it has the following advantages to its use:

Ease of design change: presentation variations on templates are "content invariant", meaning a web designer can update the presentation without wider infrastructural preoccupations.Example of this types of websites

Ease of interface localization: menus and other presentation standards are easy to make uniform, for users browsing on the site. Using Breadcrumb (navigation) makes any website more user friendly and flexible.

Possibility to work separately on design and code by different people at the same time. It can be perform while all the codes in a templates are clean design and every block or section of the websites are write with individual commenting system.[citation needed]

Responsive web design is now a mandatory factors for any website. Everything must be perform without any change in responsive design.

Ease of documentation a handy documentation saves more time to understand the whole template and also accelerate the modification process. Professional website designers highly emphasize documentation.

One difficulty in evaluating separation of concerns is the lack of well-defined formalisms to measure when and how well it is actually met. There are, however, fairly standard heuristics that have been borrowed from the domain of software engineering. These include 'inheritance' (based on principles of object-oriented programming); and 'templating and generative programming', (consistent with the principles of MVC separation). The precise difference between the various guidelines is subject to some debate, and some aspects of the different guidelines share a degree of similarity.

Flexible presentation

One major rationale behind "effective separation" is the need for maximum flexibility in the code and resources dedicated to the presentation logic. Client demands, changing customer preferences and desire to present a "fresh face" for pre-existing content often result in the need to dramatically modify the public appearance of web content while disrupting the underlying infrastructure as little as possible.

The distinction between "presentation" (front end) and "business logic" (infrastructure) is usually an important one, because:

the presentation source code language may differ from other code assets

the production process for the application may require the work to be done at separate times and locations

different workers have different skill sets, and presentation skills do not always coincide with skills for coding business logic

code assets are easier to maintain and more readable when disparate components are kept separate and loosely coupled

Reusability

Not all potential users of web templates have the willingness and ability to hire developers to design a system for their needs. Additionally, some may wish to use the web but have limited or no technical proficiency. For these reasons, a number of developers and vendors have released web templates specifically for reuse by non-technical people. Although web template reusability is also important for even highly skilled and technically experienced developers, it is especially critical to those who rely on simplicity and "ready-made" web solutions.

Such "ready-made" web templates are sometimes free, and easily made by an individual domestically. However, specialized web templates are sometimes sold online. Although there are numerous commercial sites that offer web templates for a licensing fee, there are also free and "open-source" sources as well.

Example

With the model typically held in a relational database, the remaining components of the MVC architecture are the control and view. In the simplest of systems these two are not separated. However, adapting the separation of concerns principle one can completely decouple the relationships.

Kinds of template systems

A web browser and web server are a client–server architecture; often a web cache is also used to improve performance. Overall, there are five types of templating systems, classified based on when assembly happens - placeholders are substituted for variable information (such as names, addresses, and product info) and sub-templates:

Server-side - run-time substitution happens on the web server

Client-side - run-time substitution happens in the web browser

Edge-side - run-time substitution happens on a proxy between web server and browser

Outside server - static web pages are produced offline and uploaded to the web server; no run-time substitution

Distributed - run-time substitution happens on multiple servers

Template languages may be:

Embedded or event-driven.

Simple, iterable, programmable, or complex.

Defined by a consortium, privately defined, or de facto defined by an open implementation. Ownership influences the stability and credibility of a specification. However, in most jurisdictions, language specification cannot be copyrighted, so control is seldom absolute.

The source code of the template engine can be proprietary or open source.

Many template systems are a component of a larger programming platform or framework. They are referred to as the "platform's template system". Some template systems have the option of substituting a different template language or engine.[citation needed]

Programming languages such as Perl, Ruby, C, and Java support template processing either natively, or through add-on libraries and modules. JavaServer Pages (JSP), PHP, and Active Server Pages (ASP with VBScript, JScript or other languages) are examples, themselves, of web template engines. These technologies are typically used in server-side templating systems, but could be adapted for use on a "edge-side" proxy or for static page generation.

Static site generators

Outside server template system architecture.

HTML editors often use web template systems to produce only static web pages. These can be viewed as a ready-made web design, used to mass-produce "cookie-cutter" websites for rapid deployment. They also commonly include themes in place of CSS styles. In general, the template language is to be used only with the editor's software.

FrontPage and Dreamweaver were once the most popular editors with template sub-system. A Flash web template uses Macromedia Flash to create visually interactive sites.

System label/name

Platform/editor

Notes

Dreamweaver

Macromedia

HTML authoring. Embedded iterable language.

Contribute

Macromedia

Client authoring.

Flash

Macromedia

Flash authoring.

FrontPage

Microsoft

HTML authoring. Embedded iterable language.

Nvu

Linux/Nvu

HTML authoring.

Website Meta Language

Unix-like

Many server-side template systems have the option to publish the output pages on the server, where the published pages will be static. It is a common feature on content management systems, like Vignette. But this does not have to be considered an out-server generation.

In the majority of the cases, this "publish option" doesn't interfere with the template system, and it can be made by external software, as Wget.

Server-side systems

Server-side template system

Server-side dynamic pages began to be generated by templates with pre-existent software adapted for this task. This early software was the preprocessors and macro languages, adapted for the web use, running on CGI. Next, a simple but relevant technology was the direct execution made on extension modules, started with SSI.

Many template systems are typically used as server-side template systems:

Public. "As of 2008-02-20, this project is no longer under active development."

PHPlib

PHPlib

Public. Embedded iterable language.

WebMacro

Java

Public. Embedded iterable language.

WebObjects

Java

Use the WebObjects Builder as engine.

Velocity (Jakarta/Apache)

Java

Public. Use VTL - Velocity Template Language.

Vignette

Proprietary.

Commercial solution. Embedded complex language.

VlibTemplate

PHP

Public.

XSLT (standard language)

Any with an XSLT parser

Standard. Event-driven programmable language.

XQuery (standard language)

Any with an XQuery parser

Standard. Embedded programmable language.

Technically, the methodology of embedding programming languages within HTML (or XML, etc.), used in many "server-side included script languages" are also templates. All of them are Embedded complex languages.

There are also preprocessors used as server-side template engines. Examples:

Preprocessor

Notes

C preprocessor

Public. Embedded iterable language.

M4

Public. Embedded complex language.

Edge-side systems

Edge-Side template and inclusion systems. “Edge-side” refers to web servers that reside in the space between the client (browser) and the originating server. They are often referred to as “reverse-proxy” servers. These servers are generally tasked with reducing the load and traffic on originating servers by caching content such as images and page fragments, and delivering this to the browser in an efficient manner.

Basic Edge Side Includes (ESI) is an SSI-like language. ESI has been implemented for content delivery networks. The ESI template language may also be implemented in web browsers using JavaScript and Ajax, or via a browser "plug-in".

Client-side systems

Client-side and distributed (decentralized) template system.

Many web browsers can apply an XSLT stylesheet to XML data that transforms the data into an XHTML document, thereby providing template functionality in the browser itself.
Other systems implement template functionality in the browser using JavaScript or another client-side scripting language, including:

Mustache

Distributed systems

The most simple form is transclusions (HTML frames). In other cases dynamic web pages are needed.

Examples:

Ajax

Rich Internet application

See also

Concepts:

Boilerplate code

Bytecode

Comparison of web template engines

Layout engine

Text substitution macros

Preprocessor

Template processor

Template (file format)

Transclusion

Virtual machine

Standards:

UIML (User Interface Markup Language)

XSLT (Extensible Stylesheet Language Transformations)

Software:

CodeCharge Studio

Jekyll

References

"Template engine". phpwact.org wiki. Archived from the original on December 4, 2012 2013.

Parr, Terence John (2004). Enforcing strict model-view separation in template engines. Proceedings of the 13th international conference on World Wide Web. buy this book.

Template:Envato

[1]

Paragon Corporation (2003-07-19). "Separation of Business Logic from Presentation Logic in Web Applications".

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are also expected to be up to date with web accessibility guidelines.

History

Web design books in a store

1988-2001

Although web design has a fairly recent history, it can be linked to other areas such as graphic design. However, web design can also be seen from a technological standpoint. It has become a large part of people’s everyday lives. It is hard to imagine the Internet without animated graphics, different styles of typography, background, and music.

The start of the web and web design

In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global hypertext project, which later became known as the World Wide Web. During 1991 to 1993 the World Wide Web was born. Text-only pages could be viewed using a simple line-mode browser. In 1993 Marc Andreessen and Eric Bina, created the Mosaic browser. At the time there were multiple browsers, however the majority of them were Unix-based and naturally text heavy. There had been no integrated approach to graphic design elements such as images or sounds. The Mosaic browser broke this mould. The W3C was created in October 1994 to "lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability." This discouraged any one company from monopolizing a propriety browser and programming language, which could have altered the effect of the World Wide Web as a whole. The W3C continues to set standards, which can today be seen with JavaScript. In 1994 Andreessen formed Communications Corp. that later became known as Netscape Communications, the Netscape 0.9 browser. Netscape created its own HTML tags without regard to the traditional standards process. For example, Netscape 1.1 included tags for changing background colours and formatting text with tables on web pages. Throughout 1996 to 1999 the browser wars began, as Microsoft and Netscape fought for ultimate browser dominance. During this time there were many new technologies in the field, notably Cascading Style Sheets, JavaScript, and Dynamic HTML. On the whole, the browser competition did lead to many positive creations and helped web design evolve at a rapid pace.

Evolution of web design

In 1996, Microsoft released its first competitive browser, which was complete with its own features and tags. It was also the first browser to support style sheets, which at the time was seen as an obscure authoring technique. The HTML markup for tables was originally intended for displaying tabular data. However designers quickly realized the potential of using HTML tables for creating the complex, multi-column layouts that were otherwise not possible. At this time, as design and good aesthetics seemed to take precedence over good mark-up structure, and little attention was paid to semantics and web accessibility. HTML sites were limited in their design options, even more so with earlier versions of HTML. To create complex designs, many web designers had to use complicated table structures or even use blank spacer .GIF images to stop empty table cells from collapsing. CSS was introduced in December 1996 by the W3C to support presentation and layout. This allowed HTML code to be semantic rather than both semantic and presentational, and improved web accessibility, see tableless web design.

In 1996, Flash (originally known as FutureSplash) was developed. At the time, the Flash content development tool was relatively simple compared to now, using basic layout and drawing tools, a limited precursor to ActionScript, and a timeline, but it enabled web designers to go beyond the point of HTML, animated GIFs and JavaScript. However, because Flash required a plug-in, many web developers avoided using it for fear of limiting their market share due to lack of compatibility. Instead, designers reverted to gif animations (if they didn't forego using motion graphics altogether) and JavaScript for widgets. But the benefits of Flash made it popular enough among specific target markets to eventually work its way to the vast majority of browsers, and powerful enough to be used to develop entire sites.

End of the first browser wars

During 1998 Netscape released Netscape Communicator code under an open source licence, enabling thousands of developers to participate in improving the software. However, they decided to start from the beginning, which guided the development of the open source browser and soon expanded to a complete application platform. The Web Standards Project was formed and promoted browser compliance with HTML and CSS standards by creating Acid1, Acid2, and Acid3 tests. 2000 was a big year for Microsoft. Internet Explorer was released for Mac; this was significant as it was the first browser that fully supported HTML 4.01 and CSS 1, raising the bar in terms of standards compliance. It was also the first browser to fully support the PNG image format. During this time Netscape was sold to AOL and this was seen as Netscape’s official loss to Microsoft in the browser wars.

2001-2012

Since the start of the 21st century the web has become more and more integrated into peoples lives. As this has happened the technology of the web has also moved on. There have also been significant changes in the way people use and access the web, and this has changed how sites are designed.

Since the end of the browsers wars[when?] new browsers have been released. Many of these are open source meaning that they tend to have faster development and are more supportive of new standards. The new options are considered by many[weasel words] to be better than Microsoft's Internet Explorer.

The W3C has released new standards for HTML (HTML5) and CSS (CSS3), as well as new JavaScript API's, each as a new but individual standard.[when?] While the term HTML5 is only used to refer to the new version of HTML and some of the JavaScript API's, it has become common to use it to refer to the entire suite of new standards (HTML5, CSS3 and JavaScript).

Tools and technologies

Web designers use a variety of different tools depending on what part of the production process they are involved in. These tools are updated over time by newer standards and software but the principles behind them remain the same. Web designers use both vector and raster graphics editors to create web-formatted imagery or design prototypes. Technologies used to create websites include W3C standards like HTML and CSS, which can be hand-coded or generated by WYSIWYG editing software. Other tools web designers might use include mark up validators and other testing tools for usability and accessibility to ensure their websites meet web accessibility guidelines.

Skills and techniques

Marketing and communication design

Marketing and communication design on a website may identify what works for its target market. This can be an age group or particular strand of culture; thus the designer may understand the trends of its audience. Designers may also understand the type of website they are designing, meaning, for example, that (B2B) business-to-business website design considerations might differ greatly from a consumer targeted website such as a retail or entertainment website. Careful consideration might be made to ensure that the aesthetics or overall design of a site do not clash with the clarity and accuracy of the content or the ease of web navigation, especially on a B2B website. Designers may also consider the reputation of the owner or business the site is representing to make sure they are portrayed favourably.

User experience design and interactive design

User understanding of the content of a website often depends on user understanding of how the website works. This is part of the user experience design. User experience is related to layout, clear instructions and labeling on a website. How well a user understands how they can interact on a site may also depend on the interactive design of the site. If a user perceives the usefulness of the website, they are more likely to continue using it. Users who are skilled and well versed with website use may find a more distinctive, yet less intuitive or less user-friendly website interface useful nonetheless. However, users with less experience are less likely to see the advantages or usefulness of a less intuitive website interface. This drives the trend for a more universal user experience and ease of access to accommodate as many users as possible regardless of user skill. Much of the user experience design and interactive design are considered in the user interface design.

Advanced interactive functions may require plug-ins if not advanced coding language skills. Choosing whether or not to use interactivity that requires plug-ins is a critical decision in user experience design. If the plug-in doesn't come pre-installed with most browsers, there's a risk that the user will have neither the know how or the patience to install a plug-in just to access the content. If the function requires advanced coding language skills, it may be too costly in either time or money to code compared to the amount of enhancement the function will add to the user experience. There's also a risk that advanced interactivity may be incompatible with older browsers or hardware configurations. Publishing a function that doesn't work reliably is potentially worse for the user experience than making no attempt. It depends on the target audience if it's likely to be needed or worth any risks.

Page layout

Part of the user interface design is affected by the quality of the page layout. For example, a designer may consider whether the site's page layout should remain consistent on different pages when designing the layout. Page pixel width may also be considered vital for aligning objects in the layout design. The most popular fixed-width websites generally have the same set width to match the current most popular browser window, at the current most popular screen resolution, on the current most popular monitor size. Most pages are also center-aligned for concerns of aesthetics on larger screens.

Fluid layouts increased in popularity around 2000 as an alternative to HTML-table-based layouts and grid-based design in both page layout design principle and in coding technique, but were very slow to be adopted. This was due to considerations of screen reading devices and varying windows sizes which designers have no control over. Accordingly, a design may be broken down into units (sidebars, content blocks, embedded advertising areas, navigation areas) that are sent to the browser and which will be fitted into the display window by the browser, as best it can. As the browser does recognize the details of the reader's screen (window size, font size relative to window etc.) the browser can make user-specific layout adjustments to fluid layouts, but not fixed-width layouts. Although such a display may often change the relative position of major content units, sidebars may be displaced below body text rather than to the side of it. This is a more flexible display than a hard-coded grid-based layout that doesn't fit the device window. In particular, the relative position of content blocks may change while leaving the content within the block unaffected. This also minimizes the user's need to horizontally scroll the page.

Responsive Web Design is a newer approach, based on CSS3, and a deeper level of per-device specification within the page's stylesheet through an enhanced use of the CSS @media rule.

Typography

Web designers may choose to limit the variety of website typefaces to only a few which are of a similar style, instead of using a wide range of typefaces or type styles. Most browsers recognize a specific number of safe fonts, which designers mainly use in order to avoid complications.

Font downloading was later included in the CSS3 fonts module and has since been implemented in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has subsequently increased interest in web typography, as well as the usage of font downloading.

Most site layouts incorporate negative space to break the text up into paragraphs and also avoid center-aligned text.

Motion graphics

The page layout and user interface may also be affected by the use of motion graphics. The choice of whether or not to use motion graphics may depend on the target market for the website. Motion graphics may be expected or at least better received with an entertainment-oriented website. However, a website target audience with a more serious or formal interest (such as business, community, or government) might find animations unnecessary and distracting if only for entertainment or decoration purposes. This doesn't mean that more serious content couldn't be enhanced with animated or video presentations that is relevant to the content. In either case, motion graphic design may make the difference between more effective visuals or distracting visuals.

Motion graphics that are not initiated by the site visitor can produce accessibility issues. The World Wide Web consortium accessibility standards require that site visitors be able to disable the animations.

Quality of code

Website designers may consider it to be good practice to conform to standards. This is usually done via a description specifying what the element is doing. Failure to conform to standards may not make a website unusable or error prone, but standards can relate to the correct layout of pages for readability as well making sure coded elements are closed appropriately. This includes errors in code, more organized layout for code, and making sure IDs and classes are identified properly. Poorly-coded pages are sometimes colloquially called tag soup. Validating via W3C can only be done when a correct DOCTYPE declaration is made, which is used to highlight errors in code. The system identifies the errors and areas that do not conform to web design standards. This information can then be corrected by the user.

Generated content

There are two ways websites are generated: statically or dynamically.

Static websites

Main article: Static web page

A static website stores a unique file for every page of a static website. Each time that page is requested, the same content is returned. This content is created once, during the design of the website. It is usually manually authored, although some sites use an automated creation process, similar to a dynamic website, whose results are stored long-term as completed pages. These automatically-created static sites became more popular around 2015, with generators such as Jekyll and Adobe Muse.

The benefits of a static website are that they were simpler to host, as their server only needed to serve static content, not execute server-side scripts. This required less server administration and had less chance of exposing security holes. They could also serve pages more quickly, on low-cost server hardware. These advantage became less important as cheap web hosting expanded to also offer dynamic features, and virtual servers offered high performance for short intervals at low cost.

Almost all websites have some static content, as supporting assets such as images and stylesheets are usually static, even on a website with highly dynamic pages.

Dynamic websites

Main article: Dynamic web page

Dynamic websites are generated on the fly and use server-side technology to generate webpages. They typically extract their content from one or more back-end databases: some are database queries across a relational database to query a catalogue or to summarise numeric information, others may use a document database such as MongoDB or NoSQL to store larger units of content, such as blog posts or wiki articles.

In the design process, dynamic pages are often mocked-up or wireframed using static pages. The skillset needed to develop dynamic web pages is much broader than for a static pages, involving server-side and database coding as well as client-side interface design. Even medium-sized dynamic projects are thus almost always a team effort.

When dynamic web pages first developed, they were typically coded directly in languages such as Perl, PHP or ASP. Some of these, notably PHP and ASP, used a 'template' approach where a server-side page resembled the structure of the completed client-side page and data was inserted into places defined by 'tags'. This was a quicker means of development than coding in a purely procedural coding language such as Perl.

Both of these approaches have now been supplanted for many websites by higher-level application-focused tools such as content management systems. These build on top of general purpose coding platforms and assume that a website exists to offer content according to one of several well recognised models, such as a time-sequenced blog, a thematic magazine or news site, a wiki or a user forum. These tools make the implementation of such a site very easy, and a purely organisational and design-based task, without requiring any coding.

Editing the content itself (as well as the template page) can be done both by means of the site itself, and with the use of third-party software. The ability to edit all pages is provided only to a specific category of users (for example, administrators, or registered users). In some cases, anonymous users are allowed to edit certain web content, which is less frequent (for example, on forums - adding messages). An example of a site with an anonymous change is Wikipedia.

Homepage design

Usability experts, including Jakob Nielsen and Kyle Soucy, have often emphasised homepage design for website success and asserted that the homepage is the most important page on a website. However practitioners into the 2000s were starting to find that a growing number of website traffic was bypassing the homepage, going directly to internal content pages through search engines, e-newsletters and RSS feeds. Leading many practitioners to argue that homepages are less important than most people think. Jared Spool argued in 2007 that a site's homepage was actually the least important page on a website.

In 2012 and 2013, carousels (also called 'sliders' and 'rotating banners') have become an extremely popular design element on homepages, often used to showcase featured or recent content in a confined space. Many practitioners argue that carousels are an ineffective design element and hurt a website's search engine optimisation and usability.

Occupations

There are two primary jobs involved in creating a website: the web designer and web developer, who often work closely together on a website. The web designers are responsible for the visual aspect, which includes the layout, coloring and typography of a web page. Web designers will also have a working knowledge of markup languages such as HTML and CSS, although the extent of their knowledge will differ from one web designer to another. Particularly in smaller organizations one person will need the necessary skills for designing and programming the full web page, while larger organizations may have a web designer responsible for the visual aspect alone.

Further jobs which may become involved in the creation of a website include:

Graphic designers to create visuals for the site such as logos, layouts and buttons

Internet marketing specialists to help maintain web presence through strategic solutions on targeting viewers to the site, by using marketing and promotional techniques on the internet

SEO writers to research and recommend the correct words to be incorporated into a particular website and make the website more accessible and found on numerous search engines

Internet copywriter to create the written content of the page to appeal to the targeted viewers of the site

Adobe Photoshop is a raster graphics editor developed and published by Adobe Systems for macOS and Windows.

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 word "photoshop" has become a verb as in "to Photoshop an image," "photoshopping" and "photoshop contest", though Adobe discourages such use. It can edit and compose raster images in multiple layers and supports masks, alpha compositing and several color models including RGB, CMYK, CIELAB, 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 feature set 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.

Photoshop's naming scheme was initially based on version numbers. However, in October 2002, following the introduction of Creative Suite branding, each new version of Photoshop was designated with "CS" plus a number; e.g., the eighth major version of Photoshop was Photoshop CS and the ninth major version was Photoshop CS2. Photoshop CS3 through CS6 were also distributed in two different editions: Standard and Extended. In June 2013, with the introduction of Creative Cloud branding, Photoshop's licensing scheme was changed to that of software as a service rental model and the "CS" suffixes were replaced with "CC". Historically, Photoshop was bundled with additional software such as Adobe ImageReady, Adobe Fireworks, Adobe Bridge, Adobe Device Central and Adobe Camera RAW.

Alongside Photoshop, Adobe also develops and publishes Photoshop Elements, Photoshop Lightroom, Photoshop Express and Photoshop Touch. Collectively, they are branded as "The Adobe Photoshop Family". It is currently a licensed software.

Early history

Photoshop was developed in 1987 by the American brothers Thomas and John Knoll, who sold the distribution license to Adobe Systems Incorporated in 1988. 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. 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.

File format

Photoshop document

Filename extension

.psd

Internet media type

image/vnd.adobe.photoshop

Type code

8BPS

Open format?

no

Website

www.adobe.com/devnet-apps/photoshop/fileformatashtml

Photoshop files have default file extension as .PSD, which stands for "Photoshop Document." A PSD file stores an image with support for most imaging options available in Photoshop. These include layers with masks, transparency, text, alpha channels and spot colors, clipping paths, and duotone settings. This is in contrast to many other file formats (e.g., .JPG or .GIF) that restrict content to provide streamlined, predictable functionality. A PSD file has a maximum height and width of 30,000 pixels, and a length limit of 2 Gigabytes.

Photoshop files sometimes have the file extension .PSB, which stands for "Photoshop Big" (also known as "large document format"). A PSB file extends the PSD file format, increasing the maximum height and width to 300,000 pixels and the length limit to around 4 Exabytes. The dimension limit was apparently chosen arbitrarily by Adobe, not based on computer arithmetic constraints (it is not close to a power of two, as is 30,000) but for ease of software testing. PSD and PSB formats are documented.

Because of Photoshop's popularity, PSD files are widely used and supported to some extent by most competing software. The .PSD file format can be exported to and from Adobe's other apps like Adobe Illustrator, Adobe Premiere Pro, and After Effects.

Plugins

Main article: Photoshop plugin

Photoshop functionality can be extended by add-on programs called Photoshop plugins (or plug-ins). Adobe creates some plugins, such as Adobe Camera Raw, but third-party companies develop most plugins, according to Adobe's specifications. Some are free and some are commercial software. Most plugins work with only Photoshop or Photoshop-compatible hosts, but a few can also be run as standalone applications.

There are various types of plugins, such as filter, export, import, selection, color correction, and automation. The most popular plugins are the filter plugins (also known as a 8bf plugins), available under the Filter menu in Photoshop. Filter plugins can either modify the current image or create content. Below are some popular types of plugins, and some well-known companies associated with them:

Adobe Camera Raw (also known as ACR and Camera Raw) is a special plugin, supplied free by Adobe, used primarily to read and process raw image files so that the resultant images can be processed by Photoshop. It can also be used from within Adobe Bridge.

Photoshop tools

This section may need to be rewritten entirely to comply with Wikipedia's quality standards. You can help. The discussion page may contain suggestions. (July 2012)

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; andretouching. Some tools contain a small triangle in the bottom right of the toolbox icon. These can be expanded to reveal similar tools. While newer versions of Photoshop are updated to include new 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.

Clone Stamp Tool

The Clone Stamp tool duplicates one part of an image to another part of the same image by way of a brush. The duplication is either in full or in part depending on the mode. The user can also clone part of one layer to another layer. The Clone Stamp tool is useful for duplicating objects or removing a defect in an image.

Shape tools

Photoshop provides an array of shape tools including rectangles, rounded rectangles, ellipses, polygons and lines. These shapes can be manipulated by the pen tool, direct selection tool etc. to make vector graphics.

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 tools

Selection tools are used to select all or any part of a picture to perform cut, copy, edit, or retouching operations.

Cropping

The crop tool can be used to select a particular area of an image and discard the portions outside the chosen section. This tool assists in creating a focus point on an image and unnecessary or excess space. Cropping allows enhancement of a photo’s composition while decreasing the file size. The "crop" tool is in the tools palette, which is located on the right side of the document. By placing the cursor over the image, the user can drag the cursor to the desired area. Once the Enter key is pressed, the area outside the rectangle will be cropped. The area outside the rectangle is the discarded data, which allows for the file size to be decreased. The "crop" tool can alternatively be used to extend the canvas size by clicking and dragging outside the existing image borders.

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.

Moving

The move tool can be used to drag the entirety of a single layer or more if they are selected. Alternatively, once an area of an image is highlighted, the move tool can be used to manually relocate the selected piece to anywhere on the canvas.

Marquee

The marquee is a tool that can make selections that are single row, single column, rectangular and elliptical. An area that has been selected can be edited without affecting the rest of the image. This tool can also crop an image; it allows for better control. In contrast to the crop tool, the "marquee" tool allows for more adjustments to the selected area before cropping. The only marquee tool that does not allow cropping is the elliptical. Although the single row and column marquee tools allow for cropping, they are not ideal, because they only crop a line. The rectangular marquee tool is the preferred option. Once the tool has been selected, dragging the tool across the desired area will select it. The selected area will be outlined by dotted lines, referred to as "marching ants". These dotted lines are called "marching ants", because the dashes look like ants marching around the selected area. To set a specific size or ratio, the tool option bar provides these settings. Before selecting an area, the desired size or ratio must be set by adjusting the width and height. Any changes such as color, filters, location, etc. should be made before cropping. To crop the selection, the user must go to image tab and select crop.

Lasso

The lasso tool is similar to the "marquee" tool, however, the user can make a custom selection by drawing it freehand. There are three options for the "lasso" tool – regular, polygonal, and magnetic. The regular "lasso" tool allows the user to have drawing capabilities. Photoshop will complete the selection once the mouse button is released. The user may also complete the selection by connecting the end point to the starting point. The "marching ants" will indicate if a selection has been made. The "polygonal lasso" tool will draw only straight lines, which makes it an ideal choice for images with many straight lines. Unlike the regular "lasso" tool, the user must continually click around the image to outline the shape. To complete the selection, the user must connect the end point to the starting point just like the regular lasso tool. "Magnetic lasso" tool is considered the smart tool. It can do the same as the other two, but it can also detect the edges of an image once the user selects a starting point. It detects by examining the color pixels as the cursor move over the desired area. A pixel is the smallest element in an image. Closing the selection is the same as the other two, which should also should display the "marching ants" once the selection has been closed.

The quick selection tool selects areas based on edges, similarly to the magnetic lasso tool. The difference between this tool and the lasso tool is that there is no starting and ending point. Since there isn’t a starting and ending point, the selected area can be added onto as much as possible without starting over. By dragging the cursor over the desired area, the quick selection tool detects the edges of the image. The "marching ants" allow the user to know what is currently being selected. Once the user is done, the selected area can be edited without affecting the rest of the image. One of the features that makes this tool especially user friendly is that the SHIFT key is not needed to add more to the selection; by default, extra mouse clicks will be added to the selection rather than creating a new selection.

Magic wand

The magic wand tool selects areas based on pixels of similar values. One click will select all neighboring pixels of similar value within a tolerance level set by the user. If the eyedropper tool is selected in the options bar, then the magic wand can determine the value needed to evaluate the pixels; this is based on the sample size setting in the eyedropper tool. This tool is inferior to the quick selection tool which works much the same but with much better results and more intuitive controls. The user must decide what settings to use or if the image is right for this tool.

Eraser

The Eraser tool erases content based on the active layer. If the user is on the text layer, then any text across which the tool is dragged will be erased. The eraser will convert the pixels to transparent, unless the background layer is selected. The size and style of the eraser can be selected in the options bar. This tool is unique in that it can take the form of the paintbrush and pencil tools. In addition to the straight eraser tool, there are two more available options – background eraser and magic eraser. The background eraser deletes any part of the image that is on the edge of an object. This tool is often used to extract objects from the background. The magic eraser tool deletes based on similar colored pixels. It is very similar to the magic wand tool. This tool is ideal for deleting areas with the same color or tone that contrasts with the rest of the image.

Video editing

In Adobe CS5 Extended edition, video editing is comprehensive and efficient with a broad compatibility of video file formats such as MOV, AVIand MPEG-4 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 three-dimensional with the click of a button. Extrusions of texts, an available library of materials for three-dimensional, 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 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 or later, users can 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.

Color replacement tool

The Color Replacement Tool allows the user to change the color, while maintaining the highlights and shadows of the original image, of pieces of the image. By selecting Brushs and right clicking, the Color Replacement Tool is the third option down. What is important to note with this tool is the foreground color. The foreground color is what will be applied when painting along the chosen part of the image with the Color Replacement tool.

Cultural impact

Main article: Photoshopping

Photoshop and derivatives such as Photoshopped (or just Shopped) have become verbs that are sometimes used to refer to images edited by Photoshop, or any image manipulating program. Such derivatives are discouraged by Adobe because, in order to maintain validity and protect the trademark from becoming generic, trademarks must be used as proper nouns.

A landscape photo composited and manipulated in Photoshop

A self-portrait photo merge, created using Photoshop

Version history

Main article: Adobe Photoshop version history

Older versions

This section needs expansion. You can help by adding to it. (February 2013)

Photoshop's naming scheme was initially based on version numbers. Adobe published thirteen versions (major and minor changes) before the October 2003 introduction of Creative Suite branding. In February 2013 Adobe donated the source code of the 1990 1.0.1 version of Photoshop to the Computer History Museum.

CS

The first Photoshop CS was commercially released in October 2003 as the eighth major version of Photoshop. Photoshop CS increased user control with a reworked file browser augmenting search versatility, sorting and sharing capabilities and the Histogram Palette which monitors changes in the image as they are made to the document. Match Color was also introduced in CS, which reads color data to achieve a uniform expression throughout a series of pictures.

CS2

Photoshop CS2, released in May 2005, expanded on its predecessor with a new set of tools and features. It included an upgraded Spot Healing Brush, which is mainly used for handling common photographic problems such as blemishes, red-eye, noise, blurring and lens distortion. One of the most significant inclusions in CS2 was the implementation of Smart Objects, which allows users to scale and transform images and vector illustrations without losing image quality, as well as create linked duplicates of embedded graphics so that a single edit updates across multiple iterations.

Adobe responded to feedback from the professional media industry by implementing non-destructive editing as well as the producing and modifying of 32-Bit High Dynamic Range (HDR) images, which are optimal for 3D rendering and advanced compositing. FireWire Previews could also be viewed on a monitor via a direct export feature.

Photoshop CS2 brought the Vanishing Point and Image Warping tools. Vanishing Point makes tedious graphic and photo retouching endeavors much simpler by letting users clone, paint and transform image objects while maintaining visual perspective. Image Warping makes it easy to digitally distort an image into a shape by choosing on-demand presets or by dragging control points.

The File Browser was upgraded to Adobe Bridge, which functioned as a hub for productivity, imagery and creativity, providing multi-view file browsing and smooth cross-product integration across Adobe Creative Suite 2 software. Adobe Bridge also provided access to Adobe Stock Photos, a new stock photography service that offered users one-stop shopping across five elite stock image providers to deliver high-quality, royalty-free images for layout and design.

Camera Raw version 3.0 was a new addition in CS2, and it allowed settings for multiple raw files to be modified simultaneously. In addition, processing multiple raw files to other formats including JPEG, TIFF, DNG or PSD, could be done in the background without executing Photoshop itself.

Photoshop CS2 brought a streamlined interface, making it easier to access features for specific instances. In CS2 users were also given the ability to create their own custom presets, which was meant to save time and increase productivity.

CS2 activation servers' shutdown: In January 2013, Adobe Photoshop CS2 (9.0), with some other CS2 products, was released with an official serial number, due to the technical glitch in Adobe's CS2 activation servers (see Creative Suite 1 and 2).

CS3

CS3 improves on features from previous versions of Photoshop and introduces new tools. One of the most significant is the streamlined interface which allows increased performance, speed, and efficiency. There is also improved support for Camera RAW files which allow users to process images with higher speed and conversion quality. CS3 supports over 150 RAW formats as well as JPEG, TIFF and PDF. Enhancements were made to the Black and White Conversion, Brightness and Contrast Adjustment and Vanishing Point Module tools. The Black and White adjustment option improves control over manual grayscale conversions with a dialog box similar to that of Channel Mixer. There is more control over print options and better management with Adobe Bridge. The Clone Source palette is introduced, adding more options to the clone stamp tool. Other features include the nondestructive Smart Filters, optimizing graphics for mobile devices, Fill Light and Dust Busting tools. Compositing is assisted with Photoshop's new Quick Selection and Refine Edge tools and improved image stitching technology.

CS3 Extended includes everything in CS3 and additional features. There are tools for 3D graphic file formats, video enhancement and animation, and comprehensive image measurement and analysis tools with DICOM file support. The 3D graphic formats allow 3D content to be incorporated into 2D compositions. As for video editing, CS3 supports layers and video formatting so users can edit video files per frame.

CS3 and CS3 Extended were released in April 2007 to the United States and Canada. They were also made available through Adobe’s online store and Adobe Authorized Resellers. Both CS3 and CS3 Extended are offered as either a stand-alone application or feature of Adobe Creative Suite. The price for CS3 is US$649 and the extended version is US$999. Both products are compatible with Intel-based Macs and PowerPCs, supporting Windows XP and Windows Vista. CS3 is the first release of Photoshop that will run natively on Macs with Intel processors: previous versions can only run through the translation layer Rosetta, and will not run at all on Macs running Mac OS X 10.7 or later.

CS4

CS4 features smoother panning and zooming, allowing faster image editing at a high magnification. The interface is more simplified with its tab-based interface making it cleaner to work with. Photoshop CS4 features a new 3D engine allowing the conversion of gradient maps to 3D objects, adding depth to layers and text, and getting print-quality output with the new ray-tracing rendering engine. It supports common 3D formats; the new Adjustment and Mask Panels; Content-aware scaling (seam carving); Fluid Canvas Rotation and File display options. The Content-aware scaling allows users to intelligently size and scale images, and the Canvas Rotation tool makes it easier to rotate and edit images from any angle.

Adobe released Photoshop CS4 Extended, which has the features of Adobe Photoshop CS4, plus capabilities for scientific imaging, 3D, motion graphics, accurate image analysis and high-end film and video users. The faster 3D engine allows users to paint directly on 3D models, wrap 2D images around 3D shapes and animate 3D objects. As the successor to Photoshop CS3, Photoshop CS4 is the first x64 edition of Photoshop on consumer computers for Windows. The color correction tool has also been improved significantly.

CS4 and CS4 Extended were released on 15 October 2008. They were also made available through Adobe’s online store and Adobe Authorized Resellers. Both CS4 and CS4 Extended are offered as either a stand-alone application or feature of Adobe Creative Suite. The price for CS4 is US$699 and the extended version is US$999. Both products are compatible with Intel-based Mac OS X and PowerPCs, supporting Windows XP and Windows Vista.

CS5

A 2D landscape designed in Adobe Photoshop CS5 Extended

Photoshop CS5 was launched on 12 April 2010. In a video posted on its official Facebook page, the development team revealed the new technologies under development, including three-dimensional brushes and warping tools.

In May 2011, Adobe Creative Suite 5.5 (CS5.5) was released, with new versions of some of the applications. Its version of Photoshop, 12.1, is identical to the concurrently released update for Photoshop CS5, version 12.0.4, except for support for the new subscription pricing that was introduced with CS5.5.

CS5 introduces new tools such as the Content-Aware Fill, Refine Edge, Mixer Brush, Bristle Tips and Puppet Warp. The community also had a hand in the additions made to CS5 as 30 new features and improvements were included by request. These include automatic image straightening, the Rule-of-Thirds cropping tool, color pickup, and saving a 16-bit image as a JPEG. Another feature includes the Adobe Mini Bridge, which allows for efficient file browsing and management.

CS5 Extended includes everything in CS5 plus features in 3D and video editing. A new materials library was added, providing more options such as Chrome, Glass, and Cork. The new Shadow Catcher tool can be used to further enhance 3D objects. For motion graphics, the tools can be applied to over more than one frame in a video sequence.

CS5 and CS5 Extended were made available through Adobe's online store, Adobe Authorized Resellers and Adobe direct sales. Both CS5 and CS5 Extended are offered as either a stand-alone application or a feature of Adobe Creative Suite 5. The price for CS5 is US$699 and the extended version is US$999. Both products are compatible with Intel-based Mac OS X and Windows XP, Windows Vista, and Windows 7.

CS6

Photoshop CS6, released in May 2012, added new creative design tools and provided a redesigned interface with a focus on enhanced performance. New features have been added to the Content-Aware tool such as the Content-Aware Patch and Content-Aware Move.

Adobe Photoshop CS6 brought a suite of tools for video editing. Color and exposure adjustments, as well as layers, are among a few things that are featured in this new editor. Upon completion of editing, the user is presented with a handful of options of exporting into a few popular formats.

CS6 brings the "straighten" tool to Photoshop, where a user simply draws a line anywhere on an image, and the canvas will reorient itself so that the line drawn becomes horizontal, and adjusts the media accordingly. This was created with the intention that users will draw a line parallel to a plane in the image, and reorient the image to that plane to more easily achieve certain perspectives.

CS6 allows background saving, which means that while another document is compiling and archiving itself, it is possible to simultaneously edit an image. CS6 also features a customizable auto-save feature, preventing any work from being lost.

The price for CS6 is US$699 and the extended version is US$999. Students, however, even those who are homeschooled, can receive a significant discount on Photoshop.

With the newest Photoshop version 13.1.3, Adobe has dropped support for Windows XP (even on native x64 for Windows XP x64); thus, the last version that works on Windows XP is 13.0.1. Adobe also announced that CS6 will be the last suite sold with perpetual licenses in favor of the new Creative Cloud subscriptions, but will continue to support Photoshop CS6 for OS compatibility and will provide bug fixes and security updates as necessary.

CC

Photoshop CC (14.0) was launched on 18 June 2013. As the next major version after CS6, it is only available as part of a Creative Cloud subscription, the full version of which costs $49 every month. Major features in this version include All-new Smart Sharpen, Intelligent Upsampling, and Camera Shake Reduction for reducing blur caused by camera shake. Editable Rounded Rectangles and an update to Adobe Camera Raw (8.0) were also included.

Since the initial launch, Adobe has released two additional feature-bearing updates. The first, version 14.1, was launched on 9 September 2013. The major features in this version were Adobe Generator, a Node.js-based platform for creating plug-ins for Photoshop. Photoshop 14.1 shipped with two plug-ins, one to automatically generate image assets based on an extension in the layer name, and another to automatically generate assets for Adobe Edge Reflow.

Version 14.2 was released on 15 January 2014. Major features include Perspective Warp, Linked Smart Objects, and 3D Printing support.

CC 2014

Photoshop CC 2014 (15.0) was released on 18 June 2014. CC 2014 features improvements to content-aware tools, two new blur tools (spin blur and path blur) and a new focus mask feature that enables the user to select parts of an image based on whether they are in focus or not. Other minor improvements have been made, including speed increases for certain tasks.

CC 2015

Photoshop CC 2015 was released on 15 June 2015. Adobe added various creative features including Adobe Stock, which is a library of custom stock images. It also includes and have the ability to have more than one layer style. For example, in the older versions of Photoshop, only one shadow could be used for a layer but in CC 2015, up to ten are available. Other minor features like Export As, which is a form of the Save For Web in CC 2014 were also added. The updated UI as of 30 November 2015 delivers a cleaner and more consistent look throughout Photoshop, and the user can quickly perform common tasks using a new set of gestures on touch-enabled devices like Microsoft Surface Pro. CC 2015 also marks the 25th anniversary of Photoshop.

CC 2017

Photoshop CC 2017 was released on 2 November 2016. It introduced a new template selector when creating new documents, the ability to search for tools, panels and help articles for Photoshop, support for SVG OpenType fonts and other small improvements. In December 2016, a minor update was released to include support for the MacBook Pro Touch Bar.

CC 2018

Photoshop CC 2018 was released on 18 October 2017. It featured an overhaul to the brush organization system, allowing for more properties (such as color and opacity) to be saved per-brush and for brushes to be categorized in folders and sub-folders. It also added brush stroke smoothing, and over 1000 brushes created by Kyle T. Webster (following Adobe's acquisition of his website, KyleBrush.com). A Curvature Pen tool, similar to the one in Illustrator, was added, allowing for faster creation of Bézier paths. Other additions were Lightroom Photo access, Variable font support, copy-paste layers, enhanced tooltips, 360 panorama and HEIF support, PNG compression, algorithm improvements to Face-aware and selection tools, improved image resizing, and performance improvements to file opening, filters, and brush strokes.

Photoshop Touch

This section needs expansion. You can help by adding to it. (June 2012)

Photoshop Touch was an application designed specifically for tablets and touchscreen devices. It included many of the features of the personal computer version, including layers, selection tools, adjustments, and filters. Edited files could be synced with Adobe Creative Cloud. Photoshop touch was available on iOS and Android. There were two iOS versions-one designed for iPad and the other for iPhone and iPod touch; both required iOS 5.0 or later. Android versions could be installed on any Android handset (4.0 and up) and tablets (3.1 and up). It has since been discontinued.

See also

Creative Cloud controversy

Comparison of raster graphics editors

Image editing

References

"Adobe Photoshop CS5 / Tech specs". Adobe Systems 2011.

"Photoshop CS5 Extended / Tech specs". Adobe Systems 2011.

"language versions | Adobe Photoshop CS6". Adobe.com 2012.

"PROPER USE OF THE PHOTOSHOP TRADEMARK".

Schewe, Jeff (2000). "Thomas & John Knoll". PhotoshopNews. Archived from the original on 26 June 2007 2007.

Story, Derrick (18 February 2000). "From Darkroom to Desktop-How Photoshop Came to Light". Story Photography. Archived from the original on 26 June 2007 2007.

"Photoshop: Born from Two Brothers". CrisherEntertainment.com. 2013-02-28.