COC 1 - Develop Digital
Image using Adobe
Photoshop
WEBSITE DEVELOPMENT LIFE CYCLE &
INTRODUCTION TO PHOTOSHOP
Website Development Life Cycle
From creating a plan to launch, your team needs to perform many tasks in order to design and
develop the website that will be able to attract customers. To ensure success, some companies
tend to request assistance from IT staffing companies to augment the in-house team with a
dedicated team of developers. Others try to create a website by their own efforts. Regardless of
the choice, the whole development life cycle will take time and resources, so let’s take a closer
look at how to develop a website and what has to be done.
Project Management
STAGE 1: Gathering Relevant
Information
Purpose
•What is the purpose of the website that the developer will be building?
•What is the actual plan: to provide information solely, sell a product or service?
Objectives
•What is the main goal of building the website?
•Whether it is informational or promotional?
STAGE 1: Gathering Relevant
Information
Target Audience
•Is there is a specific group of people that will help in accomplishing your objectives?
During the website design and development process, it is important to visualize what
type of people would you like to visit the website. Consider their age, gender, likes, and
dislikes. This will certainly help in designing the best website according to their interest.
Content
•What type of content do you post on the site?
•Is the audience looking for a specific type of information?
•Are they looking for promotions, deals, or offers to avail?
Stage 2: Planning: Sitemap and
Wireframe
With all the information that has been gathered from stage one, the design and
implementation strategies are planned according to the type of website and target
audience. A site map is created in this phase.
Stage 3: Design: Layout
Next is to determine the look and feel of the website. In the design phase, it is essential
to embed elements like the logo of the company and the colors that help to enhance to
identify the company on the website. The designer gives life to the graphics, typography,
colors, animations, buttons, drop-down and pop-up menus and more as per the project
requirement.
Stage 4: Development
The development is a stage where the website is built while maintaining the essence of
the website purpose. All the graphic elements are taken into consideration and are used
to generate a functional website.
The process begins with first developing the home page followed by the interior pages.
The main focus is given to the navigational structure of the site.
Content Management System, interactive contact us forms, shopping carts are made
functional in this development step.
Stage 5: Testing, Review, and Launch
After the completion of web development, it is tested. The functionality is tested along
with the device compatibility.
The web designer should be well-versed with the current trends and standards so that
the design and development are done accordingly. The technologies used are HTML
and CSS. The tester validates the codes written for the website.
Stage 6: Maintenance and Updation
The web development stages don’t end after deployment. There are many post-
deployment tasks that take place. Some elements are changed as per the user’s
feedback, support, and maintenance.
One good way to grab potential visitors and repeat their visits is to keep updating the
content and adding new products on a regular basis. The website drives by CMS allows
the customer to edit the content.
INTRODUCTION TO
PHOTOSHOP
Introduction to Photoshop
Photoshop is a photo-editing software. It is a popular image changing software
package. It was developed in 1987 by the American brothers Thomas and John Knoll.
There are two types of graphic software – Vector Graphic and Raster Graphic. This
software provides many image editing features for raster (pixel-based) images as well as
vector graphics. In technical language, Photoshop is a RASTER graphic software, which
means it is used to edit the raster graphics.
RASTER is a combination of pixels. A group of pixels forms a graphic called Raster
Graphics. There are various forms of formats of Raster Graphics –
Introduction to Photoshop
• JPEG – Joint Photographic Experts Group
• PNG – Portable Network Graphics
• GIF – Graphics Interchange Format
Photoshop is a tool for designers, web developers, graphic artists, photographers, and
creative professionals. It is widely used in industries. Web Designer uses photoshop first to
make a logo for website. Application Designer also uses photoshop first to create User
Interface for his application. Even, 3D game developer also uses photoshop to create a digital
painting of its character in game. One can also develop Matte Painting (which is unusual, as
the unreal type of scenes) scenes using these tools.
Getting to know the interface
• You can use Photoshop for almost any type of image editing, from touching up photos to creating high-quality graphics. In
this lesson, we'll introduce you to the Photoshop interface, including how to open files, work with panels, customize the
workspace, and change the display size.
• Photoshop is a complex application, and it can feel a bit intimidating to use at first.
• Image Link: [Link]
Opening files
• Most of the time, you'll want to start by opening an existing photo rather than creating a new blank image. Photoshop allows
you to open and edit existing image files, including JPEG, PNG, and PSD (Photoshop document) files.
To open a file, select File > Open.
A dialog box will appear. Locate and select the file on your computer, then click Open.
If you don't currently have Photoshop open, you can locate and right-click the file on your computer and choose Open With >
Adobe Photoshop to open the file.
Opening files
Overview of the Photoshop
interface
• Because Photoshop is designed primarily for professional use, the interface may feel a bit complex and intimidating for new
users. Even if you have some experience with other image editing software, it's a good idea to become familiar with its main
elements.
Photoshop Interface
• Menu bar (at the very top) shows the File, Edit, Image, and other menus that give you access to a variety of commands,
adjustments, and panels.
• Options bar (underneath the menu bar) displays options for the tool you are currently working with.
• Tools panel (on the left) contains tools for editing images and creating artwork. Similar tools are grouped together. You can
access related tools in a group by clicking and holding a tool in the panel.
• Panels (on the right) include Color, Layers, Properties, and other panels that contain a variety of controls for working with
images. You can find the full list of panels under the Window menu.
• Document window (in the middle) displays the file you’re currently working on. Multiple open documents show up in tabs in
the Document window.
Photoshop File Formats
Graphics file formats differ in the way they represent image data (as pixels or vectors), and support different compression
techniques and Photoshop features. To preserve all Photoshop features (layers, effects, masks, and so on), save a copy of your
image in Photoshop format (PSD).
Like most file formats, PSD supports files up to 2 GB in size. For files larger than 2 GB, save in Large Document Format (PSB),
Photoshop Raw (flattened image only), TIFF (up to 4 GB), or DICOM format.
The standard bit depth for images is 8 bits per channel. To achieve greater dynamic range with 16- or 32-bit images, use the
following formats:
Photoshop File Formats
File Format Types Supported File Formats File Format Types Supported File Formats
•WebP
•AAC •BMP
•M2A •Cineon
Audio import formats •M4A •CompuServe GIF
•MP2 •DICOM
•MP3 •HEIF/HEIC
•IFF format
•JPEG
•JPEG2000
•.264
•Large Document Format PSB
•3GP
•OpenEXR
•3GPP
•PCX
•AVC
•Photoshop 2.0 (Mac only)
•AVI
•Photoshop DCS 1.0
•F4V
•Photoshop DCS 2.0
•FLV Graphic file formats
•Photoshop EPS
•MOV (QuickTime)
•MPE
Video import formats •Photoshop PDF
•MPEG-1
•Photoshop PSD
•MPEG-4
•Photoshop Raw
•MPEG-2 if a decoder is installed (for example, with an
•PICT (read only)
Adobe video app)
•PICT Resource (Mac only; can open only)
•MTS
•Pixar
•MXF
•PNG
•R3D
•Portable Bit Map
•TS
•Radiance
•VOB
•Scitex CT
•Targa
•TIFF
•DPX •Wireless Bitmap
•MOV (QuickTime) •3D Studio (import only)
Video export formats
•MP4 •DAE (Collada)
•JPEG2000 (QuickTime) •Flash 3D (export only)
•JPS (JPEG Stereo)
3D-related formats
•KMZ (Google Earth 4)
•MPO (Multi-Picture format)
•U3D
•Wavefront OBJ
Customizing the Photoshop
environment
If you want to customize Photoshop, you can adjust the default application settings. Most of these options are pretty technical,
but we'd like to show you two basic adjustments you may find helpful.
Let's go over how to adjust the default unit. By default, a document's dimensions are measured in inches. If you're not
primarily editing images for print, we recommend changing this setting to pixels.
