ساخت پس زمینه سایت با حجم کم توسط تصاویر تکرارپذیر و یکپارچه

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

• ساخت پس زمینه سایت توسط texture های یکپارچه

Texture ها بافت هایی هستند که استفاده از آنها در پس زمینه سایت، تداعی کننده و باعث به وجود آمدن احساسی از لمس کردن سطوح غیر مسطح و پُرزدار یا زِبر در دنیای واقعی است. با جستجوی کلمه texture در موتور جستجوی تصاویر در گوگل، به آرشیو بزرگی از این نوع تصاویر دست خواهید یافت. یکی از آنها را در سایز اصلی خود در سایت ارائه دهنده دریافت کنید و آن را در فتوشاپ باز نمایید. سپس توسط ابزار crop یک بخش از texture خود را انتخاب کرده و کلید enter را فشار دهید. این تکه تصویری است که می خواهیم در صورت تکرار بی نهایت آن در طول و عرض، هیچ خط جدا کننده ای در آن یافت نشود و کل تصویر به صورت یکپارچه مشاهده شود.

به منوی filter رفته و از زیر منوی other گزینه offset را کلیک نمائید. در پنجره ظاهر شده در دو فیلد عمودی و وافقی عدد معادل نصف سایز کنونی تصویر وارد کنید. به عنوان مثال تکه تصویر من 800 پیکسل در 800 پیکسل است، بنابراین من در فیلدهای مربوطه عدد 400 را وارد کرده ام.

فیلتر offset باعث پدیدار شدن خطوطی در مرکز تصویر ما خواهد شد که می توان به راحتی آنها را توسط ابزار healing brush از بین برد. برای اینکار پس از انتخاب ابزار healing brush یک ناحیه نزدیک به خطوط را انتخاب کنید، ماوس را روی آن ناحیه برده و در حالی که کلید alt را پائین نگه داشته اید، روی نقطه مورد نظر کلیک کنید. حال به روی خط مورد نظر رفته و با کلیک ماوس آن را محو نمائید.

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

• ساخت پس زمینه سایت توسط pattern های تکرارپذیر

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

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

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

• ساخت پس زمینه برای وب سایت توسط پیکسل های تکرارپذیر

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

بر روی سند ایجاد شده زوم کنید و توسط ابزار مداد (pencil tool) 3 پیکسل از آن را در قطر رنگی کنید

اکنون چنانچه این طرح را به عنوان پترن یا الگو در فتوشاپ معرفی کنید، با پر کردن هر پس زمینه ای توسط آن، تصویری مشابه نمونه فوق را مشاهده خواهید کرد. برای معرفی طرح خود به عنوان پترن یا الگو در فتوشاپ و استفاده چندباره در پروژه های خود پس از ذخیره طرح با فرمت .pat ، ابزار پر کردن با رنگ ( Fill tool ) را انتخاب کرده و در نوار افقی مربوط به خصیصه های این ابزار در بالای صفحه از منوی پایین افتادنی Foreground را به Pattern تغییر دهید . سپس در جعبه Pattern های کنار آن روی فلش کوچک مربوط به Option های آن کلیک کنید و گزینه Load Patterns را انتخاب نمایید . سپس پترن ذخیره شده خود را وارد نمایید. پس از وارد کردن طرح کافیست توسط ابزار Fill نواحی مورد نظر خود را با آن پر کنید و یا در بخش افکت های استیل لایه ها (Layer Style Effects) توسط بخش Pattern Overlay ، لایه مورد نظر خود را با آن پر کنید . آموزش تصویری زیر به شما کمک خواهد کرد:

نظرات (4) -

  • مصطفی

    08/20/1390 12:23:49 ق.ظ | پاسخ به این نظر

    با عرض سلام و خدا قوت
    سایت تخصصی و خوبی دارید امیدوارم در پناه حق سالم و سلامت باشید.
    با اجازه من سایت شمارو لینک کردم اگه وقت کردید به وبلاگ من هم سری بزنید.
    http://computerman.blogsky.com

  • ملیکا

    01/26/1392 09:12:57 ق.ظ | پاسخ به این نظر

    سلام مطلب جالبی بود همچین مطلبی رو لازم داشتم مرسی

Loading