چشم‌انداز طراحی وب سایت به طور مداوم در حال تغییر است، اما فتوشاپ با پیشرفت چشمگیر امکانات خود، همچنان خاصیت و کاربَری کلاسیک خود را حفظ نموده است. با استفاده از مفاهیم و تکنیک‌های موجود در این دوره‌ی آموزشی تصویری خواهید آموخت که چگونه فتوشاپ در فرایند طراحی مدرن وب با درجه‌ی تأثیرگذاری مثبت زیاد، استفاده میشود. این آموزش برای کاربران سطح متوسط تهیه شده و کارآیی ابزارهای مربوط به طراحی وب و گردش‌کار بهینه در این زمینه را به همراه موارد و جزئیات تکمیلی پوشش داده است.
محتوای آموزش:
1- چگونگی استفاده از فتوشاپ برای طراحی وب
2- موارد مهم مربوط به اندازه صفحه نمایش و ریزولوشن
3- هدفمند‌سازی سازی وب سایت با بهینه‌سازی خطی‌مشی محتوا
4- سفارشی کردن فضای کاری وب در فتوشاپ
5- موارد مهم مربوط به مبحث Designing responsively
6- ایجاد Wireframes بر روی یک شبکه
7- انتخاب رنگ‌ها و فونت‌ها
8- توسعه دادن UI kit با فتوشاپ
9- فرایندهای مربوط به تصاویر و بهینه‌سازی آنها
10- فرایندهای تکمیلی دیگر
تولید کننده: Lynda.com
تاریخ انتشار: 17-03-2014
سطح: متوسط
مدت زمان آموزش: 3 ساعت و 43 دقیقه
مدرس: Justin Seeley
فهرست کامل سرفصل‌ها و عناوین آموزش (به همراه زمان دقیق آنها) :
Introduction - 3m 2s
Welcome - 1m 23s
Using exercise files - 29s
How to send feedback - 1m 10s
1. Core Concepts - 11m 25s
Understanding the "new web" - 2m 39s
Why use Photoshop for web design? - 5m 22s
Decoding screen size and resolution - 3m 24s
2. Setting Up Photoshop for Web Work - 22m 5s
Creating a web design workspace - 4m 0s
Creating documents for web projects - 4m 51s
Understanding web color models - 5m 4s
Adjusting Photoshop color settings - 5m 36s
Creating a developer-friendly file - 2m 34s
3. Designing Responsively - 11m 47s
What is responsive design? - 5m 26s
Choosing the right breakpoints for your design - 3m 37s
Creating responsive templates in Photoshop - 2m 44s
4. Creating a Wireframe - 38m 25s
Reviewing client specs - 4m 2s
Creating a sketch - 5m 53s
Exploring grid systems - 11m 14s
Setting up your project - 6m 12s
Building your wireframe with shapes and text - 11m 4s
5. Creating Aesthetic Elements - 18m 42s
Developing a color theme - 4m 37s
Choosing the right fonts - 5m 51s
Setting up character and paragraph styles - 4m 51s
Finding images for your mockup - 3m 23s
6. Creating a UI Kit with Photoshop - 21m 11s
Choosing a UI theme - 3m 43s
Using icon fonts and sets - 5m 46s
Adding UI elements to your wireframe - 9m 7s
Saving UI elements as shapes - 2m 35s
7. Assembling a Page Mockup - 40m 42s
Applying your color scheme - 6m 26s
Styling navigation - 4m 58s
Styling input areas - 9m 0s
Adding copy from your client - 3m 26s
Adding images to your mockup - 13m 29s
Adding the finishing touches to your design - 3m 23s
8. Optimizing Web Graphics - 23m 7s
Understanding when to use images vs. CSS - 3m 35s
Decoding web file formats - 2m 38s
Optimizing individual images - 4m 25s
Using the Photoshop web asset generator - 8m 24s
How and when to use SVGs - 4m 5s
9. Creating Image Sprites - 10m 27s
What is an image sprite? - 1m 32s
Developing a sprite grid - 3m 17s
Assembling your sprite - 3m 3s
Optimizing sprite images - 2m 35s
10. Using Other Apps in Your Workflow - 20m 51s
Creating and using CSS with Photoshop - 6m 36s
Exporting HTML from Photoshop to an integrated development environment (IDE) - 3m 20s
Using Edge Reflow to test responsive designs - 7m 54s
Using Photoshop files in Muse websites - 3m 1s
Conclusion - 1m 33s
Goodbye - 1m 33s
نکات:
1- این آموزش به زبان انگلیسی است.
2- آموزش به صورت فیلمهای جداگانه برای هر فصل است.
3- فرمت فایلها MP4 است.
4- فایل های دانلودی قابلیت تعمیر با WinRAR در صورت دانلود ناقص را دارا می باشند.