آموزش طراحی وب

آموزش تبدیل عکس به پترن

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

سلام به شما همراهان گرامی ،

این آموزش یکی از مطالب موجود در سومین شماره ماهنامه طراحی وب بوده است .

آموزش تبدیل عکس به پترن

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

شاید تا به حال براتون پیش اومده باشه که در وب سایت های مختلفی که ابزارهای گرافیکی رو برای دانلود قرار میدن ، به عنوان دانلود پترن ، فایل هایی رو دانلود کردید و پس از دانلود متوجه شدید که اونها پترن نیستن که بتونیم در فتوشاپ اونها رو Load کنیم و استفاده کنیم و تنها چند عکس در اختیار ما گذاشته شده ! خب حالا چی کار باید کرد ؟! من بهتون آموزش میدم که نهایتا طی چند کلیک ساده همون عکس ها رو به پترن تبدیل کنین و داخل فایل گرافیکیتون ازش استفاده کنین 🙂

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

Dribbble-ir-Grid (10)

 

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

خب برای ادامه ، فایل این تصویر رو در نرم افزار فتوشاپ باز میکنیم . سپس مطابق با تصویر زیر ، از منو Edit گزینه Define Pattern رو کلیک میکنیم .

def-pattern-1

خب حالا پنجره زیر رو مشاهده میکنین :

در این مرحله از شما سوال میشه که نام پترنی که در حال ایجاد اون هستید رو تعیین کنید .

def-pattern-2

تبریک میگم ! پترن شما ساخته شد 🙂
حالا میتونید با مراجعه به Pattern Overlay پترن ساخته شده رو مشاهده و استفاده کنین :

def-pattern-3

خب امیدوارم که از این آموزش کوتاه لذت برده باشید . در شماره های بعدی ماهنامه سعی میکنم آموزش ها رو به صورت ویدئویی در اختیارتون قرار بدم چون احساس میکنم هم جذابیت بیشتری داره هم بهتر میشه مسائل رو بررسی کرد و خب نتیجه بهتری هم میشه کسب کرد .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۵

  • ببخشید یه سوال .
    خب ما پترن رو ساختیم . این کنار .
    حالا یکی میاد یه پترن دانلود میکنه بعد ازش عکسی نداره که در طراحی وب استفاده بشه .
    این باید چیکار کنه ؟ چطوری از پترنی که داریم عکسی تهیه کنیم ؟
    ممنون میشم جواب بدین . اخه برام خیلی مهمه .

    • سلام دوست عزیز

      زمانی که شما از پترن استفاده می کنید ، یک پس زمینه تو طرحتون ایجاد میکنید ، درسته؟ کدنویس از اون پس زمینه جوری برش میزنه که قابلیت تکرار در کدنویسی رو داشته باشه.

      موفق باشید

  • عالیییییییییییییییییییییییییی

    مرسیییییییییییییییییییییییییی
    ممنووووووووووووووووووووون
    گل کاشتییییییییییییییییییییییییی
    عاشقتمممممممممممممممممم
    مرسی
    مرسی
    مرسی
    خدا قوت
    خیلی واضح و بی دردسر و عالی

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین