آموزش: ایجاد 5 الگوی پس زمینه ظریف

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

البته، پیدا کردن این نوع الگوها به صورت آنلاین آسان است، بنابراین تنها کاری که باید انجام دهید این است که آنها را ذخیره کرده و از آنها استفاده کنید، اما آیا دوست ندارید بدانید چگونه آنها را از ابتدا بسازید—تا کمی شخصیت به آن اضافه کنید. به طراحی وب شما؟ خوب امروز ما 5 آموزش کوتاه برای کمک به شما برای ایجاد پنج نوع مختلف پس‌زمینه ظریف گردآوری کرده‌ایم.

اینها آموزش های فتوشاپ هستند که برای کاربران مبتدی تا متوسط ​​بهترین هستند—بسیاری از مراحل را به سرعت توضیح خواهم داد، گویی از قبل اطلاعاتی در مورد برش های کوتاه و کدهای کوتاه فتوشاپ دارید. در هر صورت، امیدوارم بتوانید آن را دنبال کنید، چیزی را که قبلاً نمی دانستید بیابید و یاد بگیرید که چگونه پنج الگوی پس زمینه ظریف و بدون درز بسازید.

الگوی اول

برای این الگوی اول، می‌خواستم چیزی را تقلید کنم که کمی خشن با کمی بافت بود.

مرحله 1.

اولین کاری که می خواهید انجام دهید، البته ایجاد سند جدید است. این بار ما می خواهیم با اندازه سند 100 پیکسل در 100 پیکسل شروع کنیم.

مرحله 2.

وقتی سند خود را ساختید، می‌خواهید رنگ پس‌زمینه خود را انتخاب کنید. می‌توانید از بین نمونه‌ها انتخاب کنید یا کادر محاوره‌ای Color Picker خود را بیاورید. من می خواستم این بار با یک رنگ آبی تیره خوب استفاده کنم.

مرحله 3.

اولین کاری که می‌خواهیم برای ایجاد پس‌زمینه انجام دهیم، اضافه کردن مقداری نویز است. به Filter > Noise > Add Noise بروید تا این کادر محاوره ای باز شود. مقدار (نویز) خود را با توزیع Guassian به 3% تغییر دهید و مطمئن شوید که کادر تک رنگ علامت زده شده است.

مرحله 4.

در مرحله بعد، فیلتر لازم برای ایجاد باقی مانده ظاهر گرانج را اعمال می کنیم. به Filters > Brush Strokes > Accented Edges بروید. کادر محاوره ای Filter Gallery ظاهر می شود و شبیه به این می شود. شما می خواهید با تنظیمات بازی کنید تا زمانی که چیزی را که دوست دارید پیدا کنید. تنظیماتی که استفاده کردم: عرض لبه 6، روشنایی لبه 18 و صافی 6.

مرحله 5.

برای اینکه این الگو یکپارچه شود، کاری که می‌خواهیم انجام دهیم این است که پیکسل‌ها را در اطراف لبه‌ها بپیچیم. با رفتن به Filter > Other > Offset، کادر محاوره‌ای را نمایش می‌دهیم که به ما کمک می‌کند پیکسل‌ها را به اطراف حرکت دهیم. کاری که می خواهید انجام دهید این است که از مقداری استفاده کنید که نصف اندازه طول و/یا عرض شما باشد. طول و عرض ما هر کدام 100 پیکسل است، بنابراین می‌خواهیم آن را با 50 پیکسل در اطراف بپیچیم.

مرحله 6.

همانطور که در مرحله 5 می بینید، وقتی پیکسل های خود را Offset می کنید، در واقع می توانید ببینید که پیکسل ها از کجا شروع و متوقف می شوند. برای پاک کردن آن، می‌خواهید برس شفا (J) خود را در پالت خود بگیرید، Alt+Lft روی نقطه‌ای در پس‌زمینه‌تان کلیک کنید و روی آن نقاشی کنید. هنگامی که آن را با برس Healing خود صاف کردید، باید بسیار شبیه تصویر بالا باشد.

مرحله 7.

مرحله آخر در ایجاد یک الگو این است که الگوی خود را تعریف کنید. به Edit > Define Pattern بروید و یک کادر محاوره ای ظاهر می شود که از شما می خواهد الگوی خود را نام ببرید. اسمش رو هر چی دوست داری بذار برای بازیابی الگوی خود، Paint Bucket (G) خود را بگیرید و مطمئن شوید که در حالت الگو قرار دارد. جدیدترین الگوی شما به احتمال زیاد آخرین الگو خواهد بود. آن را انتخاب کنید و بوم خود را با الگو پر کنید.

 

تصویر نهایی

 

الگوی دوم

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

مرحله 1.

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

برای رنگ دوم ما خاکستری تیره تر (#c2c1c1) را انتخاب می کنیم. بعداً از این رنگ برای خطوط استفاده خواهیم کرد.

مرحله 2.

ابزار خط (U) خود را انتخاب کنید، مطمئن شوید که در حالت شکل هستید و وزن خط را به حدود 2 پیکسل تغییر دهید.

مرحله 3.

یک لایه جدید (Ctrl/Cmd + Shift + N) ایجاد کنید. کلیک چپ کنید و ابزار خط خود را به صورت مورب از گوشه ای به گوشه دیگر بکشید (Shift را نگه دارید تا نور شما دقیق شود).

مرحله 4.

لایه جدید دیگری ایجاد کنید. همین کار را با ابزار خط خود برای طرف دیگر انجام دهید. وقتی خطوطم را تمام کردم و آنها را به درستی قرار دادم، ادغام این دو لایه را راحت‌تر دیدم. اگر در حالت Shape Mode هستید، باید به راحتی آخرین لایه (بالا) را برجسته کنید و روی Ctrl/Cmd + E کلیک کنید تا آن را با لایه زیر آن ادغام کنید.

مرحله 5.

برای آسان کردن کارها، می‌خواهم از گزینه Trim برای حذف همه چیزهای اضافی که نمی‌توانید ببینید استفاده کنم. برای انجام این کار به Image > Trim بروید، و معمولاً باید بتوانید OK را فشار دهید و هر چیزی که نمی‌بینید حذف می‌شود.

مرحله 6.

با ادغام خطوط شما، می خواهید آنها را کوچک کنید تا کمی فاصله بین “X” و لبه ها وجود داشته باشد. برای این کار، می‌خواهید Control/Cmd + T را فشار دهید و کلیدهای Shift و Alt را نگه دارید تا نسبت‌ها را حفظ کنید و آن را از مرکز کوچک کنید. آن را به دلخواه خود کوچک کنید.

مرحله 7.

من می‌خواستم “X” خود را کمی برجسته جلوه دهم، بنابراین لایه را کپی کردم (Control + J) و تصمیم گرفتم با رفتن به  Image > Image Adjustments > Brightness/Contrast آن را سبک‌تر کنم. روشنایی را تا آخر بالا بردم تا به رنگ خاکستری روشن/سفید خوب تبدیل شد. وقتی رنگی دارید که آن را تأیید می کنید، تأیید را فشار دهید.

مرحله 8.

بعد، می‌خواهید لایه سبک‌تر خود را به هر شکلی که می‌خواهید تنظیم کنید. ابزار پیکان خود (V) را بگیرید و با کلیک بر روی دکمه های پیکان، لایه های خود را به اطراف حرکت دهید. من همچنین لایه هایم را به اطراف منتقل کردم تا ظاهر را تغییر دهم. با آن بازی کنید تا چیزی که دوست دارید به دست آورید. (در نهایت لایه «X» سبکترم را زیر دیگری گذاشتم و فقط یک بار آن را پایین انداختم).

مرحله 9.

وقتی فهمیدید که می‌خواهید «X» روشن‌تر و تیره‌تر خود را چگونه قرار دهید، کمی نویز به پس‌زمینه خاکستری اضافه کنید. خیلی ظریف است، بنابراین به Filter > Noise > Add Noise بروید و فقط 1٪ از نویز را اضافه کنید. توزیع را به صورت Gaussian نگه دارید و مطمئن شوید که کادر تک رنگ علامت زده شده است.

مرحله 10.

وقتی این کار را انجام دادید، می خواهید اندازه تصویر خود را تغییر دهید. به Adjustments > Image Size بروید و آن را به اندازه ای که می خواهید کوچک کنید. من 75px در 75px را تنظیم کردم. و دوباره، شما می خواهید الگوی خود را با رفتن به Edit > Define Pattern، نامگذاری الگوی خود و فشار دادن OK مشخص کنید. در زیر چیزی است که تصویر نهایی می‌خواهد.

 

تصویر نهایی

 

الگوی سوم

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

مرحله 1.

برای این الگو، من با اندازه بوم بزرگتر 150 پیکسل در 150 پیکسل شروع کردم زیرا در اینجا کمی دقیق تر خواهیم بود. با انتخاب یک خاکستری واقعاً تیره برای پر کردن بوم خود شروع کنید.

مرحله 2.

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

مرحله 3.

در مرحله بعد می‌خواهید ابزار Brush (B) خود را دریافت کنید و یک قلم مو نرم برای رنگ کردن یک خط بزرگتر با برس نرم روی دومین خط خاکستری روشن بگیرید. من در اینجا از رنگ تیره تر (مشکی) برای خط خود استفاده کردم. با خیال راحت با انواع مختلف رنگ‌ها آزمایش کنید.

مرحله 4.

اکنون می‌خواهیم اندازه این الگو را با رفتن به Image > Image Size کوچک کنیم. من آن را به 10px در 10px تغییر دادم. هنگامی که اندازه را تغییر دادید، می‌خواهید به Edit > Define Pattern > نام الگوی خود بروید و سپس روی OK کلیک کنید.

مرحله 5.

یک سند جدید ایجاد کنید—این بار اندازه 615px در 450px را انتخاب کردم، اگرچه سند شما نباید آنقدر بزرگ باشد. هر چیزی بزرگتر از 200 پیکسل در هر طرف باید کار کند. سطل رنگ (G) خود را بگیرید، مطمئن شوید که در حالت الگو قرار دارد (یک منوی کشویی با گزینه‌های «پیش‌زمینه» و «الگو» وجود دارد) و الگویی را که درست کرده‌اید بگیرید. بوم خود را با آن الگو مانند تصویر بالا پر کنید.

مرحله 6.

اکنون معمولاً کارمان تمام می شود، اما می خواهیم تغییراتی در ظاهر خطوط ایجاد کنیم. به Filter > Brush Strokes > Angled Strokes بروید تا افکت مورد نظر را دریافت کنید. باز هم، من شما را تشویق می‌کنم تا زمانی که چیزی را که دوست دارید، بازی کنید، اما تنظیماتی که من استفاده کردم در اینجا آمده است: تعادل جهت 73، طول ضربه 6، و وضوح 4. برای ارسال تغییرات، تأیید را فشار دهید.

مرحله 7.

این نتیجه نهایی است، اما برای اینکه آن را به یک الگوی یکپارچه تبدیل کنم، ابزار برش (C) خود را گرفتم و یک ناحیه مربعی (Shift + کلیک چپ) را انتخاب کردم که به نظر من کاملاً سازگار بود. انجام چنین چیزهایی آسان است – شما فقط می خواهید مطمئن شوید که سمت چپ شما از جایی شروع می شود که سمت راست شما به پایان می رسد و قسمت بالایی شما از جایی شروع می شود که پایین شما به پایان می رسد. دوباره، وقتی منطقه مناسبی پیدا کردید، Edit > Define Pattern و امتحان کنید.

 

تصویر نهایی

 

الگوی چهارم

بیشتر از کمی کثیفی با ارزش تکراری و در عین حال ظریف.

مرحله 1.

برای الگوی چهارم خود از نوع خط دیگری از پایه استفاده می کنیم. دوباره می خواهیم با یک سند جدید با اندازه 100 پیکسل در 100 پیکسل شروع کنیم. برای رنگ زمینه سفید معمولی دارم و برای رنگ خط خاکستری خیلی روشن انتخاب کردم. ما می‌خواهیم ابزار خط (U) خود را بگیریم و یک خط افقی در بالا و همچنین یک خط در وسط بکشیم.

مرحله 2.

حالا این یکی کمی «کثیف‌تر» از بقیه خواهد بود، بنابراین می‌خواهیم یک سری نویز به آن اضافه کنیم. با انتخاب لایه پس‌زمینه سفید، به Filter > Noise > Add Noise بروید و مقدار Amount را به 15%، Distribution را به Gaussian تغییر دهید و کادر Monochromatic را علامت بزنید.

مرحله 3.

برای این مورد، مجدداً می‌خواهیم اندازه را کمی کوچک‌تر کنیم، بنابراین به Image > Image Size می‌رویم و برای این یکی، اندازه را به 15 پیکسل در 15 پیکسل تغییر دادم. پس از انجام این کار، الگوی خود را با Edit > Define Pattern > نامگذاری الگوی خود و ارسال تغییرات ایجاد کنید. همانطور که می خواهید استفاده کنید! به خاطر داشته باشید، با این حال، اگر می خواهید الگوی شما کمتر تکراری به نظر برسد، سعی کنید اندازه بوم را افزایش دهید تا بتوانید تنوع خود را افزایش دهید.

 

تصویر نهایی

 

الگوی پنجم

برای این الگوی آخر، می‌خواستم چیزی تیره، با کمی بافت امتحان کنم.

مرحله 1.

یک بار دیگر، من یک سند جدید با اندازه بوم 100 پیکسل در 100 پیکسل ایجاد کردم. برای این الگوی آخر، ما یک رنگ خاکستری بسیار تیره برای پس زمینه خود انتخاب می کنیم.

مرحله 2.

برای پرش مستقیم، با رفتن به Filters > Noise > Add Noise: Amount 5%, Uniform Distribution، با فعال کردن Monochromatic، مقداری نویز بسیار مفید اضافه می کنیم.

مرحله 3.

برای ایجاد افکت مورد نظر در اینجا، به Filters > Sketch > Halftone Pattern می رویم. به راحتی می توانید اینجا بازی کنید، اما مقادیری که من استفاده کردم عبارت بودند از: اندازه 1، کنتراست 0، نوع الگوی نقطه.

مرحله 4.

ما قبلاً از این ویژگی Offset برای کمک به ایجاد یک الگوی بدون درز استفاده کردیم. قرار است دوباره همین کار را انجام دهیم. به Filter > Other > Offset بروید و نصف مقدار ارتفاع و عرض خود را وارد کنید. مطمئن شوید که قسمت های تعریف نشده شما روی Wrap Around تنظیم شده اند و OK را فشار دهید. هنگامی که این اتفاق افتاد، می خواهید دوباره از Healing Brush (J) برای صاف کردن مناطقی که کمتر بدون درز هستند استفاده کنید. هنگامی که آن را به مکانی که دوست دارید رساندید، به Edit > Define Pattern > نام الگوی خود بروید، OK را فشار دهید و از الگوی جدید خود استفاده کنید.

 

تصویر نهایی

 

به خاطر داشته باشید…

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

 

از چه تکنیک هایی برای ایجاد پس زمینه ظریف خود استفاده می کنید؟