آموزش نحوه طراحی سایت در فتوشاپ

درس ها Lessons

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

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

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

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

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

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

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

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

• مقدمه Intro

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

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

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

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

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

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

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

• کلید "f". The 'f' key

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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