یک psd استاندارد برای قالب ریسپانسیو

[ravand]

سلام
من خیلی وقت ها با گرافیست سر طراحی گرافیک سایت به مشکل بر میخورم.
میخواستم نظر شما رو هم بدونم.
ببینید. الان دگه همه ی قالب ها میره سمت ریسپانسیو . من میگم هر قالبی رو نمیشه ریسپانسیو کرد. و گرافیست باید یه سری اصول رو در طراحی psd قالب سایت رعایت کنه که برنامه نویس به مشکل بر نخوره.
مثلاً چیزی رو که من به گرافیست ها میگم اینه که آقا شما قالبی که زدی رو نسخه ی مبایل و بالاتر از عرض 1000 رو هم در نظر بگیر. ببین این چیزی که با عرض 1000 زدی و تحویل من دادی در نمایشگر های بزرگتر و کوچکتر هم میشه درش آورد؟ یا نه به مشکل بر میخوریم؟
نظر من در مورد طراحی psd قالب ریسپانسیو:
1) مثلاً برخی عکس هدر رو با عرض صد در صد میزنن. وقتی این کار رو کردن حداقل نسخه ی بالاترش رو هم بسازن و تحویل بدن که بفهمم در نسخه ی بالاتر چه شکلی بسازم؟ یا برخی نوار ها با ارتفاع 30پیکسل رو میان صد در صد میزنن وقتی نمایشگر بزرگ میشه ظاهر سایت اصلا زشت میشه.
2) تصاویر رو طوری بزنن که بشه در نمایشگر های بزرگتر هم ازش استفاده کرد.
3) جداول رو کج و کوله نزنن آدم سختشه ریسپانسیو کنه. صاف باشه از لحاظ افقطی و عمودی. حالا لبه هاش گرد بود ایرادی نداره.
4) قالب سنگین نباشه که مجبور شیم توی نسخه ی مبایل برخی عکس ها رو حذف کنیم. که سرعت لودش بره بالا. هستن افرادی که با اینترنت مبایل وارد میشن.
5) یا برخی افراد به جای اینکه قالب بسازن چیزی میسازن که بیشتر شبیه پوستر هست تا قالب.
فعلاً همینا یادم بود بگم.
نظرتون رو بگید.

[سعید کشاورز]

از چی بگم برات انتظار داری چه چیزی از جیب من در آد:لبخند:
ببین همه اینایی که گفتی درسته
اون کسی که قالب PSD میزنه باید یه دانش فنی توی زمینه HTML و CSS داشته باشه
نکته اول که بسیار مهم هست گرید بندی سایته
الان اکثر افراد برای ریسپانسیو از بوت استرپ استفاده میکنن
پس طراح PSD باید سایز گرید های بوت استرپ رو داشته باشه
مثلا سایز container توی حالت ماکسیمم 1140 پیکسل هستش
در رابطه با اون قضیه عکس که میگین 100% درنظر میگیرن باهاتون مخالفم
میدونی چرا؟ چون شما باید بتونید اون رو کنترل بکنید.فقط باید به کاربر بگین عکس هارو حداقل با طول 1200بزنن
حالا اینجا شما باید یه دستور بزنی که این عکس min-wdith:100% باشه
حالا دیگه مشکل نداری..خودش توی هر سایزی حداقل سایز عکس رو 100% میکنه و کل مرورگر رو پوشش میده
الان اکثر اسلایدرهای وب سایت ها حالت Full Widht یا تمام صفحه رو دارن به نظرم زیبایی رو دو چندان میکنه
در رابطه با اینکه بعضیا میاد از تصاویر ناجور و سنگین استفاده میکنن(به قول شما پوستر) شما باید اونارو آگاه کنید که آقاجون اینا سنگینه و سخت میشه ریسپانسیو کرد
اگر متقاعد نشدن شما بگو اوکی من این رو ریسپانسیو میکنم اما زمان بیشتری از من میگیره منم پول بیشتری از شما میگیرم..توی 99% مشتری ها جواب میده و منصرف میشن
یادت باشه وقت شما گرانبهاترین چیزه..
شما میخای چقدر بابت تبدیل اون PSD به HTML بگیری که بخوای این همه حرص بخوری واسه ریسپانسیوش؟ به نظرت ارزش داره؟ پس بهتره بیخیال بشی و قید اون پروژه رو بزنی
بس بود یا بازم بگم؟ :لبخند:

[ravand]

از چی بگم برات انتظار داری چه چیزی از جیب من در آد:لبخند:
ببین همه اینایی که گفتی درسته
اون کسی که قالب PSD میزنه باید یه دانش فنی توی زمینه HTML و CSS داشته باشه
نکته اول که بسیار مهم هست گرید بندی سایته
الان اکثر افراد برای ریسپانسیو از بوت استرپ استفاده میکنن
پس طراح PSD باید سایز گرید های بوت استرپ رو داشته باشه
مثلا سایز container توی حالت ماکسیمم 1140 پیکسل هستش
در رابطه با اون قضیه عکس که میگین 100% درنظر میگیرن باهاتون مخالفم
میدونی چرا؟ چون شما باید بتونید اون رو کنترل بکنید.فقط باید به کاربر بگین عکس هارو حداقل با طول 1200بزنن
حالا اینجا شما باید یه دستور بزنی که این عکس min-wdith:100% باشه
حالا دیگه مشکل نداری..خودش توی هر سایزی حداقل سایز عکس رو 100% میکنه و کل مرورگر رو پوشش میده
الان اکثر اسلایدرهای وب سایت ها حالت Full Widht یا تمام صفحه رو دارن به نظرم زیبایی رو دو چندان میکنه
در رابطه با اینکه بعضیا میاد از تصاویر ناجور و سنگین استفاده میکنن(به قول شما پوستر) شما باید اونارو آگاه کنید که آقاجون اینا سنگینه و سخت میشه ریسپانسیو کرد
اگر متقاعد نشدن شما بگو اوکی من این رو ریسپانسیو میکنم اما زمان بیشتری از من میگیره منم پول بیشتری از شما میگیرم..توی 99% مشتری ها جواب میده و منصرف میشن
یادت باشه وقت شما گرانبهاترین چیزه..
شما میخای چقدر بابت تبدیل اون PSD به HTML بگیری که بخوای این همه حرص بخوری واسه ریسپانسیوش؟ به نظرت ارزش داره؟ پس بهتره بیخیال بشی و قید اون پروژه رو بزنی
بس بود یا بازم بگم؟ :لبخند:
اگه عرض عکس صد در صد باشه که توی نمایشگر های بزرگتر کشیده میشه؟ حالا به این فکر کن که نمایشگر عرض 1900 پیکسل یا بزرگتره چی میشه؟ تصور بکن. حالا میگیم ارتفاعش هم همزمان با عرض بزرگ بشه. خب خیلی از صفحه رو اشغال میکنه و حالت زشتی به خودش میگیره.
ریسپانسیو به این معنی نیست که قالب در همه ی نمایشگر ها یک اندازه نمایش داده بشه. بلکه به این معنی هست که در همه ی نمایشگر ها درست نمایش داده بشه.

[سعید کشاورز]

اگه عرض عکس صد در صد باشه که توی نمایشگر های بزرگتر کشیده میشه؟ حالا به این فکر کن که نمایشگر عرض 1900 پیکسل یا بزرگتره چی میشه؟ تصور بکن

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



حالا میگیم ارتفاعش هم همزمان با عرض بزرگ بشه. خب خیلی از صفحه رو اشغال میکنه

زمانی که مانیتوری رزولیشن بالایی داره صرفا این نیست که فقط width اون مانیتور زیاد باشه..ارتفاعش هم زیاد میشه.مثلا الان توی اکثر لپ تاپها اینه 1366*768
یعنی شما 768 پیکسل ارتفاع داری
اما وقتی مانیتور HD باشه اونوقت شما ارتفاعتون مثلا میشه 1200 پیکسل.
پس وقتی عکس ارتفاعش بزرگ بشه شما نباید نگران باشی چون صفحه کاربر ارتفاعش زیاده و اون عکس نمیاد از نظر ارتفاع کل صفحه رو توی یک نگاه بپوشونه
خیلیا میاد میگن من دوست دارم وقتی سایت باز میشه کاربر توی نگاه اول هم اسلایدر رو ببینه هم اخبار زیرش رو
خوب اینجا اگه اسلاید تمام صفحه باشه ممکنه ارتفاع اسلایدر زیاد بشه و تمام خبرهای زیرش معلوم نشه..اینجا دیگه چاره ای نیست و حق با شماس.
ولی اگه اسکرول صفحه از نظر ارتفاع(دید در نگاه اول) برای شما مهم نیست پس نباید نگران این قضیه باشی
الان من یکی از قالب هایی رو که تازه زدم رو بهت نشون میدم
http://www.d2diranian.com/default.aspx
اینجارو ببین اسلایدرش تمام صفحس
توی هر رزولیشنی هم باز کنی بازم بهم نمیریزه و به درستی و بدون دِ فرمه شدن نمایش داده میشه





ریسپانسیو به این معنی نیست که قالب در همه ی نمایشگر ها یک اندازه نمایش داده بشه. بلکه به این معنی هست که در همه ی نمایشگر ها درست نمایش داده بشه.
الان شما این قالبی رو که بهتون نشون دادم مشکلی میبینید توی رزولیشن های مختلف؟
این قالبی که نشون دادم تقریبا تمام حرفهای شما رو توی پست اول پوشش میده همه مواردی که گفتی توش به کار رفته مثل اسلایدر تمام صفحه و نوار با ارتفاع 30 پیکسل ( البته اینجا بیشتره) و...

[ravand]

آخرین اندازه برای یه نمایشگر چقدره؟ من نظرم این بود که وقتی میره توی نمایشگر های بزرگتر کیفیت عکس میاد پایین. ولی خب قالب شما رو دیدم که عکس کیفیتش در نمایشگر بزرگتر از دست نمیداد. همینطوری که گفتید عرض 1200 پیکسل.
عکسی که ساختید چطوری ساختید؟ توی فتوشاپ save for web؟
و دیگه اینکه شما اون نوار قرمز رو مناسب استفاده کردی. زیرش یه نوار سیاه هست و دوباره زیرش یه اسلاید شو هست پس قیافه اش در نمایشگر بزرگتر بد نمیشه. مثلا یکی میاد یه نوار برای منوی سایتش انتخاب میکنه و این نوار را صد در صد میزنه و بقیه را مثلا صد در صد نمیزنه.خب مسلما جالب نیست. ولی اگه بیاد ارتفاع اون نوار رو بیشتر کنه قیافه اش بهتر میشه.

[سعید کشاورز]

آخرین اندازه برای یه نمایشگر چقدره؟ من نظرم این بود که وقتی میره توی نمایشگر های بزرگتر کیفیت عکس میاد پایین. ولی خب قالب شما رو دیدم که عکس کیفیتش در نمایشگر بزرگتر از دست نمیداد. همینطوری که گفتید عرض 1200 پیکسل.
عکسی که ساختید چطوری ساختید؟ توی فتوشاپ save for web؟
و دیگه اینکه شما اون نوار قرمز رو مناسب استفاده کردی. زیرش یه نوار سیاه هست و دوباره زیرش یه اسلاید شو هست پس قیافه اش در نمایشگر بزرگتر بد نمیشه. مثلا یکی میاد یه نوار برای منوی سایتش انتخاب میکنه و این نوار را صد در صد میزنه و بقیه را مثلا صد در صد نمیزنه.خب مسلما جالب نیست. ولی اگه بیاد ارتفاع اون نوار رو بیشتر کنه قیافه اش بهتر میشه.
آخرین اندازه برای نمایشگر رو دقیق نمیدونم ولی شما 5000 در نظر بگیر دیگه فکر نکنم بیشتر از این باشه
من توی فتوشاپ 1200 میزنم که زیاد حجم عکس بالا نره
در رابطه با ذخیره کردن هم save for web میکنم که حجمش نهایت 150 کیلوبایت میشه
در رابطه با زیبایی هم باید بگم خوب مسلما یه سری حرکات ریز و تیز:لبخند: باعث میشه قالب زیبا تر به نظر بیاد..
یه سایت زمانی زیبا به نظر میاد که همه المان ها با رنگ بندی و سایز بندی مناسب کنار هم چیده بشن
شما زیاد درگیر این نباش که طراح PSD چی بهت میده
پولتو بگیر و تبدیل کن
آخرشم بگو سلیقه خودت بوده
ولی اول کار میتونی بهش بگی آقا جون این طرحی که زدی استاندارد نیست و بی ریخت میشه دیگه خود دانی
اینجوری اولش بهش هشدار دادی و آخرش اگه غر غر کرد بگو من که اولش بهت گفتم
برای محکم کاری هم میتونی ازش امضاء بگیری که اگه طرحت HTML بشه بد ریخت میشه

[ravand]

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