آموزش طراحي Web Layout - سطح متوسط - متن + تصوير

Depp · Sep 11, 2009

سلام به شما ميخوام اولين پستم رو با يك آمــــوزش شروع كنم
اميدوارم مفيد واقع بشه.ابتدا توضيحاتي رو راجع به آموزش ميدم
پس تا آخر آموزش با من همراه باشيد.
--------------
نويسنده آموزش: Richard Carpenter ترجمه شده توسط خودم
برنامه استفاده شده:Adobe Photoshop CS3
سطح آموزش: متوسط (ميشه گفت اندكي پيشرفته)
زمان مورد نياز: حداقل 1 ساعت- حداكثر 2 ساعت
منبع

sdtuts
---------------

مرحله اول: ابتدا يك سند در اندازه 1200 در 1160 پيكسل با پس زمينه سفيد ايـجاد كنيد. بعد براي دقت بيشتر در طراحي احتياج به دو تا Guide (راهنما) داريم كه طبق اندازه مورد نظر بايد فاصله بين اين دو تا راهــنما 850 پيكسل باشه. بدين منظور براي ايجاد راهنماي اول به منويView > New Guide رفـته و در اندازه 175 پيكسل Guide را به حالت عمودي ايجاد كنيد.

براي ايجاد راهنماي دوم مجددا به منوي فوق رفته و اين بار در اندازه 1025 پيكسل در حالت عمودي راهنما را ايجاد كنيد.

اكنون ما دو تا راهنما ايجاد كرديم. بايد توجه داشته باشيد كه دقيقا بايد فضاي بين اين دو راهنما 850 پيكسل باشه.

مرحله دوم: حالا زمان پر كردن رنگ پس زمينه طرحه.ابتدا رنگForeground را بر رويFFFFFF# و رنگ Background را بر روي e1e1e1# ست كنيد.بعد بايد يك طيف رنگي ايجاد كنيم با ابزار Gradient Tool يك طيف رنگي از رنـــگهاي فوق در نوع Radial ايجاد كنيد.

بطوريكه مكان شروع اون از بالا در وسط صفحه و رنگ اون تا ميانه طرح را بگيره همانند تصوير زير:

مرحله سوم: ابزار Type Tool را انتخاب كنيد بعد متن مورد نظر خودتون رو كه ميتونه نام وب ســـايت شما باشه را در رنگ دلخواه در گوشه چپ در كنار Guide سمت چپ بنويسيد. در اين آموزش از رنگ #ff008a استفاده شده .

مرحله چهارم: حالا براي قرار دادن مكان كاوش در مطالب (جستجو) وبسايت بايد اون رو طراحـي كنيم براي طراحي مكان جستجو در همان سطح احتياج به دو تا مستطيل نسبتا كوچك داريم. براي ايجاد آن دو مـيتونيد از ابزارهاي Rectangular Marquee Tool همچنين Rectangle Tool استفاده كنيد.

طبق تنظيمات زير اونها را ايجاد كنيد.

تنظيمات استايل فيلد درج متن :

تنظيمات استايل دكمه جستجو:

مرحله پنجم: بالاخره بعد از انتخاب نوع ابزار و افزوده شدن متن و مكان جستجو در زمينه. کليات مسئله باید چیزی مثل تصوير زير دربياد.

مرحله ششم: ابزار Rounded Rectangle Tool را انتخاب كنيد و مقادير Radius را 15 پيكسل گذاشته و با تغيير از حالت Shape به Paths مستطيلي را از ابتدا Guide سمت چپ تا Guide سمت راست ايجاد كنيد. بعد بر روي آن راسـت كليك كنيد و Make Selection را انتخاب كنيد و توجه داشته باشيد كه اندازه اين مــستطيل بيشتر از 215 پيكسل نشه.

مرحله هفتم: در حالي كه حالت انتخاب فعاله.ابزار Gradient Tool را انتـخاب كنيد و بـعد از ست كردن رنـــگهاي fefefe# براي Foreground و رنـگ e1e1e1# بــراي Background طيف رنگي از نــــوع Radial از بــــالاي مكان
انتخابي تا پايـين ايــجاد كنيد بصورتي كه سـطح بالاتر كمي روشنتر باشه.

مرحله هشتم: بعد از افزودن طيف رنگي تنظيمات زير را بر روي لايه اعمال كنيد.

مرحله نهم: سپس كليد Ctrl را نگه داريد و روي اين لايه كليك كنيد تا دوباره به حالت انتخاب در آيد بعد ما براي ادامه كارمون بر روي اين لايه بايد مـكاني در وسط اين مستطيل ايجاد شـده را به حالت انتخاب در آوريم . به منوي Select > Modify > Contract رفته و در قسمت Contract By عدد 15 را تايپ كرده و تاييد نماييد.

مرحله دهم: لايه جديدي ايجاد كنيد و مكان انتخاب شده را با رنگ دلخواه پر كنيد سپس با زدن كليد هاي Ctrl + D اون رو از حالت انتخاب خارج كنيد.

مرحله يازدهم: اكنون تنظيمات زير را بر روي اين لايه اعمال كنيد.

مرحله دوازدهم: سپس بايد افكتي منــاسب بـراي اين قـسمت ايجاد كنيم. اين افكت به دلخواه اسـت و ميتوانيد از براش نيز استفاده كنيد. (من در اين آموزش به اين شكل عمل كردم در حقيقت ميتونيد در اين فسمت با ساخت يه براش ساده هم آشنا بشيد) ابتدا سند جديدي در اندازه 600 در 600 پيكسل بدون پس زمينه ايجاد بكنيد و با ابزار Elliptical Marquee tool دايره اي بزرگ در وسط آن ترسيم كنيد.

ادامه آموزش در پست بعدي...

Depp · Sep 11, 2009

ادامه آموزش:

بعــد از ايجاد دايــره بايد كـمي تغـييرات را روي استايل اين لايه اعـمال بشه.پـس تنظيمات زير رو اعمال كنيد.

بعد از انجام تنظيمات اين لايه به منوي Edit > Define Brush بريد و اون رو بصورت براش با نام مناسب ذخــــيره كنيد.ابزار Brush Tool را انـتخـاب كنيد و براش مـورد نــظر را برگزينيد Master Diameter را روي 50 پيكسل قرار بديد.

بعد به قسمت Brush Options بريد تا تنظيماتي را بر روي اين براش اعمال كنيم.

مرحله سيزدهم: براش شما آماده و قابل استفاده است.ابتدا بالاي لايه مستطيل دوم كه چندي پيش بر روي اون كار كرديم لايه اي جديد ايجاد كنيد و با ست كردن رنگ دلـخواه كه من در اين آموزش از رنگ سفيد ffffff# براي براش استفاده كردم بـه آرامي در سه لايـه متفاوت اين براش را بر روي كار بياريد سپس بــراي جلــوه دادن بيشتر لايه هاي فوق بايد كمي از لايه هاي زيرين را مات كنيم بدين منظور از فيلتر Guassian Blur استفاده ميكنيم.به منويFilter > Blur > Gaussian Blur بريد و Radius را 3 پيكسل انتخاب كنيد و بعد تايـيد كنيد.

(اين مرحله بصورت دلخواهه و شما ميتونيد از براش مورد نظر خود و طبق سليقه خود اين مكان رو طراحي كنيد.همچنين ميتوانيد از تصوير هم استفاده كنيد.)

در آخر بايد به اين صورت در بياد:

ميتونيد متنتون رو هم بهش اضافه كنيدكه بطور مثال مثل تصوير زير ميشه:

مرحله چهاردهم: حالا نوبت طراحي Navigation وب سايـته. ابـزار Rounded Rectangle tool را انتخاب كنيد و با قرار دادن مقدار 10 پيكسل براي Radius و در حـالت Paths مستطيلي به ارتفاع 54 پيكسل از كنار Guide سمت چپ تا Guide سمت راست رسم كنيد.حالا بر روي اون راست كليك كنيد و Make Selection رو انتخاب كنيد .ميبينيد كه بصورت انتخاب در مياد.اونو با رنگي دلخواه پر كرده از حالت سلكت خارج كنيد حالا تنظيمات زير رو بر روي استايل اين لايه اعمال كنيد:

مرحله پانزدهم: حالا بايد بر روي اين Navigation تعدادي پيوند ايجاد كنيم پـيوند هاي مورد نظر ميتونه همچون صفحه اصلي ، گالري ، پروژه ها ، ارتباط با ما و... باشه.بين اين پيوند ها هم ميتونين بوسيله نقطه يا خط كه بسته به سليقه شما داره جدا كرد .(در اين آموزش از نقطه استفاده شده كه با رنگ #ff008a پر شده).

مرحله شانزدهم: بعد از اينكه كار طراحي قسمت Navigation به پايان رسيد نوبت به طراحي قسمت
بعديه.براي طراحي اين قسمت هم ما دوبــاره به ابزار Rounded Rectangle tool روي مياريم.اين ابزار را انتخاب كنيد مقدار Radius را 10 پيكسل برگزيده و مستطيلي با ابعاد335 پيكسل پهنا و 196 پيكسل ارتفاع رسم كنيد.مكان اين قسمت هم در اين آموزش از كنار Guide سمت چپ شروع ميشه.

مرحله هفدهم: حالا تظيمات زير رو بر روي استايل اين لايه اعمال كنيد.

مرحله هجدهم:حالا ميخواهيم به اين قسمت كمي افكت بديم.ابزار Polygonal Lasso tool رو انتخاب كنيد.بعد گوشه سمت راست اين قسمت رو به صورت مثلث شكل به حالت انتخاب دربياريد.

مرحله نوزدهم: حالا با Ctrl + X اونو كات كنيد بعد دوباره با Ctrl + V پيست كنيد.بعد بايد اونو 180 درجه چرخش بديد به منوي Edit > Transform > Rotate 180 بريد و چرخش رو ايجاد كنيد.(ميتونيد اين قسمت رو هم دست نخورده باقي بگذاريد.)

مرحله بيستم: حالا ميتونيد عنوان و متن اين قسمت هم اضافه كنيد.

اگر كمي بيشتر وقت بگذاريد ميتونيد با كمي ابتكار Web Layout هاي زيبايي طراحي كنيد.اگر
از اول آموزش توجه كرده باشيد متوجه ميشويد كه طراحي و رنگ بندي ها و تمام قسمتها هم دست خودتونه و ميتونيد كم يا اضافه يا تغييرش بديد. اميدوارم اين آموزش مورد استفاده شما قرار گرفته باشه.