در این دوره آموزشی با طراحی وب سایتهای واکنشگرا آشنا میشوید که با ابعاد مختلف صفحات نمایشگر سازگاری دارند. به عبارت دیگر، طرح بندی وب سایت با توجه به اندازه صفحه نمایش بازدید کننده وب سایت تغییر میکند. همچنان که پروژه خود را پیش میبریم، بسیاری از جنبههای 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