آموزش مقدماتی طراحی سایت در فوتوشاپ + فیلم

با سلام و عرض ادب خدمت دوستان و همراهان همیشگی ما. با شما هستیم با آموزش مقدماتی طراحی سایت در فوتوشاپ.

توی این آموزش می خوایم یکم از اصول طراحی سایت تو فوتوشاپ بگیم.

بگیم چه چیزایی بایست در نظر بگیریم. با هم یه PSD سایت رو باز کنیم و بررسی کنیم.

یک توضیح مختصر بدیم که چرا بایستی قبل از کد زدن، یک فایل PSD به کدنویس بدیم.

دلیلش اینه که کدنویسی طولانی و زمان بر هست. از اونجایی که ممکنه کسی که سایت رو سفارش داده، بخواد هی تغییرات در سایت بده، وجود داره. از اونجایی که در کدنویسی با تغییر یک کد ممکنه اختلال در کل سایت درست شه، کدنویس ها پیشنهاد میدن که قبل از شروع یه PSD از سایت مد نظر طراحی شه و وقتی مشتری پسندید روند کدنویسی شروع شه.

چه صفحاتی بایستی طراحی کنیم؟
HomePage:

اولین صفحه ای که تو هر سایتی میبینیم صفحه نخست یا Home Page مربوطست.

پس بایستی اول با اون شروع کنیم.

خوب ما باید سایت های مختلفی ببینیم تا ببینیم اصل هر سایت رو چه چیزهایی تشکیل میده. با سایت فروشگاهی خودمون شروع کنیم.

وارد فروشگاه که بشین بالای صفحه منو های رو میبینید. بسته به نیاز سایت، که چه فروشگاهی یا خبری بایستی اون منو رو در نظر بگیرید.

زیرش اسلایدر قرار می گیره. که می تونه متحرک یا ثابت باشه.

بعد از اسلایدر، بدنه سایتمون هست که بایستی دید چه نیاز هایی باید به نمایش گذاشته بشه.

از اونجایی که ما تو صفخه نخست هستیم، بدنه طراحی و چیدمان بسیار مهم هست. پس حتما نمونه سایت های داخلی و خارجی موفق رو ببینید تا بتونین یک بدنه ی خوب برای سایت طراحی کنید.

پایین صفحه که به اسم فوتر هم گفته میشه، بخشی از هویت یک سایت رو تشکیل میده. اطلاعانی که تو سایت قرار میدید، یه طرف. اطلاعات فوتر یه طرف. باز هم نمونه سایت های مختلف ببینین تا متوجه شید واسه هر سایت بایستی چه قسمت هایی رو در نظر بگیرید.

خوب این چیزهایی که گفتم مربوطه به صفحه نخست یا Home Page هر سایتی بود.

+ ضروری: منو بالا، هدر یا اسلایدر، بدنه ومحتوا، فوتر

Product Page:

اگه سایت فروشگاهی هست بایستی یک صفحه هم برای صفحه محصولات و معرفی محصولات طراحی و ساخته بشه.

توی طراحی بایستی استاندارد هایی که در صفحه نخست رعایت کردید رو مجدد رعایت کنید.

اگر سایت بلاگ خبری هم داره باید یک Psd دیگه به نام Single Page طراحی کنید.

+ ضروری: منو بالا، جای تیتر و متن، قیمت گذاری یا دانلود، توضیحات کامل، فوتر

Single Page:

این صفحه مربوط به سایت هایی هست که داخلشون بلاگ خبری یا آموزشی دارند. این صفحه میشه صفحه ی اصلی که توش اموزش قرار می گیره. مثل همین صفحه که دارید توش مطالعه می کنید.

+ ضروری: منو بالا، در نظر گرفتن جای تیتر و متن، نمایش عکس، کادر سازی برای کامنت، فوتر

برای هر قسمت می تونیم ما یک PSD طراحی کنیم. مثلا برای صفحه عضویت یا ورود. صفحه ی سبد خرید و … که دیگه وارد همه نمیشیم.

 

نکات ابتدایی ساخت پروژه:

سایز مد نظر 1920*1080 پیکسل با رزولیشن 300 و مُد تصویر RGB

در صورتی که نیاز به ابعاد بزرگتر دارید می تونین به جای 1080 رقم بزرگتری قرار بدید. اگر باز کم اومد یا زیاد، از منوی کراپ اضافه یا کم کنید.

ترجیحا با استفاده از خط کش مجازی از هر سمت کادر 20 پیکسل فاصله داشته باشه کاری که می خواین بزنین. بجز منو که می تونه کل صفحه رو بگیره.

 

خوب در ادامه و تو فیلم یه فایل PSD طراحی سایت هم داریم که بازش می کنیم و یکم توضیحات هم اونجا راجع بهشون میدیم.

موفق باشید

 

 

در ادامه می تونین فیلم آموزشی مربوط رو ببینید.

 

دانلود با کیفیت 720

 

 

با عضویت در گروه تلگرامی، می توانید سوالات خودتون رو بپرسید و فایل های تمرینی خودتون رو به اشتراک بذارید.

جهت عضویت از QR Code زیر و یا لینک زیر استفاده کنید.

لینک عضویت در گروه پرسش و پاسخ

 

 

 

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *