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

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

دسته بندی موضوعات
سفارش تبلیغات

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

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

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

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

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

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

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

Dribbble-ir-Grid (10)

 

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

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

def-pattern-1

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

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

def-pattern-2

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

def-pattern-3

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : حسین همت یار

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مشاور گرافیک وب ، طراح UI و تحلیلگر UX، مسلط به نرم افزارهای گرافیکی پیکسلی و برداری و کدنویس HTML , CSS

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • ایران وردپرس

    فوق العاده بود

    خیلی ممنون بابت وب سایت خوبتون

  • مجید

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

    • میترا رحیمی

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

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

      موفق باشید

  • MeSSrro

    دمت گرم..کارمو راه انداختی ♥

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟