Design - Daniel Scott

Ready to take this Premium course?

Sign up today and continue this course plus 1000 more courses anytime, anywhere.

Start Your Free Trial Now

48 Lessons ( 2h 42m )

• About
• Modules
• Project
• Gallery

Web Designing has almost become a synonym for Graphic Design in the current world. Photoshop plays a major role in web designing. When you learn how to use Photoshop, it can improve your skills, it is possible to clear up the blemishes and the imperfections in the photos. You can remove and change the backgrounds in the photos. This will help in enhancing the complete look and feel of your website. Learn how to use photoshop effectively through this course and emphasize it.

 

 

Learning Objectives:

• Take on paid commercial web design projects.
• Design professional web design mockups using Photoshop.
• Create web designs for mobile, tablets and desktop.
• Present your concepts on actual mobile devices.
• Supply files to a web developer.

Share

Wishlist Gift a Friend

Instructor

Daniel Scott

Guru for Microsoft and Adobe

Daniel has more than 15 years of experience in Web Development and teaching. He is an Adobe Certified…

See Full Profile

Training 5 or more people?

Get your team access to WIISE top 2,000 courses anytime, anywhere.

Try WIISE for Business

What will you cover?

Overview

•   Introduction 0:01:43
•   What do we need to deliver at the end of our project? 0:00:50
•   What is Photoshops role when designing a website 0:00:55
•   What are the production videos? 0:00:24

Before you get started

•   Getting your workspace ready for UI work 0:00:45
•   Adjusting the Photoshop preferences 0:02:05

Mobile friendly web design

•   Understanding responsive mobile & tablet design 0:01:44
•   Understanding grid systems & BootStrap 0:06:28

The tools you will need

•   Tips for zooming & navigating your document 0:02:02
•   Measuring & spacing tools 0:03:54
•   Layer shortcuts you need to know 0:02:49
•   The eye dropper tool 0:01:29
•   The transform tool 0:01:40
•   The F key 0:01:34

Triple check it works!

•   Testing on iPhone & iPad using Adobe Device Preview 0:05:47
•   What is technically possible in web design 0:03:05
•   Screen sizes for desktop, tablet & mobile 0:01:52

Your Pages

•   Using artboards 0:03:49
•   What about page heights? 0:01:19
•   Page guides, colums and rulers 0:02:15

Color

•   Picking website colors 0:03:42

Adding Structure

•   Adding structure to your site with the vector shapes 0:04:04
•   Production video - Adding Structure 0:03:13

Using Text

•   Expanding & fixed width text boxes 0:03:13
•   How to design using web safe fonts via Google Fonts 0:04:07
•   Place holder text with Lorem Ipsum 0:01:24
•   Production video - adding all of our text 0:06:16

Page Adjustments

•   Adjusting your page edges 0:01:28

Adding Images

•   Where to get commercial use free images 0:02:10
•   Embedding & linking images 0:02:13
•   How to mask your images using a clipping mask 0:03:05
•   Masking images for rounded courses & circles 0:02:52
•   How to create large background images 0:05:00
•   Production Video - Adding Images 0:09:25

Using Icons

•   Where to get commercial use, free icons for your design 0:05:03
•   Production video - Adding your icons 0:02:30

Mastering Layers

•   Layers - How to tidy up with grouping 0:04:35
•   Layers - speed up with layer searchLayers - find what you need quickly with layer search 0:01:28
•   Layers - naming your layers quickly 0:01:12

Forms and Footers

•   Designing a form for your website 0:04:13
•   Designing a footer for your website 0:01:18
•   Production video - finishing up our desktop view 0:01:19

Creating Mobile Websites

•   Design the mobile website 0:07:56
•   Production video - completing our mobile view 0:16:47

Exporting your Photoshop file

•   Using Adobe Generate to make image export amazing 0:04:49
•   Exporting your web images 0:08:43
•   Exporting CSS from Photoshop 0:02:48

Conclusion

•   Conclusion - I dont want this to be over. What next Dan? 0:00:51

Share

Wishlist Gift a Friend

Instructor

Daniel Scott

Guru for Microsoft and Adobe

Daniel has more than 15 years of experience in Web Development and teaching. He is an Adobe Certified…

See Full Profile

Training 5 or more people?

Get your team access to WIISE top 2,000 courses anytime, anywhere.

Try WIISE for Business

Project Description

Designing a beautiful, responsive website for a mock creative agency.

You'll be creating a mobile and desktop website design for a creative agency.

       

 

 

You'll be learning to:

• Design professional web design mockups using Photoshop.
• Take on paid commercial web design projects.
• Create web designs for mobile, tablets and desktop.
• Present your concepts on actual mobile devices.
• Supply files to a web developer.

        

   

 

Project Description

 

Here are few project ideas that you may try.
1) Using Photoshop try to remove background and change background of photos.
2) Design a mockup of a website using Photoshop that you can give to a web developer.

 

Attachments

No Attachments found ! in this Course

Leonard - Coffee shop Navya

Building Website Chaitanya Gudipati

One Page Web Design Gyaneshwar Nampalli