آبجی
17th June 2010, 01:11 AM
http://img.persiangfx.com/main/image/1275293067_logo-design-process-and-walkthrough-for-vivid-ways.jpg
آموزش طراحی لوگو از ابتدا تا انتها
Vivid Ways یک بلاگ جدید متمرکز روی بهبود شخصیت افراد و زندگی شاد و پویا است که اهداف آن شامل القا و تشویق خواننده به عقاید و نکاتی در مورد چگونه زیستن و لذت بردن از زندگی است.
بعد از مذاکرات اولیه و تبادل نظرات و اطلاعات بین دو طرف، ایده ای برای طراحی لوگو در ذهن من بوجود آمد. طرح هایی به عنوان الگو پیشنهاد شد و در نهایت به این نتیجه رسیدم که فونت sans-serif برای این کار بسیار مناسب است. یکی دیگر از شرایط این بود که لوگو باید از یک عنصر گرافیکی مجزا در موزات جمله بندی استفاده می کرد، در غیر اینصورت، فضای باز خلاقانه ای در اطراف طرح بوجود می آمد که همیشه زیبا به نظر می رسد.
http://img.persiangfx.com/main/gallery-small/1264941557_sketches-sm.jpg
کار را با کشیدن طرح های آزمایشی روی کاغذ آغاز کردم که بیشترین تمرکز من دراین طرح ها روی حروف V و W بود تا یک طرح خلاق و بکر ایجاد کنم که هم مانند یک علامت به نظر برسد و هم حروف به راحتی قابل تشخیص باشند. بعد از تحقیق و جستجو، این ایده به ذهنم خطور کرد که روبان یکی از علایم شناخته شده در زندگی افراد است، بنابراین همه تلاشم را روی کشیدن روبانی مواج و شناوری کردم که با حرکت پیچشی حروف V و W را ایجاد کرده است. دو حالت برجسته ایکه در این طرح استفاده شده یکی افکت straight/folded و دیگری smooth/curling می باشد که هر دوی آنها یک پیغام را می رسانند اما حالات نمایشی مختلفی دارد.
http://img.persiangfx.com/main/gallery-small/1264941583_Picture-4.jpg
سپس طرح های رسم شده در نرم افزار Illustrator کشیده شد و حالات مختلفی روی این طرح های آزمایش اعمال شد. در طول کار در فکر پیدا کردن یک فونت مناسب برای Century Gothic بودم و تصمیم گرفتم آن را با دو نوع فونت کلاسیک که از لحاظ ظاهری مشابه یکدیگر بوند زمایش و مقایسه کنم. فونت های مورد نظر Avant Garde و Futura بودند. همانطور که انتظار می رفت من از Avant Garde استفاده کردم، اما وقتی قدم به قدم پیش رفتم و آنها را کنار هم قرار دادم دیدم Century Gothic منظره زیباتری را ایجاد کرد. احساس من این بود که در صورت استفاده از فونت های Avant Garde و Futura حرف S مربوط به کلمه way برای این لوگو خیلی ظریف و نازک است.
http://img.persiangfx.com/main/gallery-small/1264941608_Picture-5.jpg
برای رنگ طرح، با در نظر گرفتن جسم و روح اعتماد به نفس و هوش در تئوری رنگ ها، رنگ آبی یک انتخاب مناسب بود. این رنگ برای طراحی وب سایت هم استفاده شد.
ایده دیگری از کلمه vivid برای رنگ لوگو به ذهنم آمد و آن استفاده از یک طیف رنگ کامل بود.افزودن ترکیبی از این دو رنگ همراه با کمی سایه ظریف و هنرمندانه به طرح های کلی کمک می کند تا نمای طرح به سوی یک طرح سه بعدی پیش برود.
http://img.persiangfx.com/main/gallery-small/1264941659_feedback.jpg
http://img.persiangfx.com/main/gallery-small/1264941685_feedback2.jpg
بعد از ارائه هر دو طرح به مشتری با یک بازخورد و عکس العمل عالی مواجه شدم. طرح اول با موج ملایم و هموار یک طرح گرافیکی کامل بود، اما سوال شد آیا این امکان وجود دارد که این طرح را با رنگ و فونت طرح دوم امتحان کرد.
http://img.persiangfx.com/main/gallery-small/1264941498_Picture-6.jpg
در لوگوی نهایی، طرح گرافیکی موجدار و رنگ های واضح و روشن و اشکال ملایم و حالت دار طرح فونت برای ساخت یک طرح اثرگذار با هم ترکیب می شوند.
خلق لوگو در نرم افزار Illustrator
با اطلاعات پس زمینه ای که در ذهنم دارم، به سراغ قسمت اجرایی و تخصصی طراحی می رویم و می بینیم چه فرایندهایی برای خلق این طرح گرافیکی در Adobe Illustrator استفاده شده است.
http://img.persiangfx.com/main/gallery-small/1264941772_Picture-7.jpg
همانطور که قبلا ذکر شد، کار لوگو با رسم تعداد زیادی طرح اولیه روی کاغذ آغاز شد و سپس بهترین طرح انتخاب و اسکن شد. در برنامه Adobe Illustrator تصاویر روی یک لایه قفل شده قرار می گیرند، خط محیطی یکی از قله ها علامت گذاری و ردیابی شده و در یک قسمت صفحه قرار می گیرد. این نکته مهم است اما نه برای ردیابی سراسر طرح چون هیچ دقت و ظرافتی لازم نیست، در عوض عناصر در اندازه های خاصی مرتب شده بودند تا مطمئن شویم لوگو حتی در اندازه های بزرگ تر هم خوب به نظر می رسد.
http://img.persiangfx.com/main/gallery-small/1264941790_Picture-8.jpg
در این مرحله خط محیطی که در بالاترین سطح طرح قرار دارد را کپی و سپس آن را paste کردیم، سپس آن را در سوی دیگر طرح قرار دادیم تا خطوط به هم متصل شوند.
http://img.persiangfx.com/main/gallery-small/1264941816_Picture-10.jpg
بعد از انجام این کار مسیرها با کمک ابزار Scissors ویرایش شدند و در قسمت های تعیین شده به هم متصل شدند تا اشکال مجزایی خارج از هر قسمت تشکیل شود.
http://img.persiangfx.com/main/gallery-small/1264941864_Picture-11.jpg
بعد از اینکه امواج با کنار هم قرار گرفتن اشکال مجزا شکل گرفتند، نوبت اضافه کردن رنگ و گرادیانت بود. ترکیب کردن هر نمونه ی رنگ قدیمی برای این مورد کارگر نبود- نتیجه قهوه ای تیره بود. رنگ ها باید به ترتیب طبیعی خود در طیف بدست می آمدند مثلا مانند رنگین کمان.
طیف رنگ از رنگ آبی شروع شده به تدیج به سمت رنگ ارغوانی، قرمز، نارنجی، زرد، سبز و مجددا به رنگ آبی برمی گردد.
http://img.persiangfx.com/main/gallery-small/1264941892_Picture-12.jpg
برای سه بعدی کردن طرح، باید رنگ سیاه به قسمت هایی از روبان حالت پیچش در آن وجود دارد اضافه کنید تا این حس را به بیننده القا کنند که گویی در این قسمت ها سایه وجود دارد. اضافه کردن این جزییات نهای باعث می شود که طرح برجسته تر به نظر برسد.
http://img.persiangfx.com/main/gallery-small/1264941929_Picture-15.jpg
فونت انتخاب شده هم کمی به ویرایش نیاز داشت. که با کم کردن فضای خالی بین حروف کمی اصلاح شد و این کار باعث می شود فضای مساوی در طرف دیگر نیز وجود داشته باشد. فاصله بین کلمات اندکی کم تر شد تا حس ترکیب بیشتری بین حروف ایجاد شود.
http://img.persiangfx.com/main/gallery-small/1264941960_Picture-13.jpg
سپس طرح لوگو و متن با هم ترکیب شدند، به نظر می رسید هنگامی که خط شناور طرح در یک صفحه آرایی عمودی قرار می گیر کاملا با شکل طبیعی متن هم خوانی دارد.
http://img.persiangfx.com/main/gallery-small/1264942036_Picture-14.jpg
در انتها لوگوی نهایی را با چند متغیر دیگر مانند جابجا کردن پس زمینه تیره با یک پس زمینه ی روشن و نیز بکار بردن یک رنگ واحد در شرایط و محل های خاص امتحان شد.
http://img.persiangfx.com/main/gallery-small/1264941498_Picture-6.jpg
در نهایت پس از تکمیل کار، فایل نهایی آن توسط ایمیل به دست مشتری رسانده شد.
آموزش طراحی لوگو از ابتدا تا انتها
Vivid Ways یک بلاگ جدید متمرکز روی بهبود شخصیت افراد و زندگی شاد و پویا است که اهداف آن شامل القا و تشویق خواننده به عقاید و نکاتی در مورد چگونه زیستن و لذت بردن از زندگی است.
بعد از مذاکرات اولیه و تبادل نظرات و اطلاعات بین دو طرف، ایده ای برای طراحی لوگو در ذهن من بوجود آمد. طرح هایی به عنوان الگو پیشنهاد شد و در نهایت به این نتیجه رسیدم که فونت sans-serif برای این کار بسیار مناسب است. یکی دیگر از شرایط این بود که لوگو باید از یک عنصر گرافیکی مجزا در موزات جمله بندی استفاده می کرد، در غیر اینصورت، فضای باز خلاقانه ای در اطراف طرح بوجود می آمد که همیشه زیبا به نظر می رسد.
http://img.persiangfx.com/main/gallery-small/1264941557_sketches-sm.jpg
کار را با کشیدن طرح های آزمایشی روی کاغذ آغاز کردم که بیشترین تمرکز من دراین طرح ها روی حروف V و W بود تا یک طرح خلاق و بکر ایجاد کنم که هم مانند یک علامت به نظر برسد و هم حروف به راحتی قابل تشخیص باشند. بعد از تحقیق و جستجو، این ایده به ذهنم خطور کرد که روبان یکی از علایم شناخته شده در زندگی افراد است، بنابراین همه تلاشم را روی کشیدن روبانی مواج و شناوری کردم که با حرکت پیچشی حروف V و W را ایجاد کرده است. دو حالت برجسته ایکه در این طرح استفاده شده یکی افکت straight/folded و دیگری smooth/curling می باشد که هر دوی آنها یک پیغام را می رسانند اما حالات نمایشی مختلفی دارد.
http://img.persiangfx.com/main/gallery-small/1264941583_Picture-4.jpg
سپس طرح های رسم شده در نرم افزار Illustrator کشیده شد و حالات مختلفی روی این طرح های آزمایش اعمال شد. در طول کار در فکر پیدا کردن یک فونت مناسب برای Century Gothic بودم و تصمیم گرفتم آن را با دو نوع فونت کلاسیک که از لحاظ ظاهری مشابه یکدیگر بوند زمایش و مقایسه کنم. فونت های مورد نظر Avant Garde و Futura بودند. همانطور که انتظار می رفت من از Avant Garde استفاده کردم، اما وقتی قدم به قدم پیش رفتم و آنها را کنار هم قرار دادم دیدم Century Gothic منظره زیباتری را ایجاد کرد. احساس من این بود که در صورت استفاده از فونت های Avant Garde و Futura حرف S مربوط به کلمه way برای این لوگو خیلی ظریف و نازک است.
http://img.persiangfx.com/main/gallery-small/1264941608_Picture-5.jpg
برای رنگ طرح، با در نظر گرفتن جسم و روح اعتماد به نفس و هوش در تئوری رنگ ها، رنگ آبی یک انتخاب مناسب بود. این رنگ برای طراحی وب سایت هم استفاده شد.
ایده دیگری از کلمه vivid برای رنگ لوگو به ذهنم آمد و آن استفاده از یک طیف رنگ کامل بود.افزودن ترکیبی از این دو رنگ همراه با کمی سایه ظریف و هنرمندانه به طرح های کلی کمک می کند تا نمای طرح به سوی یک طرح سه بعدی پیش برود.
http://img.persiangfx.com/main/gallery-small/1264941659_feedback.jpg
http://img.persiangfx.com/main/gallery-small/1264941685_feedback2.jpg
بعد از ارائه هر دو طرح به مشتری با یک بازخورد و عکس العمل عالی مواجه شدم. طرح اول با موج ملایم و هموار یک طرح گرافیکی کامل بود، اما سوال شد آیا این امکان وجود دارد که این طرح را با رنگ و فونت طرح دوم امتحان کرد.
http://img.persiangfx.com/main/gallery-small/1264941498_Picture-6.jpg
در لوگوی نهایی، طرح گرافیکی موجدار و رنگ های واضح و روشن و اشکال ملایم و حالت دار طرح فونت برای ساخت یک طرح اثرگذار با هم ترکیب می شوند.
خلق لوگو در نرم افزار Illustrator
با اطلاعات پس زمینه ای که در ذهنم دارم، به سراغ قسمت اجرایی و تخصصی طراحی می رویم و می بینیم چه فرایندهایی برای خلق این طرح گرافیکی در Adobe Illustrator استفاده شده است.
http://img.persiangfx.com/main/gallery-small/1264941772_Picture-7.jpg
همانطور که قبلا ذکر شد، کار لوگو با رسم تعداد زیادی طرح اولیه روی کاغذ آغاز شد و سپس بهترین طرح انتخاب و اسکن شد. در برنامه Adobe Illustrator تصاویر روی یک لایه قفل شده قرار می گیرند، خط محیطی یکی از قله ها علامت گذاری و ردیابی شده و در یک قسمت صفحه قرار می گیرد. این نکته مهم است اما نه برای ردیابی سراسر طرح چون هیچ دقت و ظرافتی لازم نیست، در عوض عناصر در اندازه های خاصی مرتب شده بودند تا مطمئن شویم لوگو حتی در اندازه های بزرگ تر هم خوب به نظر می رسد.
http://img.persiangfx.com/main/gallery-small/1264941790_Picture-8.jpg
در این مرحله خط محیطی که در بالاترین سطح طرح قرار دارد را کپی و سپس آن را paste کردیم، سپس آن را در سوی دیگر طرح قرار دادیم تا خطوط به هم متصل شوند.
http://img.persiangfx.com/main/gallery-small/1264941816_Picture-10.jpg
بعد از انجام این کار مسیرها با کمک ابزار Scissors ویرایش شدند و در قسمت های تعیین شده به هم متصل شدند تا اشکال مجزایی خارج از هر قسمت تشکیل شود.
http://img.persiangfx.com/main/gallery-small/1264941864_Picture-11.jpg
بعد از اینکه امواج با کنار هم قرار گرفتن اشکال مجزا شکل گرفتند، نوبت اضافه کردن رنگ و گرادیانت بود. ترکیب کردن هر نمونه ی رنگ قدیمی برای این مورد کارگر نبود- نتیجه قهوه ای تیره بود. رنگ ها باید به ترتیب طبیعی خود در طیف بدست می آمدند مثلا مانند رنگین کمان.
طیف رنگ از رنگ آبی شروع شده به تدیج به سمت رنگ ارغوانی، قرمز، نارنجی، زرد، سبز و مجددا به رنگ آبی برمی گردد.
http://img.persiangfx.com/main/gallery-small/1264941892_Picture-12.jpg
برای سه بعدی کردن طرح، باید رنگ سیاه به قسمت هایی از روبان حالت پیچش در آن وجود دارد اضافه کنید تا این حس را به بیننده القا کنند که گویی در این قسمت ها سایه وجود دارد. اضافه کردن این جزییات نهای باعث می شود که طرح برجسته تر به نظر برسد.
http://img.persiangfx.com/main/gallery-small/1264941929_Picture-15.jpg
فونت انتخاب شده هم کمی به ویرایش نیاز داشت. که با کم کردن فضای خالی بین حروف کمی اصلاح شد و این کار باعث می شود فضای مساوی در طرف دیگر نیز وجود داشته باشد. فاصله بین کلمات اندکی کم تر شد تا حس ترکیب بیشتری بین حروف ایجاد شود.
http://img.persiangfx.com/main/gallery-small/1264941960_Picture-13.jpg
سپس طرح لوگو و متن با هم ترکیب شدند، به نظر می رسید هنگامی که خط شناور طرح در یک صفحه آرایی عمودی قرار می گیر کاملا با شکل طبیعی متن هم خوانی دارد.
http://img.persiangfx.com/main/gallery-small/1264942036_Picture-14.jpg
در انتها لوگوی نهایی را با چند متغیر دیگر مانند جابجا کردن پس زمینه تیره با یک پس زمینه ی روشن و نیز بکار بردن یک رنگ واحد در شرایط و محل های خاص امتحان شد.
http://img.persiangfx.com/main/gallery-small/1264941498_Picture-6.jpg
در نهایت پس از تکمیل کار، فایل نهایی آن توسط ایمیل به دست مشتری رسانده شد.