ساختن يك وب سايت با فتوشاپ

aydeen · Wednesday 19 July 2006, 11:09 AM

درس اول

قدم اول:
در اين سلسله آموزش شما ياد خواهيد گرفت كه چگونه يك وب سايت را در فتوشاپ طراحي كنيد.
در اين آموزش فرض بر اين است كه شما تا حدودي به فتوشاپ آشنايي داشته با لايه ها و ماسك آشنايي داريد.
در انتهاي آموزش شما قادر خواهيد بود كه سايتي به شكل زير داشته باشيد:

قدم دوم:
اجاز دهيد تا كار را آغار كنيم.قبل از هرچيز شما به يك طرح رنگ داشته باشيد. اين يك اشتاه بزرگي است كه رنگها را بطور تصادفي انتخاب كنيد و ببينيد كدام يك به كار شما بيشتر مي نشيند. دو برنامه مورد علاقه من در طراحي ها برنامه color picker و برنامه colourlovers مي باشد. شما همچنين مي توانيد از پالت swatches فتوشاپ بهره جوييد. شما مي توانيد رنگهاي مورد علاقه خود را انتخاب كنيد. من با رنگ آبي تك رنگ كار خواهم كرد كه به حقيقت يكي از رنگهاي مورد استفاده در بسياري از صفحات وب مي باشد.

قدم سوم:
حالا شما رنگ مورد نظر خود را در ذهن داريد. در فتوشاپ يك فايل جديد باز كنيد. اندازه آن بايد 800 در 800 باشد. بر اساس استاندارهاي وب صفحات اينترنتي نبايد بزرگتر از 770 پيكسل عرض داشته باشند چرا كه هنوز بسياري از كاربران از رزولوشن 800 در 600 استفاده ميكنند. اين فايل با عرض 800 پيكسلي را ما به عنوان يك پس زمينه براي صفحه وب خود قرار مي دهيم.

قدم چهارم :
حال كه شما فايل خود را آماده كرده ايد نياز به خطوط راهنما داريد. ( در نظر داشته باشيد اين خطوط راهنما بر اساس سايتي است كه مي خواهيد در انتها داشته باشيد و ما بر اساس شكل فوق اين خطوط را ترسيم ميكنيم.)
اين خطوط به شما كمك مي كنند تا تمام اجزا سايت شما در محل درست خود قرار گرفته باشند.
براي ايجاد خطوط راهنماي جديد كه از اين پس آنها را guide مي ناميم به گزينه View > New Guide مي رويد.در اين منو شما قادر خواهيد بود كه guide هاي افقي يا عمودي داشته باشيد و مقدار آن را نيز از لحاظ كلفتي مشخص كنيد. شما بايد guide هاي افقي در مقادير 15, 25, 175, 185, 215, 225, 700, 710, 775, 785 و guide هاي عمودي در 15, 25, 275, 775, 785 ايجاد كنيد. مطمئن شويد View > Snap و View > Snap To > Guides چك مارك خورده باشند. وقتي شما كار را تمام كرده باشيد شكلي شبيه به شكل زير خواهيد داشت.

قدم پنجم :
خوب من براي هر قسمت اين صفحه وب يك گروه لايه ها تشكيل مي دهم.پيشنهاد مي كنم شما هم براي مرتب بودن كار اين كار را انجام دهيد. يك گروه لايه جديد با نام بكگراند تشكيل دهيد. شما بايد يك لايه جديد تشكيل دهيد و با هر رنگي كه مايل بوديد آن را پر كنيد . اين مهم نيست از چه رنگي استفاده ميكنيد.(من از اين رنگ استفاده كردم 0000FF) چون ما بعدا آن را به گراديانت تغير ميدهيم. به تنظيمات زير رفته و مقادير را انتخاب كنيد.
blending option> Gradiaent Overlay

دقت كنيد دقيقا عمودي باشد تا به مشكل برنخوريد

aydeen · Wednesday 19 July 2006, 11:22 AM

درس دوم

قدم ششم:
حالا وقت آن است كه كانتينر را شروع كنيم. كانتينر لايه اي است كه همه محتواي صفحه وب ما در آن قرار خواهد گرفت. يك لايه جديد با همين نام ايجاد كنيد. ابزار مستطيل لبه گرد (Rounded Rectangle Tool )را انتخاب كنيد. ( با shortcut U ) مقدار شعاع را از منوي بالا هر مقدار كه مايليد مي توانيد اختيار كنيد. هر چه عدد بالاتر باشد قوس بيشتري خواهيد داشت من Radius را برابر 15 انتخاب ميكنم. هر رنگي را كه مايليد صفحه وب شما داشته باشد را انتخاب كنيد. من رنگ سفيد تيره را انتخاب كرده ام. سپس از بيروني ترين خطوط راهنما شروع به ترسيم مستطيل بكنيد. اگر شما همه مراحل قبل را درست انجام داده باشيد به طور اتوماتيك اين مستطيل به خطوط راهنما خواهد چسبيد (snap) مي توانيد از بافتها و فيلترهاي مختلفي روي كار استفاده كنيد تا شكل جالبتري داشته باشيد. اين آموزش به نحوه ساختن اين فيلترها نخواهد پرداخت.( من از فيلتر rough Pastels استفاده كردم با كمي افكت)
من چيزي شبيه به شكل زير تهيه كرده ام.

قدم هفتم:
حال قسمت Header سايت را آماده ميكنيم. يك لايه جديد با همين نام ايجاد كنيد. ابزار مستطيل لبه گرد را دوباره انتخاب كنيد. اين بار شعاع 7 را انتخاب كرده ام. مانند شكل يك مستطيل مي كشيم و افكت inner shadow با مقدار Distance صفر و opicity پايين را به آن ميدهيم فعلا چون رنگ آن مشكي است اين تغييرات شايد ديده نشود. ولي فعلا مهم نيست. رنگ بعدا تغيير ميكند.بايد شكلي شبيه به زير داشته باشيد

مرحله هشتم:
حالا از اين لايه يك كپي تهيه كنيد. سپس با گرفتن كليد Alt و كليك بين دو لايه ( لايه اصلي و لايه كپي شده )‌ يك clipping mask اضافه كنيد. سپس آن را رنگ كنيد . من يك رنگ آبي تيره انتخاب كردم و سپس افكت گراديانت به آن دادم همانطور كه در لايه بكرگراند همچنين كاري را انجام داديد. نتيجه كار چيزي شبيه به شكل زير بايد ساخته باشيد:

قدم نهم:
حالا شما بايد عكسي كه به عنوان نماد كار شما است رو انتخاب كنيد. البته اين عكس نبايد لوگو شما باشه. اگر در زمينه هوستينگ كار مكينيد عكس يك سرور اگر در زمينه وب كار مكيند يه طرح از وب و يا اگر فروشنده چيزي هستيد عكسي از محصولات خودتون مي تونه گزينه مناسبي باشه. من سرستون تخت جمشيد رو انتخاب كردم ( فقط براي قشنگي). اين لايه جديد را بالاي لايه مرحله قبل بگذاريد و آن را به لايه قبلي clip كنيد. (گرفتن alt و كليك بين دو لايه)
بهتره اينجا كار اين clip masking رو هم توضيح بدم. اگر لايه بالايي شما بزرگتر از لايه زيري باشه لايه جديد در اندازه لايه زيري محدود ميشه. براي اينكه بهتر درك كنيد يه لايه كه عرضش از header شما بزرگتره انتخاب كنيد و سپس اونو clip كنيد تا منظورمه كامل بفهمين.
بايد حالا چيزي شبيه به شكل زير داشته باشيد:

aydeen · Wednesday 19 July 2006, 11:25 AM

قدم دهم:
حالا وقت آن رسيده تا لوگو سايت خود و اسم آن را درج كنيد. (تغييراتي جزيي در اين مرحله كار داده شد تا سايت ساخته شده راست به چپ باشد. از جمله تغيير در محل لوگو يا خطوط راهنما. ضمنا عكس كليه مراحل زير در انتها يكجا آورده شده است.

قدم يازدهم:
حالا نوبت به تهيه منو هاست. يك لايه جديد با اين نام تشكيل دهيد. ابزار مستطيل لبه گرد را انتخاب كنيدو بين خطوط راهنما محل منوها را بكشيد. استايلهايي را كه براي header استفاده كرديد مي توانيد براي منوها هم استفاده كنيد.( ابتدا روي لايه كليك راست كنيد گزينه copy style را انتخاب و سپس روي لايه جديد گزينه paste style را انتخاب كنيد)
حالا منوهايي را كه مي خواهيد در سايت داشته باشيد را تايپ كنيد از هر فونتي كه مايل باشيد مي توانيد استفاده كنيد.

قدم دوازدهم:
حالا نوبت به بدنه اصلي سايت رسيده است. لايه جديد به نام body ايجاد كنيد. و بين خطوط راهنما با ابزار مستطيل لبه گرد آن را بكشيد . بهتر است از رنگ سفيد استفاده كنيد تا متون اصلي سايت كه به رنگ مشكي خواهند بود قابل خواندن باشند. بهتر خواهد بود كه از افكت inner & drop shadow هم استفاده كنيد.

aydeen · Wednesday 19 July 2006, 11:27 AM

قدم سيزدهم
صفحه ما قسمت footer را هنوز كم دارد. پس ابتدا را مي سازيم.
يك گروه لايه جديد به نام footer بسازيد. دقيقا مثل همان چيزي كه براي Header ساختيد ولي كوچكتر. ابزارRounded Rectangle Tool را انتخاب كرده و بين خطوط راهنما رسم كنيد. سايه هاي داخلي را از روي لايه قبلي به روي اين لايه نيز انتقال دهيد.از لايه يك كپي تهيه كرده سپس با گرفتن كليد Alt و كليك بين دو لايه ( لايه اصلي و لايه كپي شده )‌ يك clipping mask اضافه كنيد. سپس آن را رنگ كنيد . من يك رنگ آبي تيره انتخاب كردم و سپس افكت گراديانت به آن دادم. دقيقا عين آن كاري كه براي header انجام داده ايد.
سپس جمله كپي رايت خود را اضافه كنيد و در صورت تمايل عكس دلخواه خود را نيز قرار دهيد.حالا بايد چيزي شبيه به شكل زير داشته باشيد.

اكنون وقت آن رسيده تا اين تصوير را براي وب آماده كنيم. شايد آنهايي كه تا حدودي به فتوشاپ آشنايي دارند فكر ميكنن كه الان بايد از slice براي تكه كردن و قرار دادن تصاوير در صفحه وب استفاده كرد. در صورتيكه اگر از اين كار استفاده كنيم حجم صفحه وب بسيار بالا خواهد رفت.
شما بايد در اين مرحله از خصوصيت بك گراند جداول و css در وب استفاده كنيد. يعني به عنوان مثال يك ستون به عرض يك پيكسل از بك گراند انتخاب كنيد و سپس در طراحي وبتان دستور تكرار عمودي به آن بدهيد.تا كل صفحه وب شما را كامل كند.به اين طريق شما بكگراندهايي كاملي داريد كه فقط بايك فايل 1كيلوبايتي ساخته شده است.
براي اينكار كليه لايه ها به غير از بك گراند رامخفي كنيد. يك ستون به ابعاد 1*800 پيكسل از بك گراند انتخاب كنيد. اين قسمت انتخاب شده را در فايل جديدي به نام bg.gif ذخيره كنيد. براي كمترين حجم گزينه File > Save For Web را انتخاب كنيد. دقت كنيد حتما ساختار فايل gif باشد تا بتوانيد از آن در Html و CSS استفاده كنيد.
در مرحله بعد بكگراند را مخفي كنيد و فقط container را اتخاب كنيد. براي داشتن صفحه container كامل سه قسمت آن را لازم داريم. قسمت بالايي قسمت پاييني ( كه قوسها را شامل مي شوند ) و قسمت مياني. بايد توجه داشته باشيد كه الگويي كه ساخته ايد هر چند پيكسل دوباره تكرار شده است و بنابر آن بايد عرض قسمت مياني را انتخاب كنيد. به طور مثال در كار من الگوي مورد نظر هر 10 پيكسل تكرار مي شود. پس من عرض قسمت مياني را 10 پيكسل در نظر ميگيرم.
شما بايد سه فايل در اين قسمت ذخيره كنيد. فايلهايي كه نام و اندازه آنها را در تصوير زير مشاهده مي كنيد

شما همينطور بايد header و footer سايت را جدا كنيد و آنها را با اسامي مناسب ذخيره كنيد.
از اينجا به بعد مربوط به مهارت شما در css و html ميشود
ولي براي كمك شما يك فايل html كمكي در سايت قرار داده ايم كه مي توانيد از آن استفاده كرده و آن را ويرايش كنيد
اين صفحه را ميتوانيد در اين آدرس ببينيد

منبع: parantezbaz

DPS.NET · Monday 26 January 2009, 07:09 PM

دوست عزیز عالی بود .

لطف میکنی ادامه بدی

h14951r · Sunday 31 May 2009, 05:20 PM

با تشکر از زحمات شما .

sazy4sazy · Tuesday 9 June 2009, 03:32 PM

من عكسهارو ندارم !

robina_asali · Sunday 10 January 2010, 01:50 PM

من هم عکسها رو ندارم نمیدونم چرا نمیاد
لطفا راهنمایی کنید

Wednesday 19 July 2006, 11:09 AM	#1
aydeen كاربر عادي تاریخ عضویت: Monday 17 July 2006 نوشته ها: 52 با تشکر: 0 تشکر شده 32 بار 16 پست	ساختن يك وب سايت با فتوشاپ درس اول قدم اول: در اين سلسله آموزش شما ياد خواهيد گرفت كه چگونه يك وب سايت را در فتوشاپ طراحي كنيد. در اين آموزش فرض بر اين است كه شما تا حدودي به فتوشاپ آشنايي داشته با لايه ها و ماسك آشنايي داريد. در انتهاي آموزش شما قادر خواهيد بود كه سايتي به شكل زير داشته باشيد: قدم دوم: اجاز دهيد تا كار را آغار كنيم.قبل از هرچيز شما به يك طرح رنگ داشته باشيد. اين يك اشتاه بزرگي است كه رنگها را بطور تصادفي انتخاب كنيد و ببينيد كدام يك به كار شما بيشتر مي نشيند. دو برنامه مورد علاقه من در طراحي ها برنامه color picker و برنامه colourlovers مي باشد. شما همچنين مي توانيد از پالت swatches فتوشاپ بهره جوييد. شما مي توانيد رنگهاي مورد علاقه خود را انتخاب كنيد. من با رنگ آبي تك رنگ كار خواهم كرد كه به حقيقت يكي از رنگهاي مورد استفاده در بسياري از صفحات وب مي باشد. قدم سوم: حالا شما رنگ مورد نظر خود را در ذهن داريد. در فتوشاپ يك فايل جديد باز كنيد. اندازه آن بايد 800 در 800 باشد. بر اساس استاندارهاي وب صفحات اينترنتي نبايد بزرگتر از 770 پيكسل عرض داشته باشند چرا كه هنوز بسياري از كاربران از رزولوشن 800 در 600 استفاده ميكنند. اين فايل با عرض 800 پيكسلي را ما به عنوان يك پس زمينه براي صفحه وب خود قرار مي دهيم. قدم چهارم : حال كه شما فايل خود را آماده كرده ايد نياز به خطوط راهنما داريد. ( در نظر داشته باشيد اين خطوط راهنما بر اساس سايتي است كه مي خواهيد در انتها داشته باشيد و ما بر اساس شكل فوق اين خطوط را ترسيم ميكنيم.) اين خطوط به شما كمك مي كنند تا تمام اجزا سايت شما در محل درست خود قرار گرفته باشند. براي ايجاد خطوط راهنماي جديد كه از اين پس آنها را guide مي ناميم به گزينه View > New Guide مي رويد.در اين منو شما قادر خواهيد بود كه guide هاي افقي يا عمودي داشته باشيد و مقدار آن را نيز از لحاظ كلفتي مشخص كنيد. شما بايد guide هاي افقي در مقادير 15, 25, 175, 185, 215, 225, 700, 710, 775, 785 و guide هاي عمودي در 15, 25, 275, 775, 785 ايجاد كنيد. مطمئن شويد View > Snap و View > Snap To > Guides چك مارك خورده باشند. وقتي شما كار را تمام كرده باشيد شكلي شبيه به شكل زير خواهيد داشت. قدم پنجم : خوب من براي هر قسمت اين صفحه وب يك گروه لايه ها تشكيل مي دهم.پيشنهاد مي كنم شما هم براي مرتب بودن كار اين كار را انجام دهيد. يك گروه لايه جديد با نام بكگراند تشكيل دهيد. شما بايد يك لايه جديد تشكيل دهيد و با هر رنگي كه مايل بوديد آن را پر كنيد . اين مهم نيست از چه رنگي استفاده ميكنيد.(من از اين رنگ استفاده كردم 0000FF) چون ما بعدا آن را به گراديانت تغير ميدهيم. به تنظيمات زير رفته و مقادير را انتخاب كنيد. blending option> Gradiaent Overlay دقت كنيد دقيقا عمودي باشد تا به مشكل برنخوريد

Monday 26 January 2009, 07:09 PM	#5
DPS.NET كاربر عادي تاریخ عضویت: Friday 14 November 2008 نوشته ها: 15 با تشکر: 1 تشکر شده 1 بار 1 پست	دوست عزیز عالی بود . لطف میکنی ادامه بدی __________________

Sunday 10 January 2010, 01:50 PM	#8
robina_asali كاربر عادي تاریخ عضویت: Monday 1 June 2009 نوشته ها: 39 با تشکر: 24 تشکر شده 2 بار 2 پست	من هم عکسها رو ندارم نمیدونم چرا نمیاد لطفا راهنمایی کنید __________________ دوست دارم پیشرفت کنم

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

Wednesday 19 July 2006, 11:22 AM	#2
aydeen كاربر عادي تاریخ عضویت: Monday 17 July 2006 نوشته ها: 52 با تشکر: 0 تشکر شده 32 بار 16 پست	درس دوم قدم ششم: حالا وقت آن است كه كانتينر را شروع كنيم. كانتينر لايه اي است كه همه محتواي صفحه وب ما در آن قرار خواهد گرفت. يك لايه جديد با همين نام ايجاد كنيد. ابزار مستطيل لبه گرد (Rounded Rectangle Tool )را انتخاب كنيد. ( با shortcut U ) مقدار شعاع را از منوي بالا هر مقدار كه مايليد مي توانيد اختيار كنيد. هر چه عدد بالاتر باشد قوس بيشتري خواهيد داشت من Radius را برابر 15 انتخاب ميكنم. هر رنگي را كه مايليد صفحه وب شما داشته باشد را انتخاب كنيد. من رنگ سفيد تيره را انتخاب كرده ام. سپس از بيروني ترين خطوط راهنما شروع به ترسيم مستطيل بكنيد. اگر شما همه مراحل قبل را درست انجام داده باشيد به طور اتوماتيك اين مستطيل به خطوط راهنما خواهد چسبيد (snap) مي توانيد از بافتها و فيلترهاي مختلفي روي كار استفاده كنيد تا شكل جالبتري داشته باشيد. اين آموزش به نحوه ساختن اين فيلترها نخواهد پرداخت.( من از فيلتر rough Pastels استفاده كردم با كمي افكت) من چيزي شبيه به شكل زير تهيه كرده ام. قدم هفتم: حال قسمت Header سايت را آماده ميكنيم. يك لايه جديد با همين نام ايجاد كنيد. ابزار مستطيل لبه گرد را دوباره انتخاب كنيد. اين بار شعاع 7 را انتخاب كرده ام. مانند شكل يك مستطيل مي كشيم و افكت inner shadow با مقدار Distance صفر و opicity پايين را به آن ميدهيم فعلا چون رنگ آن مشكي است اين تغييرات شايد ديده نشود. ولي فعلا مهم نيست. رنگ بعدا تغيير ميكند.بايد شكلي شبيه به زير داشته باشيد مرحله هشتم: حالا از اين لايه يك كپي تهيه كنيد. سپس با گرفتن كليد Alt و كليك بين دو لايه ( لايه اصلي و لايه كپي شده )‌ يك clipping mask اضافه كنيد. سپس آن را رنگ كنيد . من يك رنگ آبي تيره انتخاب كردم و سپس افكت گراديانت به آن دادم همانطور كه در لايه بكرگراند همچنين كاري را انجام داديد. نتيجه كار چيزي شبيه به شكل زير بايد ساخته باشيد: قدم نهم: حالا شما بايد عكسي كه به عنوان نماد كار شما است رو انتخاب كنيد. البته اين عكس نبايد لوگو شما باشه. اگر در زمينه هوستينگ كار مكينيد عكس يك سرور اگر در زمينه وب كار مكيند يه طرح از وب و يا اگر فروشنده چيزي هستيد عكسي از محصولات خودتون مي تونه گزينه مناسبي باشه. من سرستون تخت جمشيد رو انتخاب كردم ( فقط براي قشنگي). اين لايه جديد را بالاي لايه مرحله قبل بگذاريد و آن را به لايه قبلي clip كنيد. (گرفتن alt و كليك بين دو لايه) بهتره اينجا كار اين clip masking رو هم توضيح بدم. اگر لايه بالايي شما بزرگتر از لايه زيري باشه لايه جديد در اندازه لايه زيري محدود ميشه. براي اينكه بهتر درك كنيد يه لايه كه عرضش از header شما بزرگتره انتخاب كنيد و سپس اونو clip كنيد تا منظورمه كامل بفهمين. بايد حالا چيزي شبيه به شكل زير داشته باشيد:

Wednesday 19 July 2006, 11:25 AM	#3
aydeen كاربر عادي تاریخ عضویت: Monday 17 July 2006 نوشته ها: 52 با تشکر: 0 تشکر شده 32 بار 16 پست	قدم دهم: حالا وقت آن رسيده تا لوگو سايت خود و اسم آن را درج كنيد. (تغييراتي جزيي در اين مرحله كار داده شد تا سايت ساخته شده راست به چپ باشد. از جمله تغيير در محل لوگو يا خطوط راهنما. ضمنا عكس كليه مراحل زير در انتها يكجا آورده شده است. قدم يازدهم: حالا نوبت به تهيه منو هاست. يك لايه جديد با اين نام تشكيل دهيد. ابزار مستطيل لبه گرد را انتخاب كنيدو بين خطوط راهنما محل منوها را بكشيد. استايلهايي را كه براي header استفاده كرديد مي توانيد براي منوها هم استفاده كنيد.( ابتدا روي لايه كليك راست كنيد گزينه copy style را انتخاب و سپس روي لايه جديد گزينه paste style را انتخاب كنيد) حالا منوهايي را كه مي خواهيد در سايت داشته باشيد را تايپ كنيد از هر فونتي كه مايل باشيد مي توانيد استفاده كنيد. قدم دوازدهم: حالا نوبت به بدنه اصلي سايت رسيده است. لايه جديد به نام body ايجاد كنيد. و بين خطوط راهنما با ابزار مستطيل لبه گرد آن را بكشيد . بهتر است از رنگ سفيد استفاده كنيد تا متون اصلي سايت كه به رنگ مشكي خواهند بود قابل خواندن باشند. بهتر خواهد بود كه از افكت inner & drop shadow هم استفاده كنيد.

Wednesday 19 July 2006, 11:27 AM	#4
aydeen كاربر عادي تاریخ عضویت: Monday 17 July 2006 نوشته ها: 52 با تشکر: 0 تشکر شده 32 بار 16 پست	قدم سيزدهم صفحه ما قسمت footer را هنوز كم دارد. پس ابتدا را مي سازيم. يك گروه لايه جديد به نام footer بسازيد. دقيقا مثل همان چيزي كه براي Header ساختيد ولي كوچكتر. ابزارRounded Rectangle Tool را انتخاب كرده و بين خطوط راهنما رسم كنيد. سايه هاي داخلي را از روي لايه قبلي به روي اين لايه نيز انتقال دهيد.از لايه يك كپي تهيه كرده سپس با گرفتن كليد Alt و كليك بين دو لايه ( لايه اصلي و لايه كپي شده )‌ يك clipping mask اضافه كنيد. سپس آن را رنگ كنيد . من يك رنگ آبي تيره انتخاب كردم و سپس افكت گراديانت به آن دادم. دقيقا عين آن كاري كه براي header انجام داده ايد. سپس جمله كپي رايت خود را اضافه كنيد و در صورت تمايل عكس دلخواه خود را نيز قرار دهيد.حالا بايد چيزي شبيه به شكل زير داشته باشيد. اكنون وقت آن رسيده تا اين تصوير را براي وب آماده كنيم. شايد آنهايي كه تا حدودي به فتوشاپ آشنايي دارند فكر ميكنن كه الان بايد از slice براي تكه كردن و قرار دادن تصاوير در صفحه وب استفاده كرد. در صورتيكه اگر از اين كار استفاده كنيم حجم صفحه وب بسيار بالا خواهد رفت. شما بايد در اين مرحله از خصوصيت بك گراند جداول و css در وب استفاده كنيد. يعني به عنوان مثال يك ستون به عرض يك پيكسل از بك گراند انتخاب كنيد و سپس در طراحي وبتان دستور تكرار عمودي به آن بدهيد.تا كل صفحه وب شما را كامل كند.به اين طريق شما بكگراندهايي كاملي داريد كه فقط بايك فايل 1كيلوبايتي ساخته شده است. براي اينكار كليه لايه ها به غير از بك گراند رامخفي كنيد. يك ستون به ابعاد 1*800 پيكسل از بك گراند انتخاب كنيد. اين قسمت انتخاب شده را در فايل جديدي به نام bg.gif ذخيره كنيد. براي كمترين حجم گزينه File > Save For Web را انتخاب كنيد. دقت كنيد حتما ساختار فايل gif باشد تا بتوانيد از آن در Html و CSS استفاده كنيد. در مرحله بعد بكگراند را مخفي كنيد و فقط container را اتخاب كنيد. براي داشتن صفحه container كامل سه قسمت آن را لازم داريم. قسمت بالايي قسمت پاييني ( كه قوسها را شامل مي شوند ) و قسمت مياني. بايد توجه داشته باشيد كه الگويي كه ساخته ايد هر چند پيكسل دوباره تكرار شده است و بنابر آن بايد عرض قسمت مياني را انتخاب كنيد. به طور مثال در كار من الگوي مورد نظر هر 10 پيكسل تكرار مي شود. پس من عرض قسمت مياني را 10 پيكسل در نظر ميگيرم. شما بايد سه فايل در اين قسمت ذخيره كنيد. فايلهايي كه نام و اندازه آنها را در تصوير زير مشاهده مي كنيد شما همينطور بايد header و footer سايت را جدا كنيد و آنها را با اسامي مناسب ذخيره كنيد. از اينجا به بعد مربوط به مهارت شما در css و html ميشود ولي براي كمك شما يك فايل html كمكي در سايت قرار داده ايم كه مي توانيد از آن استفاده كرده و آن را ويرايش كنيد اين صفحه را ميتوانيد در اين آدرس ببينيد منبع: parantezbaz

Sunday 31 May 2009, 05:20 PM	#6
h14951r كاربر عادي تاریخ عضویت: Sunday 31 May 2009 نوشته ها: 3 با تشکر: 1 تشکر شده 0 بار 0 پست	با تشکر از زحمات شما .

Tuesday 9 June 2009, 03:32 PM	#7
sazy4sazy كاربر عادي تاریخ عضویت: Sunday 2 March 2008 نوشته ها: 1 با تشکر: 0 تشکر شده 0 بار 0 پست	من عكسهارو ندارم !

.......