اولین قدم در طراحی سایت ، نیازسنجی مشتری است. پس از این مرحله، با شناخت سلایق مشتری در مورد قالب وظیفه طراح، آماده سازی طرح اولیه می باشد.مسلما طرح اولیه از سمت مشتری دستخوش تغییرات خواهد شد. مخصوصا اگر مشتری هیچ دیدی از قالب سایت در ذهن خود نداشته باشد.لذا وظیفه طراح سایت باز کردن افق دید مشتری نسبت به این قضیه است. به همین دلیل اگر قالب را از طریق کد نویسی طراحی کنید و پس از آن مشتری تصمیم به اعمال تغییرات داشته باشد زحمت طراح دو چندان می شود. پیشنهاد ما طراحی قالب PSDلایه باز است.
چگونه قالب PSD لایه باز طراحی کنیم؟
ابتدا سند فتوشاپ را با سایز مورد نظر ایجاد کنید، سپس ساختار کلی سایت اعم از هدر، فوتر، ساید بار و بخش اصلی را با سایز مورد نظر از طریق ابزار خط کش مشخص نمایید و در نهایت شروع به جاگذاری عناصر سایت از طریق ابزارهای فتوشاپ کنید. پس از نهایی شدن طرح، آن را در قالب موکاپ جاگذاری کرده تا شمای واقعی تری را به خود بگیرد، و در انتها به مشتری نشان دهید در صورت تائید نهایی طرح اولیه را از طریق کد پیاده سازی نمایید.
موکاپ چیست؟
موکاپ، فایل های آماده لایه باز PSD می باشد و برای پیش نمایش استفاده می شود مثلا پیش نمایش سایت که انواع گوناگونی دارد و از طریق جستجو در گوگل می توانید موکاپ دلخواه را دانلود نمایید:
موکاپ گوشی
موکاپ لپ تاپ
موکاپ کارت ویزیت
و…..
برای طرح ریزی سایت، قالب را در موکاپ لپ تاپ پیاده سازی کنید.
طریقه قرار دادن طرح سایت در موکاپ:
برای اینکار ابتدا فایل موکاپ و فایل PSDقالب خود را در فتوشاپ به صورت دو فایل جداگانه باز نمایید.تمامی لایه های فایل قالب را انتخاب کرده، سپس در فایل موکاپ لایه ای را که در وسط لپ تاپ قرار گرفته پیدا کنید نوع این لایه Smart Object است(در بخش بعدی به توضیح مفصل این نوع می پردازیم.) روی لایه دابل کلیک کرده پیغام ظاهرشده را با اوکی تائید نمایید، فایل جدیدی باز شده لایه های موجود را حذف کنید و کل لایه های انتخاب شده در فایل قالب را به این فایل انتقال دهید سپس سایز لایه هارا بر اساس سایز سند تنظیم نموده و در قالب فایل JPG ذخیره کنید و تحویل مشتری دهید.
Smart Objectچیست و چه کاربردی دارد؟
معنای لفظی Smart Object آبجکت هوشمند و معنای کاربردی آن، یک فایل کوچک در سند اصلی است. در واقع لایه ای که از نوع Smart Objectهست هیچ تغییری نمی کند بلکه برای تغییر آن با دابل کلیلک کردن وارد فایل کوچک دیگری می شویم و تغییرات را اعمال کرده سپس ذخیره می کنیم وقتی وارد سند اصلی شوید تغییرات مشهود است.
مزیت شاخص Smart Object:
یکی از مزایای Smart Object، حفظ کیفیت لایه است. به طور مثال اگر لایه معمولی را در سند اصلی تغییر سایز دهید پس از چند بار تغییر سایز از کیفیت لایه کاسته می شود اما در لایه Smart Object چون تغییرات در فایل کوچک مستقل از سند اصلی اعمال می شود کیفیت لایه از بین نمی رود.