در این دوره آموزشی با طراحی وب ‌سایت‌های واکنشگرا آشنا می‌شوید که با ابعاد مختلف صفحات نمایشگر سازگاری دارند. به عبارت دیگر، طرح بندی وب سایت با توجه به اندازه صفحه نمایش بازدید کننده وب سایت تغییر می‌کند. همچنان که پروژه خود را پیش می‌بریم، بسیاری از جنبه‌های HTML و CSS شامل لینک کردن انتخابگرهای CSS به عناصر HTML را پوشش می‌دهیم و اصول و مبانی مورد نیاز برای بررسی تکنیک‌های دیگر را در انتهای این دوره به شما آموزش می‌دهیم.

این دوره آموزشی محصول موسسه Udemy است.

سرفصل های این دوره:

  • ایجاد طرح.
  • ایجاد لینک‌ها، محتوا و حامل‌های
  • ایجاد و ساماندهی طرح با استفاده از
  • ایجاد یک سیستم منو
  • ساماندهی تیتر‌ها، متن‌ها و پاورقی‎ها.
  • ساماندهی و تغییر محل قرارگیری لینک‌هایی از جمله لینک های منو
  • اطمینان یافتن از امکان چاپ مطالب.
  • و…

عنوان دوره: Udemy Photoshop CC for Responsive Web Design

مدت دوره: 3 ساعت و 30 دقیقه

نویسنده: Marc Rogall

 توضیحات:

Udemy Photoshop CC for Responsive Web Design

Marc Rogall
3.5 hours




Learn the concepts of responsive website design and how to customize Photoshop to create full page mock-ups.
Become an integral part in the overall process of web design and development with this beginner course.
Learn responsive web design concepts and tools
Customize Photoshop for a more streamline workflow
Build a consistent web site user experience
Prepare your designs for development
Be the fixture that turns ideas into reality
Learning how to create website mock-ups puts you at the apex of the web design process. This is where brainstorming ideas and concepts become a reality. With this skillset, you�ll bring �left-brained� design thinkers ideas to life. In addition you�ll be the liaison to the �right-brained� web developers.
Employees or freelancers with this ability are typically involved in parts of both the creative process, and development process. You benefit by being a more valualbe asset that can take part in conversations in many different phases of a project.
Content and Overview
Suitable for beginners, through this course of 49 lectures and almost 4 hours of instruction I�ll show you how Photoshop can, and is, being used in modern web design work flows. We�ll start off by covering some core concepts of web design, including how the web is evolving with the advent of mobile devices and why you�d want to use Photoshop for web design in the first place.
From there, you and I are going to be working together to create a full website mockup for a fictional restaurant called Bordeaux. I�ll show you how to set up your Photoshop environment for web work. Create templates for responsive web design projects. Design aesthetic elements like UI components. We�ll finally assemble a finished mockup. And then, I�ll show you how to deliver your final results to your client or to a developer.
What are the requirements?
An installed version of Photoshop CC.
What am I going to get from this course?
Over 49 lectures and 3.5 hours of content!
Asses responsive web design structure and functionality
Repurpose content for excellent user experience (UX) across multiple devices
Customize the Photoshop CC workspace specifically for web design.
Build mock ups with an understanding of responsive design principles
Navigate the Photoshop CC interface with ease.
Organize their Photoshop files for simpler navigation and way finding.
Draw simple and complex vector shapes.
Style readable and legible typography quickly.
Apply "non-destructive" styles and effects to custom graphics.
Edit photographs; the backbone that makes Photoshop so successful.
What is the target audience?
The ideal student for this course for anyone wanting to expand they�re current skill set. Whether that be a UX specialist, web developer or for any beginner who�s looking for initial Photoshop training.


Lecture 1
Intro � What is responsive design?
02:52
Section 1: Concepts You Need To Understand
Lecture 2
Exploring a responsive site
09:01
In this video we'll explore a responsive site to get a better idea of the design theories.
Lecture 3
Planning a responsive site
03:05
Planning a responsive design can be frustrating, but in these few key points can help you plan better responsive sites.
Lecture 4
Where you and Photoshop fit into the design process
03:33
In no way will you only be a part of any one phase of the process, but this video will shed some light on where you might fit.
Lecture 5
Screen size vs. resolution
03:33
Before we start learning how to create web graphics, we first need to understand the difference between resolution and screen size.
Section 2: Customizing our Photoshop setup
Lecture 6
Arranging the workspace
05:17
Let's customize Photoshop so that we can work easier developing responsive websites.
Lecture 7
Understanding color
04:27
Understand how color on screen works.
Lecture 8
Color Handout
2 pages
Lecture 9
Adjusting Photoshop's color settings
03:55
Understand how to set color so that your web graphics look as good as possible from one screen to the next.
Lecture 10
Organization
02:28
Naming layers and organizing them so that other possible team members can work with you.
Section 3: Designing for Multiple Devices
Lecture 11
Determining breakpoints
01:03
When does your design need to change depending on someones screen size?
Lecture 12
Grid handout
2 pages
Lecture 13
Bootstrap Grid
04:33
Let's use the grid system of the world most popular responsive website development framework as a starting point for our designs.
Lecture 14
Opening a new document
03:17
Setting our preferences for a new document.
Lecture 15
Creating our large grid
10:15
Setting up our large grid system for our "desktop" size website design.
Lecture 16
Creating our medium grid
08:02
Setting up our medium grid system for our "landscape tablet" size website design.
Lecture 17
Creating our small grid
07:01
Setting up our small grid systems for our "portrait tablet and mobile" size website design.
Section 4: The Backbone of Photoshop � Layers
Lecture 18
Using the layers panel
05:53
Learn all the in's and out's, and the true power of the layers panel. Quite possibly your most important tool.
Section 5: Color
Lecture 19
Creating custom color swatches
03:56
Make your workflow process easier by having colors available quickly.
Lecture 20
Working with Adobe Color
02:38
Integrate Adobe's online color tool with Photoshop, and share them with the rest of your team.
Section 6: Working with Basic Shapes
Lecture 21
Vector vs. Rasterized graphics
02:55
Learn the extreme differences between vector and bitmap graphics.
Lecture 22
Three ways to use the shape tools
03:59
Different ways to draw shapes.
Lecture 23
Converting shapes to paths
01:45
Learn the difference between shapes and paths and why each is ideal in different situations.
Lecture 24
Drawing rectangles and ellipse's polygons and stars
03:38
Learn all the different types of shape tools in Photoshop
Lecture 25
Drawing lines
02:08
Learn what exactly happens when you draw a line.
Lecture 26
Building the large grid graphic elements
06:34
Lecture 27
Building the x-small grid graphical elements
09:40
Lecture 28
Building the main content sections
07:04
Lecture 29
Building the sidebar
06:18
Lecture 30
The pen tool
07:40
The pen tool is a powerful Photoshop tool, one you will probably have to learn to like. Once you do, you'll be a more powerful designer.
Lecture 31
Finishing The Graphical Elements
08:06
Use the selection and direct selection tools to finish the complex graphical elements.
Section 7: Working with Text
Lecture 32
Web safe fonts
01:51
Using system fonts in your designs and the possible success rate.
Lecture 33
Google fonts
02:35
Apply the always growing library of online web fonts to your designs.
Lecture 34
Point and paragraph text
01:41
What's the difference between the two types of text boxes in Photoshop.
Lecture 35
Styling Text
05:57
Using the Character and Paragraph styles panels
Lecture 36
Setting up paragraph styles
02:45
Saving styles in the Paragraph styles panel to quickly format text.
Lecture 37
Setting up character styles
03:32
Character styles can make little style adjustments quickly and easily.
Lecture 38
Text for Mobile Devices
03:24
A quick brief on some things you may not know about mobile typography.
Lecture 39
Icon fonts
04:30
Implementing the surge of icon fonts has made the transition from design to development very easy.
Section 8: Importing Artwork
Lecture 40
Layer Masks
05:27
The power, and one of the main cornerstones, of layer masks.
Lecture 41
Importing our logo and imagery
04:58
Several ways to import our artwork into the website design.
Section 9: Adding Effects
Lecture 42
Adjustment Layers
02:40
Adjustment layers are a powerful Photoshop tool to make stunning effects.
Lecture 43
Understanding layer styles
03:05
Add interesting effects to your artwork "non-destructively"
Lecture 44
Saving layer styles
02:06
Save and export layer styles for quick use and sharing amongst your team.
Lecture 45
Blend Modes
03:45
Add powerful photographic effects to your Photoshop layers.
Section 10: Gathering our Assets
Lecture 46
Understanding web file formats
05:02
Learn what instance is best to use a specific type of file.
Lecture 47
Exploring the save for web dialogue box
01:32
Exporting different pieces of artwork for use on the web.
Lecture 48
Adobe Generator
04:20
Use Adobe's new generator to quickly export your artwork for the web.
Section 11: Final Thoughts
Lecture 49
Goodbye
00:54