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

[GFX Master]

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

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

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

موفق باشید.

 

[logical_82]

چیزی که راجع به کم شدن حجم شاید کمک بزرگی بکنه استفاده از Repeat یک عکس حالا چه بصورت X و یا Z (همون افقی عمودی خودمون) هست و خیلی هم می تونه تو کم کردن حجم کمک کنه .

 

[mostafa_az]

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

مخلصیم
مصطفی

 

[mohsenshahab]

ُسلام
من این چند روزه اصلا نمیتونستم وارد سایت بشم برای همین یه کم دیر رسیدم
یه نکته خیلی کوچولو میگم که فکر کنم اکثرا بلد باشن
شما وقتی که بخواین یه عکس رو در فتوشاپ saveکنین (jpeg) و بعد در صفحات وب از اون استفاده کنین باید بعد از این که به مسیر file/save رفتین عکس رو به صورتی save کنین که عکس با هر یار لود شدن صفحه یکبار اسکن بشه یعنی اینکه وقتی کاربر صفحه رو باز کرد اول عکس رو به صورت شطرنجی میبینه بعد کم کم کیفیت عکس به حالت نرمال میرسه
برای این کار وقتی که خواستین کار ور با پسوند (jpeg) save کنین پنجرهjpeg option باز میشود

baseline:
این گزینه حالت پیش فرض است
basieline optimized
این گزینه رنگهای موجود در فایل را بهینه کرده و فایل کوچکتری ایجاد میکند
progressive
برای کارهای وب این گزینه ضروری است این روش باعث میشود که فایل مورد نظر زودتر از سایر روشهای موجود در مرور گر وب قابل مشاهده باشد به عبارت دیگر با هر مقدار اطلاعاتی که بار گذاری میشود عکس یکبار اسکن میشود

 

[logical_82]

خوب یه چیز کوچولو هم واسه شروع به بحث Slice بگم بد نیست فکر کنم :
خوب البته این بحث بصورت مبتدی هست و فقط فکر کردم واسه شروع خوب باشه .
Divide slice:
طرح رو باز کنید و ابزار Slice رو انتخاب کنید و روی کارتون راست کلیک کنید و Divide slice رو انتخاب کنید:
خوب من Slice عکسم 5 قطعه برای افقی و 5 قطعه برای عمودی دارم.

خوب بعدش هم خودش طرح رو به 25 قطعه تقسیم می کنه:

بعدش Save for web رو از منوی فایل بزنید و ذخیره کنید (Ctrl+Alt+Shift+S)
حال عکستون رو بصورت 25 قطعه کنار هم قرار گرفته و HTML دارید.

 

[mohsenshahab]

ایجاد تصاویر html
برای ایجاد تصاویر (دقت کنید تصایر htmlنه صفحات html)
ابتدا با استفاده از ابزار sliceتصویر را به نواحی مختلف تقسیم میکنیم

برای تقسیم تصویر به نواحی مختلف پس از انتخاب این ابزار ناحیه ای که میخواهیم با این ابزار تقسیم کنیم درگ میکنیم

با این کار ما میتوانیم تصویر را به قسمتهای کو چک تقسیم کنیم همچنین شما میتوانید با انتخاب یکی از قسمتها و فشردنdeleteاون قسمت رو پا ک کنین
اما ما میتونیم برای هر یکی از این قسمتها عملکردی رو تععین کنیم پس در یکی از ناحیه های کشیده شده با استفاده از ابزار slice select دوبار کلیک کنید پنجره slice option باز میشود

در slice type نوع image رو انتخاب کنید
در کادر name یک اسم انتخاب کنیدمثلا محسن (چون خیلی کلاس داره)
در کادر url شما باید ادرس سایتی که میخواهید با کلیک روی اون ناحیه به اون سایت وصل بشه رو بنویسین مثلا http://www.yahoo.com
اگر پنجره اصلی مرورگر(browser(دارای چندین فریم است نام یکی از انها رو در target بنویسید
اگر میخواهید در هنگام جابجایی موس روی قسمت مورد نظر پیغامی در status bar نشان داده شود در کادر massage text اون پیغام رو بنویسید
اگر میخواهید با نگه داشتن موس بر روی ناحیه مورد نظر متنی در زیر اشاره کر ظاهر شود در کادر alt tag اون متن رو بنویسید
حالا ok کنید
حالا برای save کردن کار برای وب به file /save for web بروید و کارتون روsave کنید

 

[mohsenshahab]

همون طور که میدونین برنامه image ready که همراه با برنامه photo shop عرضه میشه برنا مه گرافیکی شرکت adobe برای وب میباشد .ولی الان من نمیدونم که میشه یه کم هم درباره image ready حرف زد یا نه .اگه از نظر مدیرها اشکالی نداره تا به قول روضه خونها یه گریزی هم به image ready بزنیم

 

[logical_82]

چگونه تو قسمت خروجی از فتوشاپ بنویسم :
البت با عرض معذرت اندکی هم آموزش فرانت پیج داره !
خوب فایل خودتون رو Slice کنید و خروجی بگیرید ازش و فایل HTML اش رو با فرانت پیج باز کنید و روی قسمتی که می خواید بنویسید راست کلیک کنید و CellProperties رو بزنید و بعد اندازه عکس رو بهش بدید و آدرس عکس رو بعد از کلیک کردن روی Use background imageکلیک کنید و بعد هم عکستون رو Browse کنید . خوب بعد عکسی که مانع از نوشتن می شه رو پاک کنید چون دیگه نیازی بهش نیست و عکس بک گراند کارش رو انجام می ده !حالا می تونید تو اون قسمت بنویسید البته کارها ی دیگری هم باید بکنید که وقتی متن زیاد می شه مشکل ایجاد نشه اما کم کم اونارم می گیم

 

[mexo]

واقعا دستتون درد نكنه اين تاپيك فوق العادس

 

[GFX Master]

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

موفق باشی.

 

[mostafa_az]

ایول امیر عالی بود .

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

مخلصیم
مصطفی

 

[logical_82]

خوب دوستان عزیز بیایید با Repead کمی بیشتر آشنا بشیم :
به عکس زیر توجه کنید تا بیشتر متوجه این امر بشید :

خوب حالا به عکس زیر نگاه کنید و به قسمت های مشخص شده کمی دقت کنید :

با کمی دقت می بینید که منطقه 2(زرد رنگ) در واقع همان چیزی است که در منطقه 1(قرمز رنگ) بطور مکرر تکرار شده . خوب اگه ما بخوایم می تونیم از هر دو منطقه 1 و 2 باهم استفاده کنیم ولی بجای استفاده از هر دو می تونیم از یه Repeat ساده استفاده کنیم .

خوب اگه ما بعد از اسلایس بیایم و تو برنامه ای مثل فرانت پیج روی منطقه 1 راست کلیک کنیم و Cell properties رو بزنیم و بعد بک گراند رو قسمت 2 انتخاب کنیم در واقع هم از یک عکس کمتر تو کارمون استفاده کردیم و هم اینکه چون عکس 2 کوچیکتر هست زودتر لود می شه و هم اینکه می تونیم متن هم رو قسمت 2 بیاریم .

البته توجه داشته باشید که بعد از انجام این عمل عکس قبلی منطقه 2 رو پاک کنید.

 

[wahid2003vj]

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

 

[LordEfazati]

میشه یه سایت کامل که با فتوشاپ درست کردید رو واصه دانلود بزارید ؟

 

[logical_82]

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

 

[GFX Master]

در زیر میتونید مراحل کامل ساخت یک قالب سایت رو مشاهده کنید:

1) برای شروع یک سند جدید با ایعاد 800×900 پیکسل ایجاد کنید و دقت کنید که رزلوشن مورد نیاز 72 و مد رنگی لازم RGB خواهد بود. نوع Background رو هم بصورت Transparent انتخاب کنید.

2) در مرحله دوم برای رنگهای Background و Forground دو رنگ با کدهای cccccc و 999999 رو انتخاب کنید و ابزار Gradient رو انتخاب کنید و از بالا به پایین یک گرادیانت ایجاد کنید:

3) در این مرحله قصد داریم در دو سمت چپ و راست صفحه دو حاشیه ایجاد کنیم. برای اینکار ابزار Rectangular Marquee رو انتخاب کنید و یک مستطیل با عرض کم در یکی از دو طرف ایجاد کنید و آنرا با رنگ سفید پر کنید (در یک لایه جدید اینکار رو انجام بدید) و سپس یک کپی از این مستطیل سفید بگیرید و در سمت مقابل قرار بدید. شکل شما در پایان این مرحله باید بصورت زیر باشه:

4) دوباره رنگهایی رو که برای ایجاد ترانسپرنت در مرحله دوم انتخاب کرده بودید رو انتخاب کنید. در این مرحله قصد داریم یک Navigation Bar برای قسمت بالایی سایت ایجاد کنیم. برای اینکار یک لایه جدید ایجاد کنید و اون رو زیر دولایه ای که در مرحله قبل برای حاشیه ها ایجاد کرده بودید قرار بدید و سپس ابزار Rectangular Marquee رو انتخاب کنید و مطابق شکل زیر یک مستطیل ایجاد کنید و سپس با ابزار Gradient یک گرادیانت با همین رنگهایی که انتخاب کردید ایجاد کنید. فقط دقت کنید که اینبار گرادیانت رو عکس مرحله دوم که از بالا به پایین بود اینبار از پایین به بالا ایجاد کنید. مطابق شکل زیر:

5) در مرحله پنجم یک سری افکت برای زیباتر شدن Navigation Bar که در مرحله قبلی ساختیم اعمال میکنیم. برای اینکار روی لایه مربوط به اون دوبار کلیک کنید تا پنجره Layer Style باز بشه. حالا گزینه Bevel & Emboss رو انتخاب کنید و مقادیر اون رو به این صورت تغییر بدید: (دقت کنید که گزینه Use Global Light تیک خورده باشه) Depth = 1 Angel = -90 Size = 0
بقیه مقادیر رو بصورت پیش فرض باقی بذارید. شکل شما باید شبیه شکل زیر باشه:

6) ابزار Line Tool رو انتخاب کنید و رنگ DDDDDD رو برای رنگ خط انتخاب کنید و سپس یک خط بصورت افقی و در بالای Navigation Bar مطابق شمل زیر رسم کنید:

7) حالا ابزار Text رو انتخاب کنید و رنگ 6F6F6F رو برای متن انتخاب کنید و با فونتی دلخواه و سایزی دلخواه مثل شکل زیر متن مورد نظرتون رو که در اینجا بطور پیش فرض من Navigation Bar نوشتم رو بنویسید و متن رو دقیقا در زیر خطی که در مرحله قبل ایجاد کرده بودید قرار بدید بطوریکه دقیقا در وسط صفحه باشه.

8) در مرحله هشتم یک لایه جدید در زیر لایه ای که مستطیل مربوط به Navigation Bar بود ایجاد کنیدو ابزار Rectangular Marequee رو انتخاب کنید و یک مستطیل دیگه با ارتفاعی بیشتر از مستطیل قبلی ایجاد کنید و دوباره ابزار Gradient رو انتخاب کنید و با استفاده از همون دو رنگی که در مراحل قبل استفاه کردیم یک گرادیانت برای مستطیل جدید مثل شکل زیر ایجاد کنید:

9) حالا در این مرحله میخوایم یه سری خطوط برای جداکردن قسمتای مختلف Navigation Bar و نوشتن لینکهامون ایجاد کنیم. بسته به تعداد لینکهایی که میخواید ایجاد کنید باید این فضاها رو طراحی کنید. در این آموزش من 5 خط ایجاد میکنم تا 6 فضا درست بشه ولی شما میتونید بنا به نیازتون این قسمت رو اجرا کنید. برای اینکار ابزار Line رو انتخاب کنید و رنگ دلخواهتون رو انتخاب کنید. سعی کنید رنگتون روشن باشه. و حالا خطی بصورت عمودی مطابق شکل زیر ایجاد کنید و سپس به تعدادی که نیاز دارید از این خط کپی بگیرید و فضاها رو مثل شکل زیر ایجاد کنید. دقت کنید که این فضاها رو یک سایز ایجاد کنید:

10) در این مرحله قصد داریم یک Navigation Bar دیگه البته اینبار بصورت عمودی و برای سمت راست کار ایجاد کنیم. دقت کنید که این مرحله برای سایتهای فارسی زبان باید در سمت راست و برای سایتهایی با زبان غیر فارسی در سمت چپ باشه. برای این کار یک لایه جدید ایجاد کنید و با استفاده از ابزار Rectangular Marquee یک مستطیل عمودی بصورت شکل زیر ایجاد کنید. و با استفاده از رنگ با کد 999999 آنرا پر کنید و سپس با دوبار کلیک بر روی لایه این مستطیل وارد پنجره Layer Style شوید و بخش Bevel & Emboss را انتخاب کنید و تنظیمات آنرا بصورت زیر اجرا کنید:

11) در این مرحله قصد داریم با ایجاد یکسری افکتهای جدید Navigation Bar رو که در مرحله قبلی ساختیم زیباتر کنیم. برای اینکار در یک لایه جدید یک مستطیل با سایزی کمی کوچکتر از مستطیل مرحله قبل و در داخل آن ایجاد کنید و البته دقت داشته باشید که لایه مربوط به مستطیل این مرحله بالای لایه مستطیل مرحله قبلی باشه و این مستطیل رو با رنگ cccccc پر کنید. حالا با دو بار کلیک بر روی لایه مربوط به این مستطیل وارد پنجره Layer Style شوید و تنظیمات رو اینطوری انجام بدید: اول گزینه Bevel & Emboss رو انتخاب کنید و مقدار Depth رو 1 و مقدار Size رو 0 و بقیه رو بحالت پیش فرض بذارید. دوم Inner Shadow رو انتخاب کنید و مقدار Distance رو 0 در نظر بگیرید و Blend Mode رو بر روی Soft Light قرار بدید. شکل نهایی شما در این مرحله بصورت زیر خواهد بود:

12) در این مرحله میخوایم جزئیات مربوط به Navigation Bar عمودی رو طراحی کنیم. برای اینکار یک ابتدا یک لایه بالای دو لایه مربوط به Navigation Bar ایجاد کنید و سپس ابزار Rectangular Marquee رو انتخاب کنید و یک مستطیل نازک در این لایه ایجاد کنید و سپس دو رنگ خاکستری تیره تر از مراحل قبلی انتخاب کنید و با استفاده از ابزار Gradient اون رو پر کنید و سپس با دوبار کلیک روی لایه وارد بخش Layer Style شوید و دقیقا تنظیماتی رو که در مرحله 11 انجام دادید تکرار کنید.
13) حالا یک کپی از مستطیل مرحله قبل بگیرید و کمی پایین تر از مستطیلی که در مرحله قبل ساختید قرار دهید. سپس بین این دو مستطیل متن مورد نظرتون رو تایپ کنید و نوع فونت و سایز و رنگ اون رو بطور دلخواه انتخاب کنید:

14) حالا قصد داریم در پایین این دو مستطیل که در مرحله قبلی ساختیم مکانهایی برای نوشتن لینکهامون طراحی کنیم. برای اینکار ابزار Custom Shape رو انتخاب کنید و یک فلش رو از لیست شکلهای موجود در اون انتخاب کنید و مطابق شکل زیر فلشی رو با رنگ ACABAB ایجاد کنید و سپس در زیر این فلش با استفاده از ابزار Line یک خط مثل شکل زیر ایجاد کنید و رنگ اون رو هم AEAEAE انتخاب کنید. بنا به تعداد مورد نیازتون به این فضاها برای نوشتن متن لینکهاتون از این فلشها و خطوط ایجاد کنید:

15) حالا در این مرحله قصد داریم مراحل ساخت ناحیه اصلی نوشتن متنها رو طراحی کنیم. برای اینکار یه لایه جدید بالای تمام لایه ها ایجاد کنید و با استفاده از ابزار Rectangular Marquee یک مستطیل مطابق شکل زیر در ناحیه خالی وسط قالب ایجاد کنید و سپس با استفاده از ابزار Gradient و انتخاب دو رنگ داخل مستطیل رو پر کنید و سپس با دوبار کلیک بر روی لایه وارد بخش Style Layer شوید و گزینه Stroke رو انتخاب کنید و میزان 1 پیکسل برای Size و انتخاب گزینه Inside برای بخش Position و رنگ مشکی برای نوع رنگ رو انتخاب کنید.

16) حالا در قسمت بالایی این مستطیل متن قصد داریم یک نوار نازک برای نوشتن تیترهامون ایجاد کنیم. برای اینکار یک لایه جدید ایجاد کنید و با استفاده از ابزار Rectangular Marquee یک مستطیل با عرض کم ایجاد کنید و آنرا با رنگ 939393 پرکنید و طبق مرحله قبل یک Stroke با همون تنظیمات مرحله قبل ایجاد کنید. دقت کنید که لایه مربوط به این مرحله رو زیر تمام لایه ها قرار دهید تا لبه های این لایه از دو طرف راست و چپ بیرون نمونه:

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

18) در مرحله آخر هم میتونید کارای تکمیلی رو انجام بدید کارایی مثل اضافه کردن یک مستطیل دیگه برای نوشتن سایر اخبار و همینطور اضافه کردن یک هیدر برای سایت و ...

در زیر تصویر کامل شده این قالب رو میتونید با سایز اصلی یعنی 800×900 پیکسل و در دو رنگ مشاهده کنید. دقت داشته باشید که در این آموزش اصول کلی رو گفتم و شما میتونید با سلیقه خودتون کارای بهتر و پیشرفته تری رو ایجاد کنید. اگر سوالی در مورد هر قسمتی داشتید بپرسید.




موفقیت باشید!

 

[sara_gonjeshk]

این آموزشهای گروهی فوق العاده ان.
دست همتون درد نکنه.

 

[logical_82]

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

این کار دقیقا مثل ساخت Pattern هستش و شما می تونید به سلیقه خودتون این اشکال رو در بیارید و تو بک گراند سایتتون استفاده کنید.

 

[wahid2003vj]

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

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

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

دیدن عکس

 

[logical_82]

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