آموزشهای گروهی: <شماره 4> : کلیات و جزئیات طراحی صفحات وب در فتوشاپ

[GFX Master]

سلام

خوب اینم چهارمین تاپیک آموزشهای گروهی که اینبار با نظر بچه ها موضوع طراحی صفحات وب در فتوشاپ رو انتخاب کردیم.

فکر کنم موضوع خوبی باشه و جای بحث زیادی هم روش باشه. من کلیات موضوعاتی رو که میشه روشون بحث کرد رو میگم تا یواش یواش شروع کنیم:

1) رنگ بندی و نحوه صحیح استفاده از رنگ در طراحی صفحات وب.

2) عناصر و اجزایی که باعث جذابتر و پربیننده تر شدن صفحات میشود.

3) نحوه اسلایس بندی و ذخیره سازی و انتقال به نرم افزار مدیریت صفحات.

4) سایر مسایل.

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

موفق باشید.

 

[NaviD.R.R]

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

 

[GFX Master]

هیچ فرقی نمیکنه این تاپیک بخاطر این اسمش آموزشهای گروهی هست که بچه ها در گذاشتن نمونه کار یا دادن آموزش و ... کاملا آزاد باشن و همگی بتونن اظهارنظر کنن.

پس آقا نوید منتظریم.

 

[GFX Master]

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

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

با انتخاب و اجرای پنجره Color Picker پنجره ای مطابق تصویر بالا بار خواهد شد. حالا با انتخاب و تیک زدن گزینه Only Web Colors تنها رنگهایی که قادر به نمایش و تفکیک در وب هستند نمایش داده میشوند و شما با انتخاب رنگهای موجود در این باکس مطمئنا خواهید بود که تمامی رنگهای استفاده شده در طراحی صفحتون در وب به درستی نمایش داده خواهند شد.

پسوندهایی که عموما در وب مورد استفاده قرار میگیرند و استفاده از آنها معمول است پسوندهایی نظیر Gif، Jpg و Png هستند که البته استفاده از پسوند Gif معمولتره و این بخاطر اینه که این نوع فرمت عکس حجم پایینتری داره و باعث میشه عکس سریعتر لود بشه. البته هر کدوم از این فرمتها در جای خاصی هم باید استفاده بشن که بطور مختصر در زیر جاهاشون رو توضیح میدم:

1) Gif: این فرمت بیشتر برای تصاویر متحرک ساده استفاده میشه که در طراحی این تصاویر باید دقت داشت که تا حد امکان سادگی تصویر و کمتر بودن رنگها هم مدنظر قرار بگیره تا تصاویر بهتر و سریعتر لود بشن.

2) Jpg: این فرمت بیشتر برای تصاویر ثابت و همچنین ذخیره سازی قالبهای صفحات، مورد استفاده قرار میگیره. با تنظیم میزان کیفیت هنگام ذخیره سازی میشه حجم تصویر رو کم یا زیاد کرد.

3) Png: این فرمت هم برای تصاویر ثابت استفاده میشه و تفاوت آن با فرمت Jpg در این است که این فرمت حجم نسبتا کمتری را دربرمیگیرد.

در ضمن مد رنگی مخصوص صفحات وب و طراحیها باید از نوع RGB باشه چرا که این تصاویر فقط در مانیتور نمایش داده خواهند شد.

اینها یک سری اصول مقدماتی رنگ شناسی در طراحی صفحات وب در فتوشاپ بود که به کمک بچه ها بیشتر تکمیلش میکنیم.

موفق باشید.

 

[logical_82]

سارا خانم ممنون !
چیز دیگه هم که تو هنگام استفاده از رنگها باید حتما ملاحظه بشه Mach کردن رنگهاست یعنی رنگها رو خوب ترکیب کنیم و مثلا از رنگ قرمز تو پس زمینه مشکی اگه استفاده بشه خیلی خوشگل می شه .
اندازه کار هم خیلی مهمه !
600 در 800 واسه قالب های وبلاگ و اینگونه کارها بهتر هستن چرا که هم تو رزولوشن 1024 و هم 800 خوب جواب می دن .
(یواش یواش پیشرفته اش کنیم بهتره)

 

[GFX Master]

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

 

[logical_82]

ایشالا که تاپیک خوبی باید باشه اگه از مبتدی به حرفه ای بره البته اگه ایراد نداشته باشی کمی به کدنویسی و این چیزا هم همینجا اشاره کنیم !

 

[mostafa_az]

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

یه طراح وب خوب طراحیه که تمام جوانب طراحیش رو در نظر بگیره . یکی از این جوانب رزولوشن مراجعین هستش . پائینترین سطح رزولوشنی که در حال حاضر مورد استفاده قرار میگیره 800 در 600 پیکسل هستش . طراحی باید طراحیش رو طوری انجام بده که در این حالت رزولوشن هیچگونه مشکلی از نظر اسکرول افقی وجود نداشته باشه .
در رزولوشن 800 در 600 اکسپلورها فضایی که در عرض سایت میتونن نشون بدن 780 پیکسل از کل 800 پیکسل هستش .

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

پس برای اینکار باید نهایت عرض کارتون 778 یا ترجیحا کمتر باشه .
در صفحاتی هم که قراره اسکرول عمودی نداشته باشین حداکثر سایزی که در رزولوشن 800 در 600 نمایش داده میشه 430 پیکسل هستش که اینم میتونین 425 یا 420 بگیرین .

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

مخلصیم
مصطفی

 

[NaviD.R.R]

این قالب رو به سفارش یک شرکت برای سازمان میراث فرهنگی و گردشگری طراحی کردم.
البته این کار جزو اولین قالب هایی بود که طراحی می کردم.
این دو تا عکسی که گذاشتم یکی ماله بخش مدیریت و یکی هم قالب کلی هست که امکان بزرگ شدن عمودی رو هم داره .
کل این قالب رو با Photoshop طراحی کردم و با استفاده از ابزار Slice Tool و نرم افزارهای FronPage , DeamweaverMX
اگه خواستین این قالب رو به صورت Html براتون بزارم.

 

[logical_82]

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

 

[GFX Master]

آقا نوید ممنون بابت نمونه قالبهایی که گذاشتی. حالا که این قالبها رو شما آپ کردی یه چیزی به نظرم رسید که گفتم شاید بد نباشه مطرح کنم.

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

در کل بجز آیکنها و محل قرارگیری اونها بقیه مسایل خیلی خوبن.

موفق باشی

 

[NaviD.R.R]

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

 

[NaviD.R.R]

اینم چند تا قالب دیگه که کامل نیستند !!!

 

[logical_82]

نوید جان Content و Navigation های این سبزه زیاد جالب نیستن و مشکلی هم که هست Smooth خیلی زیادی بهش دادی و یکم زمختش کرده اما Header اش بد نیست ودر واقع همین استفاده از Smooth زیادی تو کار اولیت هم هست .

 

[hamid ir]

تاپیکه خوبیه . امیدوارم مورد استفاده واقع بشه
راستی ساراجان مدیریت تبریک . موفق باشی

 

[logical_82]

یه چیزی هم که هست واسه سایت های زبان فارسی چون RTL می نویسیم بهتره که Navigation ها رو سمت راست بکار ببریم و انگلیسی ها رو برعکس !

 

[GFX Master]

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

اما اونی که واسه موبایل هست خیلی خوب کار شده. اولی هم خوبه.

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

حمید جان از تو هم ممنونم. لطف داری.

موفق باشید.

 

[LordEfazati]

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

 

[NaviD.R.R]

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

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

پس کار اول ما این شد که یک طرح قالب توی Photoshop طراحی کنیم و بعد با ابزار Slice اون رو به قسمتهای مختلف تقسیم کنیم و بعد خروجی برای وب بگیریم و فایل Html رو توی یک ادیتور ادیت کنیم. البته این کلیات این کار بود . این کار جزئیات و نکات خیلی زیادی داره ، چه در زمان طراحی اون تو Photoshop و slice بندی کار چه در زمان خروجی گرفتن و ادیت قالب .
سعی میکنم تا اونجایی که بتونم اطلاعات کمم رو در اختیار دوستان قرار بدم.

 

[Elaborate]

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