آموزش Photoshop CC 2014 برای طراحی وب

سرفصل ها و درس ها

مقدمه Introduction

• خوش آمدی Welcome

• با استفاده از فایل های تمرینی Using exercise files

• نحوه ارسال بازخورد How to send feedback

1. مفاهیم اصلی 1. Core Concepts

• درک "وب جدید" Understanding the "new web"

• چرا از فتوشاپ برای طراحی وب استفاده می کنیم؟ Why use Photoshop for web design?

• رمزگشایی اندازه و وضوح صفحه Decoding screen size and resolution

2. تنظیم فتوشاپ برای کار در وب 2. Setting Up Photoshop for Web Work

• ایجاد فضای کاری طراحی وب Creating a web design workspace

• ایجاد اسناد برای پروژه های وب Creating documents for web projects

• درک مدلهای رنگ وب Understanding web color models

• تنظیم تنظیمات رنگ فتوشاپ Adjusting Photoshop color settings

• ایجاد یک فایل مناسب برای توسعه دهنده Creating a developer-friendly file

3. طراحی پاسخگو 3. Designing Responsively

• طراحی پاسخگو چیست؟ What is responsive design?

• نقاط انتخاب مناسب برای طراحی خود را انتخاب کنید Choosing the right breakpoints for your design

• ایجاد الگوهای پاسخگو در فتوشاپ Creating responsive templates in Photoshop

4- ایجاد Wireframe 4. Creating a Wireframe

• بررسی مشخصات مشتری Reviewing client specs

• ایجاد یک طرح Creating a sketch

• کاوش در سیستم های شبکه Exploring grid systems

• پروژه خود را تنظیم کنید Setting up your project

• قاب تصویر خود را با اشکال و متن بسازید Building your wireframe with shapes and text

5- ایجاد عناصر زیبایی شناسی 5. Creating Aesthetic Elements

• ایجاد یک موضوع رنگی Developing a color theme

• انتخاب قلمهای مناسب Choosing the right fonts

• تنظیم سبک و کاراکتر پاراگراف Setting up character and paragraph styles

• یافتن تصاویر برای مدل خود Finding images for your mockup

6. ایجاد کیت UI با فتوشاپ 6. Creating a UI Kit with Photoshop

• انتخاب یک موضوع UI Choosing a UI theme

• با استفاده از قلم ها و مجموعه های آیکون Using icon fonts and sets

• عناصر UI را به قاب سیم خود اضافه کنید Adding UI elements to your wireframe

• ذخیره عناصر UI به عنوان شکل Saving UI elements as shapes

7. مونتاژ صفحه نمایش 7. Assembling a Page Mockup

• با استفاده از طرح رنگی خود Applying your color scheme

• ناوبری سبک Styling navigation

• مناطق ورودی Styling input areas

• افزودن نسخه از مشتری Adding copy from your client

• اضافه کردن تصاویر به مدل خود Adding images to your mockup

• با اضافه کردن لمس های نهایی به طرح شما Adding the finishing touches to your design

8- بهینه سازی گرافیک وب 8. Optimizing Web Graphics

• درک زمان استفاده از تصاویر در مقابل CSS Understanding when to use images vs. CSS

• رمزگشایی قالب های فایل وب Decoding web file formats

• بهینه سازی تصاویر فردی Optimizing individual images

• با استفاده از تولیدکننده دارایی وب Photoshop Using the Photoshop web asset generator

• چگونه و چه موقع از SVG استفاده کنیم How and when to use SVGs

9- ایجاد تصاویر اسپریت 9. Creating Image Sprites

• spite تصویر چیست؟ What is an image sprite?

• ایجاد یک شبکه اسپریت Developing a sprite grid

• مونتاژ اسپریت Assembling your sprite

• بهینه سازی تصاویر spite Optimizing sprite images

10. استفاده از برنامه های دیگر در گردش کار شما 10. Using Other Apps in Your Workflow

• ایجاد و استفاده از CSS با فتوشاپ Creating and using CSS with Photoshop

• صادر کردن HTML از Photoshop به یک محیط توسعه یکپارچه (IDE) Exporting HTML from Photoshop to an integrated development environment (IDE)

• استفاده از Edge Reflow برای آزمایش طرح های پاسخگو Using Edge Reflow to test responsive designs

• استفاده از پرونده های فتوشاپ در وب سایت های Muse Using Photoshop files in Muse websites

نتیجه Conclusion

• خداحافظ Goodbye