Alison's New App is now available on iOS and Android! Download Now

Building Websites with Photoshop CC

Learn the steps involved in building a professional website using Photoshop CC in this free online course.

Publisher: Stone River eLearning
If you have ever wanted to design beautiful, functional websites, then this free online web design course will set you on the right path. Photoshop CC is the perfect platform to use because of its extensive tools and functionalities. Learn about the various grid systems that can be used as templates to build professional looking web pages, wireframing and UI design and importantly, how to extract HTML and CSS from Photoshop.
Building Websites with Photoshop CC
  • Duration

    4-5 Hours
  • Students

  • Accreditation






View course modules


As businesses around the world expand, the pressure to maintain and upgrade to meet technological needs grows. One of the many requirements that organizations must meet in order to sustain or improve their position in the corporate world is to have an online presence. The majority of businesses today have an online presence, whether through social media or their own website. Having a website allows businesses to showcase their services and portfolio of projects to prospective customers, making it easier for customers to contact them. Today, a website has become the face of an organization, and the absence of one can have a negative impact on the business. This free online Photoshop CC course simplifies the process of creating a website for your business or organization by providing step-by-step instructions on how to create a fully functional website with Photoshop CC. To build a website with Photoshop CC, you must have a basic understanding of markup languages such as HTML and CSS. The first step in any website project is to create a mindmap of the website contents, the functionality it will provide, and the placement of individual elements on the web layout. Once a decision has been made, it is critical to draft it for use as a reference throughout the development process.

You will begin by using a wireframe to create a layout of all of the elements that will be present on the website. A Photoshop wireframe serves as the project's blueprint and this course uses the wireframe layout known as the 960 grid system. The use of guides is another important command that aids in the creation of a good layout. Guides can also be moved, removed, and locked in place to prevent accidental movement. With the wireframe and guides in place, you will first design various sections of the web layout to serve as the foundation for your website. Following that, once the sections have been determined, you will learn how to create various types of wireframe objects and configure their properties. Thereafter, several methods for creating wireframe objects will be demonstrated. It is critical to name wireframe objects because they serve as references for the actual objects that will be created later. You will then begin creating and assigning actual layout objects to the wireframe - every object created in the web layout has properties that must be determined, whether it is text, a button, an image, or a link. Some objects, such as links, paragraphs, headings, and buttons, will be created in Photoshop, while others, such as images, will be imported using Photoshop's intelligent features, such as linked smart objects. Adding styles to objects is another important process that will take place after the objects have been arranged and placed in their proper positions. The course content covers how to use internal styles and external style sheets to apply different styles to individual elements and groups of objects and the functionality of each object will be assigned and this will be done using HTML. The various ways to extract HTML and CSS from Photoshop CC, as well as how to rebuild each section of the layout using the extracted code will be explained. The final bit of course content includes teaching you how to test each section of the website so it’s ready for launch. 

Photoshop has made it easier than ever for anyone to create a fully functional website. Having a professional website instantly builds brand credibility and this web design course is ideal for anyone who wants to learn how to create a website for their business or personal use.

Start Course Now