آموزش Adobe Photoshop CC - طراحی وب، طراحی واکنشگرا و رابط کاربری

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

بررسی اجمالی Overview

• معرفی Introduction

• در پایان پروژه خود باید چه چیزی را تحویل دهیم؟ What do we need to deliver at the end of our project?

• نقش فتوشاپ در طراحی وب سایت چیست؟ What is Photoshop’s role when designing a website

• ویدئوهای تولید چیست؟ What are the production videos?

• ما در فتوشاپ چه می سازیم؟ What are we making in Photoshop?

قبل از اینکه شروع کنید Before you get started

• آماده کردن فضای کاری خود برای کار با رابط کاربری Getting your workspace ready for UI work

• تنظیم تنظیمات برگزیده فتوشاپ Adjusting the Photoshop preferences

• فایل های تمرین را دانلود کنید Download the exercise files

• یک طراح وب خوب همیشه آماده است. A good web designer is alway prepared.

طراحی وب سایت سازگار با موبایل Mobile friendly web design

• آشنایی با طراحی ریسپانسیو موبایل و تبلت Understanding responsive mobile & tablet design

• آشنایی با سیستم های شبکه و بوت استرپ Understanding grid systems & BootStrap

• شبکه های من را بشناسید Know my grids.

ابزارهایی که نیاز دارید The tools you’ll need

• نکاتی برای بزرگنمایی و پیمایش سندتان Tips for zooming & navigating your document

• ابزار اندازه گیری و فاصله گذاری Measuring & spacing tools

• میانبرهای لایه ای که باید بدانید Layer shortcuts you need to know

• ابزار قطره چکان The eye dropper tool

• ابزار تبدیل The transform tool

• کلید "f". The ‘f’ key

• آن ابزار طراحی وب را نام ببرید Name that web design tool

سه بار بررسی کنید کار می کند! Triple check it works!

• تست روی iPhone و iPad با استفاده از Adobe Device Preview Testing on iPhone & iPad using Adobe Device Preview

• آنچه از نظر فنی در طراحی وب ممکن است What is technically possible in web design

• اندازه صفحه نمایش برای دسکتاپ، تبلت و موبایل Screen sizes for desktop, tablet & mobile

• تست، تست... 1، 2، 3 Testing, testing... 1, 2, 3

صفحات شما Your pages

• استفاده از تابلوهای هنری Using art boards

• در مورد ارتفاع صفحه چطور؟ What about page heights?

• راهنمای صفحه، ستون ها و خط کش ها Page guides, columns & rulers

• ارتفاع صفحه شما چقدر مهم است؟ How important are your page heights?

رنگ های وب سایت Website Colors

• انتخاب رنگ های وب سایت Picking website colors

• بدانید از چه رنگ هایی استفاده کنید. Know what colors to use.

افزودن ساختار به طراحی وب سایت شما Adding structure to your website design

• با اشکال برداری ساختار به سایت خود اضافه کنید Adding structure to your site with the vector shapes

• ویدئوی تولید - اضافه کردن ساختار به طراحی وب شما Production video - adding structure to your web design

• اضافه کردن ساختار Adding structure

استفاده از متن در طراحی سایت Using text in website design

• گسترش و باکس های متنی با عرض ثابت در فتوشاپ Expanding & fixed width text boxes in Photoshop

• نحوه طراحی با استفاده از فونت های ایمن وب از طریق فونت های گوگل How to design using web safe fonts via Google Fonts

• متن نگهدارنده مکان با Lorem Ipsum Place holder text with Lorem Ipsum

• فیلم تولید - اضافه کردن تمام متن ما Production video - adding all of our text

• همه اینها به نظر من لاتین است. It all looks Latin to me.

تنظیمات صفحه Page adjustments

• تنظیم لبه های صفحه شما Adjusting your page edges

• تنظیم صفحه Page adjustment

استفاده از تصاویر در طراحی سایت Using images in your website design.

• از کجا می توان تصاویر رایگان استفاده تجاری را دریافت کرد Where to get commercial use free images

• جاسازی یا پیوند دادن تصاویرتان؟ Embedding or linking your images?

• نحوه ماسک کردن تصاویر با استفاده از ماسک برش How to mask your images using a clipping mask

• پوشاندن تصاویر برای گوشه ها و دایره های گرد Masking images for rounded corners & circles

• نحوه ایجاد تصاویر پس زمینه بزرگ How to create large background images

• فیلم تولید - اضافه کردن تصاویر ما Production video - adding our images

• تصاویر Images

استفاده از آیکون ها در طراحی سایت Using icons in your website design.

• از کجا می توان استفاده تجاری، نمادهای رایگان برای طراحی وب سایت فتوشاپ خود را دریافت کرد. Where to get commercial use, free icons for your Photoshop website design.

• فیلم تولید - اضافه کردن نمادهای ما Production video - adding our icons

• رنگ آمیزی آیکون های وب سایت شما Coloring your website icons

تسلط بر لایه ها Mastering layers

• چگونه با گروه بندی لایه ها مرتب شویم How to tidy up with layer grouping

• آنچه را که نیاز دارید به سرعت با جستجوی لایه پیدا کنید Find what you need quickly with layer search

• نامگذاری لایه های خود مانند یک حرفه ای Naming your layers like a pro

• یک لایه فتوشاپ حرفه ای شوید Become a Photoshop layer professional

فرم ها و پاورقی ها Forms and footers

• طراحی فرم برای طراحی سایت شما Designing a form for your website design

• چگونه یک فوتر برای وب سایت خود ایجاد کنیم How to create a footer for your website

• ویدئوی تولید - تکمیل نمای دسکتاپ ما Production video - finishing up our desktop view

• فرم ها در فتوشاپ Forms in Photoshop

طراحی برای وب سایت های موبایل Designing for mobile websites

• طراحی نمای وب سایت موبایل شما Designing your mobile website view

• فیلم تولید - تکمیل نمای موبایل ما Production video - completing our mobile view

• اول موبایل، تبلت یا دسکتاپ؟ Mobile, Tablet or Desktop first?

صادرات طراحی وب سایت فتوشاپ شما Exporting your Photoshop website design

• صادرات تصاویر وب شما Exporting your web images

• صادرات CSS از فتوشاپ Exporting CSS from Photoshop

• استفاده از Adobe Generate برای شگفت انگیز کردن صادرات تصویر Using Adobe Generate to make image export amazing

• انواع تصاویر وب Web image types

نتیجه Conclusion

• من نمی خواهم این تمام شود. بعد دن چی؟ I don’t want this to be over. What next Dan?