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

GFX Master

مدیر انجمن گرافیک دو بعدی ومسئول فروشگاه
به نظر منم به عنوان کار اول خوبه منتها خوب ایراداتی هم داره که من چند تاشو میگم:

1) منحنی گوشه و بالای صفحه رو خوب درنیاوردی

2) فضای مرده و خالی در کارت زیاد دیده میشه بخصوص در داخل منحنی که بعنوان Navigation Bar در نظر گرفتی

3) Header قالبت خیلی خیلی شلوغه. اینو یادت باشه که همیشه کارای خلوت بهتر و بیشتر میتونن مفهوم خودشون رو برسونن

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

موفقیت باشی!
 

sadismi_10

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

GFX Master

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

Sadismi عزیز (من متاسفانه اسمتم نمیدونم!) برای نوشتن متنها باید به این صورت عمل کنی:
اول باید قالبی رو که درست کردی رو اسلایس بندی کنی و بصورت قطعه قطعه ذخیره کنی (که بچه ها تو صفحات قبل توضیح دادن درباره این کار) بعد باید این قطعات رو ذخیره کنی و داخل برنامه ویرایش سایتت که میتونه یکی از برنامه های فرانت پیج یا دریم ویور یا ... باشه بوسیله ایجاد table و قرار دادن این تصاویر به عنوان بک گراند این table ها قالبت رو داخل این برنامه ها منتقل کنی و در اخر هم متنت رو داخل این table ها بنویسی. اینطوری میتونی مطمئن باشی که متنت از داخل قالب بیرون نمیزنه و درون همین table ها و در مجدوده تعیین شده نوشته میشه.

موفقیت باشی!
 

sadismi_10

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

sadismi_10

Member
در ضمن وقتی قالب رو طراحی کردیم و خواستیم مطلب زیاد توش بذاریم چی؟
با توجه به این که قسمت افقی رو 430 در نظر بگیریم
 

sadismi_10

Member
طرح جدید

اینم یه طرح از من که البته یه مقدار عجله ای شد
 

پیوست ها

  • soroush.jpg
    soroush.jpg
    85.5 کیلوبایت · بازدیدها: 87

GFX Master

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

mohsenshahab

Active Member
sadismi_10 گفت:
در ضمن وقتی قالب رو طراحی کردیم و خواستیم مطلب زیاد توش بذاریم چی؟
با توجه به این که قسمت افقی رو 430 در نظر بگیریم

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

logical_82

Member
محسن جان ببینید منم این مشکل رو داشتم و واسه حلش هم نتونستم سوالم رو مثل شما خوب بیان کنم و مجبور شدم خودم حلش کنم .
(تعیین تیبل Percent برای کل کار و تعیین تیبل های Pixel برای داخل کار)واسه حل این مشکل شما اول طرح اسلایس شده رو قبل از هر کاری تو مثلا فرانت پیج باز کن و بعد تو قسمت Normal همه رو انتخاب کن (CTRL+A) و همه رو CUT کن . خوب صفحه خالی می شه حالا یه تیبل کلی بساز . تو این مرحله اندازه اصلا مهم نیست چرا که این تیبل نباید با مقیاس پیکسل اندازه زده بشه . بعد داخل این تیبل Paste کن قالبت رو .
اینم عکسها به ترتیب (با توجه به متن)
مرحله 1 (بارگزاری قالب Slice شده)


مرحله 2 (CUT کردن قالب Slice شده)
2.jpg


مرحله 3 (ایجاد Table برای اعمال به اصطلاح No-Wrap - به نقاط معین شده توجه بفرمایید)
3.jpg


مرحله 4 (وسط چین کردن طرح)
4.jpg


دوستان ببخشید اگه بازم مجبور شدم آموزش رو کمی با آموزش Frontpage قاطی کنم .
 
آخرین ویرایش:

logical_82

Member
سارا خانم ببخشید . اما این چیزی که شما می گید کمی اشتباهه (با عرض معذرت) چرا که بحث بسیار پیچیده ای با عنوان Wrap هستش که واسه قالب هایی که برای وبلاگ ها و یا در کل کارهای داینامیک استفاده می شه بسیار بسیار اساسی هستش .
ببینید اگه شما از این امر استفاده نکنید متن شما اگه بیشتر از اندازه معمول باشه و در واقع دنباله دار باشه امکان بهم ریختن طرح بصورت افقی زیاده و همچنین اگه متن شما عمودی هم زیاد تر باشه باز هم طرح بهم می ریزه و این هم بستگی به تنظیمات بک گراند تیبلهاتون داره که شما چطور بکار گرفته باشید.
ببینید بحث کلی این تاپیک شاید پیرامون طراحی صفحات وب توسط فتوشاپ باشه اما این تمام بحث نیست چراکه کار به همین جا ختم نمی شه و شما در واقع بعد خروجی گرفتن از Image ready در واقع شاید نصف کمتر کار رو انجام داده باشید (نظر شخصی) و در ادامه باید روی کدنویسی اون هم کار بشه .
و همین امر باعث می شه که من هم گهگاهی مجبور بشم تو همین تاپیک کمی از فرانت پیج هم بگم .
خوب من یه آموزش کوچیک راجع به Wrap نوشتم که مطمئننا بکارتون می یاد .
 

mostafa_az

Well-Known Member
خوب . نوبتی هم که باشه نوبت ماست . میخوام یه نکته ای رو راجع به save for web بگم . البته شاید گفته شده باشه اما من چون متنارو گذری نگاه کردم متوجه نشدم که گفتین یا نه .
خوب . همینطور که تو آموزشهای استفاده از نحوه save کردن فایل ها برای وب یا اصطلاحا همون save for web فهمیدین این ابزار عموما برای کاهش حجم عکسا استفاده میشه . حتما میدونین یا اگرم نمیدونین میفهمین که همیشه در save for web عکسهایی رو با فرمت gif سیو میکنن که دارای طیف رنگی کمتری هستن و عکسهایی که دارای شلوغی رنگ هستن رو با jpg ذخیره میکنن .
برای مثال شما هیچ وقت نباید یه گرادینت رو با فرمت gif ذخیره کنین . چرا ؟ چون خودتون برین امتحان کنین تا ببینین ابزار save for web برای کم کردن حجم اون چی شکلیش میکنه .
البته توی پرانتز فرمت png هم هست که تنها برای ذخیره تصاویری به کار میره که در اونها طرح از شفافیت برخوردار هستش و تلاش بر اینه که با کم شدن حجم شافیت هم حفظ بشه .
هیشه افراد برای اینکه فزق این دو رو نمیدونن دست به مقایسه می زنن . یعنی با هر دو فرمت فایلشون رو سیو میکنن بعد با هم مقایسه میکنن ببینن کدوم یکی حجم کمتری داره . اما تا بحال به این هم دقت کردن که کدوم یکی کیفیت بیشتری داره ؟ اختلاف تقریبا 4 - 5 کیلوبایتی در عکس ممکنه باعث بشه عکس کم حجم تر رو انتخاب کنین اما این در صورتی خوبه که دو فرمت تفاوت کیفیت کمتری با هم داشته باشم .
همیشه طرحهایی رو که میخوایم با فرمت gif سیو کینم باید دارای طیف رنگی کمتری باشن . به عبارت دیگه توی پنجره سمت راست ابزار save for web رنگ ها تقریبا به صورت زیر دیده بشن :

1.gif


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

2.gif


توی این عکس هم رنگ ها محدود هستن اما اگه به تصویر نگاه کنین میبینین چون کار من دارای یه حالت گرادینتی روی قسمت های بنفش ( بادمجونی ) بوده کیفیت عکس رو کم کرده . پس بهتره با jpg سیو داشته باشم .
حالا عکس زیر رو ببینین :

3.gif


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

خوب ، تمام اینها مقمده ای بود برای اینکه بفهمیم با فرمت ذخیره صفحاتمون چیکار کنیم . باید همرو gif سیو کنیم یا jpg ؟ جواب اینجاست که هردو . نکته ای که بیشتریا هنگام save for web متوجه اون نمی شن امکان انتخاب اسلایس ها در همین پنجره است . به طور کلی شما وقتی که میخواین اسلایس های صفحتون رو با ابزار save for web ذخیره کنین میتونین این انتخاب رو داشته باشین که هر کدام از اسلایس ها با چه فرمتی ذخیره بشه . ابزار زیر که از منوی سمت چپ پنجره save for web قابل انتخاب هست برای انتخاب اسایس هاتون به کار میره :

4.gif


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

5.gif


در عکس های زیر مناطقی رو که با فرمت gif سیو کردم رو نشون دادم . طیف رنگی اونها رو ببینین :

6.gif


عکس بالا مربوط میشه به طیف اسلایس شماره 4 که طیف رنگی اسلایس های شماره 3 و 5 و 6 هم چون به همین ترتیب هست یک عکس گذاشتم .
عکس زیر هم مربوط میشه به اسلایس شماره 2 که اونم با توجه به پالت رنگش gif سیو کردم :

7.gif

ٌ
حالا میرسیم به اسلایس بعدی . یعنی اسلایس شماره 1 من . عکس زیر رو ببینین :

8.gif


توی این عکس من میبینم که از رنگهای متنوع استفاده شده اما وقتی دقت میکنم میبینم باز هم تقریبا دارای یک طیف هستیم . من در اینجا ترجیح میدم عکسم رو با فرمت jpg ذخیره کنم . چرا ؟ چونکه وقتی پالتم تنوع رنگ داره متوجه میشم که توی عکس از رنگهای مختلفی استفاده شده . اگه من الان عکسم رو با فرمت gif سیو کنم به علت اینکه رنگ های غیر از رنگ خاکستریم کم هستن دچار افت کیفیت نمیشم اما سایز عکسم نسبت به حالت jpg خودش دارای سایز بیشتری میشه . ضمن اینکه توی فرمت jpg هم با همین کیفیت مواجه میشم .
آهان راستی تا یادم نرفته اینو هم بگم که توی فرمت jpg شما میتونین از منوهای سمت چپ در قسمت Quality درصدی رو برای کیفیت عکستون در نظر بگیرین . معمول این درصد برای اینکه توی save for web نتیجه بهتری روی عکسای jpg بگیرین 60 هستش اما من خودم که امتحان کردم با 40 درصد هم زیاد به مشکلی بر نخوردم . یعنی در مواقعی که نیاز به کاهش حجم پیدا کردم اونو روی 40 درصد هم گذاشتم .

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

مخلصیم
مصطفی
 

sadismi_10

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

sadismi_10

Member
در ضمن
سایز مناسب برای طراحی رو چند در نظر بگیریم که اسکرول توش وجود نداشته باشه؟
 

mostafa_az

Well-Known Member
sadismi_10 گفت:
در ضمن
سایز مناسب برای طراحی رو چند در نظر بگیریم که اسکرول توش وجود نداشته باشه؟

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

مخلصیم
مصطفی
 

GFX Master

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

mostafa_az

Well-Known Member
البته سارا در اسلایس مشکل ساز هست اما برای قرار دادن در table ها میشه کل اونها رو با یه پترن 1 پیکسلی ایجاد کرد که حجمش به 1 کیلوبایت هم نمیرسه . اما اگه از نظر اسلایس و برش های خود فتوشاپ حساب کنی آره . حتما مطمئنا باعث بالا رفتن حجم صفحه میشه .

مخلصیم
مصطفی
 

sadismi_10

Member
چرا اینقدر این موضوع کم اهمیت شده.من 3 روز پیش اومدم و به خاطر کار نتونستم بیام.الان میبینم 2 تا پست از اون موقع اومده.دلیلش چیه؟
 

mostafa_az

Well-Known Member
دلیلش اتمام رسیدن مطالب هستش . من چیز دیگه ای به ذهنم نمیرسه که گفته نشده باشه . تنها چیزایی که مونده فکر کنم مراحل انجام کار تو فرونت پیج باشه که اونم اینجا جاش نیست .
دوستان اگه کسی مطلب خاصی داره اعلام کنه وگرنه بریم سر آموزش بعدی ...

مخلصیم
مصطفی
 

جدیدترین ارسال ها

بالا