کار با گوشه و حاشیه در طراحی سایت (قسمت اول)

کار با گوشه و حاشیه در طراحی سایت (قسمت اول)

ممکن است با قرار دادن تصویر مورد نظر خود با هر یک از فرمت های PNG،GIF و JPEG در صفحه وب خود هنوز کاملا راضی نشده باشید.بطور قرار دادی تصاویری که تحت عنوان HTML در یک صفحه قرار می گیرند در کنار متن نوشتاری و احاطه شده قرار داده می شوند.معمولا یک تصویر با لینک ترکیبی یک حاشیه آبی غیر جذاب خواهد داشت.

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

1-افزودن مستقیم آرایه ها به تصویر

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

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

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

1-با استفاده از ابزارهای مستطیل،مستطیلی را در ابعاد تمبر مورد نظر رسم می کنیم.برای رنگ مستطیل از هر رنگی بجز رنگ زمینه می توان استفاده نمود.

2-با استفاده از ابزار بیضی و با فشار دادن کلید shift دایره کوچکی را را می توانید در قسمت پایین و سمت چپ مستطیل رسم کنید و با فشار دادن کلید shift  ابزار بیضی به جای کشیدن یک بیضی یک دایره رسم می کند.برای این دایره هر رنگی را بجز رنگ مستطیل انتخاب نمایید.

3-با انتخاب ابزار حرکت (Move) و همزمان با فشار دادن کلید Alt دایره را به راست حرکت دهید.این کار را تا رسم کپی های متععد از دایره در امتداد ضلع پایینی مستطیل ادامه دهید.

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

Layer>Disteibuteو LayerVertical Centers>Horizontal Centers.

5-برای رسم دایره در حاشیه بالایی مستطیل بجای طی کردن مراحی 2 تا 4،پس از انتخاب همه لایه های دایره و با فشار دادن کلید  Alt همزمان با کشیدن آنها یک کپی از ردیف دایره ها در حاشیه بالایی مستطیل ایجاد می کنیم.

6-برای ایجاد ردیفی از دایره های در حاشیه های راست و چپ مستطیل،با فشار دادن کلید Alt  و کشیدن ردیف دایره ها یک کپی از آنها در مرکز نستطیل ایجاد کنید و سپس مسیر Edit>Transfrom>Rotate 90 CW را انتخب نموده و با حرکت دادن این دایره ها تمام حاشیه مستطیل پر می کند.

7-اکنون نوبت رها شدن رنگ های وحشتناک قبلی می باشد.با انتخاب مسیر Layer>Flatten Image . حال از ابزار عصای جادوگر (Magic Wand) برای انتخاب مستطیل استفاده کنید.

8-برای گرد کردن گوشه های شکل تمبر انتخاب شده از مسیر Select >Modify>Smooth  گزینه Smooth Selection را انتخاب کنید.می توانید اعداد مختلفی را در این گزینه امتحان نمایید و عدد 5 عدد مناسبی برای شروع می باشد.

9-حال این نسخه را مخفی کرده،لایه جدیدی را ایجاد کنید و با استفاده از ابزار سطل رنگ آن را با یک رنگ یکدست می پوشانیم.

10-برای پایان دادن به رسم این حاشیه مستطیلی تمبر از کمی Web 2.0-style gradient و سایه برجسته نیز استفاده نمایید و با انتخاب لایه جدید به مشیر Layer >Layer Style >Drop Shadow رفته و تنظیمات مورد نظرتان را انتخام دهید و سپس به مسیر Layer >Layer Style >Gradient Overlay رفته و همان کار را تکرار کنید. می توانید این بار از رنگ دیگری استفاده نمایید.

2-اجرای آرایه ها با استفاده از CSS

حاشیه همه تصاویر را بصورت همزمان و بدون نیاز به ویرایش تک تک آنها تغییر داده و میتوان بروز نماییم.اگر دز سایت خود تصاویر هم اندازه دارید و نیاز به تغییرات دارد استفاده از این روش برای بروز ماندن به شما پیشنهاد می شود.

3-حاشیه های CSS

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

1396-05-19 14:19 مقالات آموزشی

مشاوره رایگان جهت طراحی سایت؟