Designing a Single Page Product Website in Photoshop and HTML
MP4 | AVC 707kbps | English | 1280x720 | 15fps | 4h 24mins | AAC stereo 96kbps | 1.72 GB
Genre: Video Training
In this Photoshop tutorial we'll look at the design and development workflow for a single page product website. We'll begin with how to design a concept and subsequent wireframe document. Then we'll use the leading tool in the field, Photoshop, to design the actual layouts for the website. This will include preparing the basic design elements, separate sections and also the mobile device elements for responsive layout. Once we have the layout finished, we'll use technologies such as HTML5, CSS3, jQuery and Sass with Compass to develop the website and bring our design to life. By the end of this Photoshop training, you’ll be more comfortable setting some global and helper styles, styling specific sections of the website, integrating plugins and setting media queries for different screen sizes.
Content:
1
Introduction and project overview Watch it now
01:05
Setting up the project folder and files
2
Setting up the project folder and files Free with Demo »
09:25
Building a concept and wireframe for the hero section
3
Building a concept and wireframe for the hero section Free with Demo »
09:41
Building a wireframe for the features and pricing section
4
Building a wireframe for the features and pricing section
09:54
Building a wireframe for the gallery and testimonials
5
Building a wireframe for the gallery and testimonials
08:34
Setting up the Photoshop document
6
Setting up the Photoshop document
08:02
Designing the header with navigation
7
Designing the header with navigation
09:09
Designing the header and hero background image
8
Designing the header and hero background image
10:09
Designing the basic elements for the features section
9
Designing the basic elements for the features section
08:05
Adding text and icons to the features section
10
Adding text and icons to the features section
08:25
Designing the pricing tables section
11
Designing the pricing tables section
10:07
Designing the gallery with product mockups
12
Designing the gallery with product mockups
09:40
Designing the testimonials and footer
13
Designing the testimonials and footer
10:11
Reviewing the design for consistency
14
Reviewing the design for consistency
09:39
Designing the mobile navigation
15
Designing the mobile navigation
09:25
Setting up for the development process
16
Setting up for the development process
09:01
Building the header, hero, features and pricing sections
17
Building the header, hero, features and pricing sections
09:16
Building the gallery, testimonial and footer sections
18
Building the gallery, testimonial and footer sections
08:38
Slicing the assets from the design
19
Slicing the assets from the design
10:19
Setting up global and helper styles
20
Setting up global and helper styles
10:03
Styling the header with the logo and navigation
21
Styling the header with the logo and navigation
07:45
Styling the hero section
22
Styling the hero section
09:49
Styling the features section
23
Styling the features section
09:39
Styling the pricing section
24
Styling the pricing section
08:59
Integrating and styling the gallery plugin
25
Integrating and styling the gallery plugin
09:31
Styling the testimonials and footer
26
Styling the testimonials and footer
09:50
Developing the scrolling navigation
27
Developing the scrolling navigation
08:59
Styling the mobile navigation
28
Styling the mobile navigation
10:22
Toggling the mobile navigation and review responsiveness
29
Toggling the mobile navigation and review responsiveness
在 Photoshop 和 HTML 的单页面产品网站设计
MP4 |AVC 707 kbps |英语 |1280 x 720 |15 fps |4 h 24mins |AAC 立体声 96 kbps|1.72 GB
体裁︰ 视频培训
在这个 Photoshop 教程中，我们来看一个单页产品网站的设计与开发工作流。我们首先将如何设计概念和随后的线框文档。然后我们会在字段中，Photoshop，使用领先的工具来设计网站的实际布局。这将包括准备的基本设计元素，独立节，也为响应布局移动设备元素。一旦我们有完成的布局，我们将使用技术如 HTML5，CSS3，jQuery，用指南针 Sass 开发的网站，给生活带来我们的设计。这个 Photoshop 培训结束时，你就会更舒适的设置一些全球和帮手风格，造型的网站的特定部分，整合插件，设置不同的屏幕大小的媒体查询。
内容︰
1
介绍和项目概述现在看它
1:05
设置项目文件夹和文件
2
设置项目文件夹和文件演示中免费»
9:25
建筑的概念和线框的英雄节
3
建筑的概念和线框的英雄节自由与演示»
9:41
建设一个线框的特征和定价节
4
建设一个线框的特征和定价节
9:54
建设一个线框的画廊和感言
5
建设一个线框的画廊和感言
8:34
Photoshop 文档设置
6
Photoshop 文档设置
8:02
设计与导航标题
7
设计与导航标题
9:09
设计的标头和英雄背景图像
8
设计的标头和英雄背景图像
10:09
设计功能部分的基本要素
9
设计功能部分的基本要素
8:05
将文本和图标添加到功能部分
10
将文本和图标添加到功能部分
8:25
定价表截面设计
11
定价表截面设计
10:07
设计与产品版面编排画廊
12
设计与产品版面编排画廊
9:40
设计的褒奖和页脚
13
设计的褒奖和页脚
10:11
审查设计的一致性
14
审查设计的一致性
9:39
设计移动导航
15
设计移动导航
9:25
为发展进程设置
16
为发展进程设置
9:01
建筑的标头、 英雄、 特征和定价部分
17
建筑的标头、 英雄、 特征和定价部分
9:16
建筑画廊、 见证和页脚节
18
建筑画廊、 见证和页脚节
8:38
切片的资产从设计
19
切片的资产从设计
10:19
设置全局和帮助器样式
20
设置全局和帮助器样式
10:03
造型的标志与导航标题
21
造型的标志与导航标题
7:45
造型的英雄节
22
造型的英雄节
9:49
造型功能部分
23
造型功能部分
9:39
造型中的定价
24
造型中的定价
8:59
整合和样式库插件
25
整合和样式库插件
9:31
造型的褒奖和页脚
26
造型的褒奖和页脚
9:50
发展滚动导航
27
发展滚动导航
8:59
造型的移动导航
28
造型的移动导航
10:22
切换的移动导航与审查反应
29
切换的移动导航与审查反应