عناصر طراحی وب یکپارچهسازی با سیستمعامل

یک لوگوی تایپوگرافی قدیمی دیگر که بر دو رنگ متکی است: نوع سفید روی قرمز. توجه کنید که چگونه هویت بر اساس یک دایره است.

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

منابع رنگ

مجموعه ای از برنامه های کاربردی عالی وجود دارد که به شما کمک می کند طرح های رنگی خود را ایجاد کنید. این مجموعه کوچک چندین مورد از بهترین ها را به اشتراک می گذارد:

• ColourLovers (برنامه وب)
  یک وب سایت دوست داشتنی اختصاصی به طرح های رنگی تم های موجود ایجاد شده توسط انجمن را مرور کنید، یا با آپلود عکس ها، تم های خود را از ابتدا ایجاد کنید.
• Aviary Toucan (برنامه وب)
  یک برنامه وب دیگر ، اما بدون حمایت جامعه مانند ColorLovers. این برنامه به شما امکان می دهد طرح های رنگی را از ابتدا یا از تصاویر وارد شده ایجاد کنید.
• Adobe Kuler (برنامه وب)
  یکی دیگر از برنامه های وب مدیریت رنگ، این بار توسط Adobe همیشه محبوب برای ما آورده شده است. رابط کاربری خیره کننده و آسان برای استفاده است. Kuler میزبان یک انجمن است، و شما می توانید طرح های رنگی با بالاترین امتیاز را مرور کنید.
• جریان رنگی ( برنامه iPhone)
  این برنامه آیفون به شما امکان می‌دهد پالت‌های رنگی را از ابتدا یا از یک عکس وارد شده ایجاد و ذخیره کنید. همچنین می‌توانید با استفاده از طرح‌بندی رنگ داخلی، طرح‌ها را به‌طور خودکار از عکس‌ها ایجاد کنید.
• پالت‌ها (برنامه آیفون)
  پالت ها مشابه Color Stream هستند که به شما امکان می دهند طرح های رنگی را در حال حرکت از ابتدا یا از روی یک تصویر ایجاد و ذخیره کنید. همچنین می توانید رنگ ها را از وب سایت مورد علاقه خود بگیرید.

اگر مبتدی هستید، در اینجا چند مقاله وجود دارد که ارزش بررسی دارد: «انتخاب ترکیبات رنگ” و “تئوری رنگ برای طراحان، قسمت 3: پالت های رنگی خود را ایجاد کنید.”

 

3. عناصر و روندهای تایپوگرافی

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

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

این قطعه تایپوگرافی مورد علاقه شخصی من در این ویترین است. برخی از سبک های قدیمی عالی را با تکنیک های مدرن ادغام می کند. این نوع با افزودن جزئیات ظریف، مانند خط سفید یک پیکسلی در خط “شما صمیمانه دعوت شده اید” و سایه های بسیار مهم در نوع تاریخ زنده می شود.

این تایپوگرافی یکپارچهسازی با سیستمعامل، تکنیک های ساده و شگفت انگیزی را نشان می دهد. نوع «طراحی است» سه بار کپی شده و تغییر مکان می دهد. سپس کپی پایینی بافت می شود تا یک سبک قدیمی دوست داشتنی در عرض چند دقیقه ایجاد شود.

تایپوگرافی بیشتر است که از یک سایه ساده برای افزودن عمق به حروف زیبا و تزئینی استفاده می کند.

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

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

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

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

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

تایپوگرافی سفید در این طرح با تصویر ادغام شده است که گویی در هنگام گرفتن عکس وجود داشته است. این به خوبی با عکس قهوه ای کار می کند.

آموزش های کوچک

نحوه ایجاد تایپوگرافی دستی با استفاده از Adobe، Photoshop یا Illustrator

در این آموزش کوتاه، نحوه تولید، اسکن و بردار کردن سریع نوع طراحی شده با دست خود را با استفاده از Adobe Photoshop و Illustrator خواهید آموخت.

اول از همه، چند حروف را ترسیم کنید:

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

پر کردن خطوط طراحی شده خود را شروع کنید.

شما باید به چیزی شبیه این برسید.

بعد، تصویر خود را اسکن کنید. اگر اسکنر ندارید، می توانید فقط از کار عکس بگیرید – فقط مطمئن شوید که کیفیت بالایی دارد. پس از اسکن یا عکسبرداری تصویر، یک فایل فتوشاپ جدید باز کنید و به File → Place بروید. تصویر را پیدا کرده و در سند خود قرار دهید.

به تصویر ← تنظیمات ← روشنایی/کنتراست بروید. سطح کنتراست را تا حدود 50 افزایش دهید. این باعث تیره شدن رنگ سیاه در تصویر می شود.

فایل خود را به عنوان تصویر ذخیره کنید و Adobe Illustrator را باز کنید. یک فایل RGB جدید ایجاد کنید و سپس به File → Place بروید. تصویر تازه ذخیره شده خود را پیدا کنید و آن را روی بوم خود قرار دهید. در نوار منو در بالای بوم، گزینه Live Trace را انتخاب کنید. متن شما اکنون یک بردار کار است و می‌تواند به دلخواه خود را بزرگ یا کوچک کنید تا در اسناد فتوشاپ شما استفاده شود.

نحوه اضافه کردن تایپوگرافی به عکس شهر با استفاده از Adobe Photoshop

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

عکس را کپی کنید و یک سند فتوشاپ جدید ایجاد کنید. عکس را در سند بچسبانید. ابزار Text را انتخاب کنید و “Barcelona” را در تایپ مورد نظر خود تایپ کنید. به Edit → Transform → Rotate بروید و تایپوگرافی را در یک زاویه بچرخانید تا تقریباً با زاویه ساختمان ها همخوانی داشته باشد.

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

در مرحله بعد، قسمت های همپوشانی نوع خود را حذف کنید. یک بار دیگر، از ابزار Pen برای ایجاد یک انتخاب استفاده کنید. روی عکس خود زوم کنید و اطراف ساختمان و درخت را ردیابی کنید. پس از انجام این کار، کلیک راست کرده و به “Make Selection” بروید. اکنون باید یک خط چین متحرک مانند شکل زیر داشته باشید:

روی لایه تایپوگرافی خود کلیک راست کرده و “Rasterize Type” را انتخاب کنید. این آن را از یک لایه نوع به یک لایه استاندارد تبدیل می کند. با انتخاب همه آنها در حالی که کلید Shift را نگه داشته اید و به Layer → Merge Layers بروید، لایه نوع خود را با اشکال سفارشی که قبلا ساختیم ادغام کنید. انتخابی که در مرحله آخر با ابزار Pen انجام دادیم باید همچنان فعال باشد. با انتخاب لایه تک نوع، کلید Delete را بزنید. این باید تمام متن های همپوشانی را حذف کند.

اکنون زمان ویرایش عکس بسیار ساده است تا نوع شما کمی بهتر ادغام شود. لایه پس زمینه (که باید عکس شما باشد) را انتخاب کنید و به Image → Adjustments → Desaturate بروید تا عکس خود را به مقیاس خاکستری/سیاه و سفید تبدیل کنید. اکنون به Image → Adjustments → Photo Filter بروید. گزینه sepia را از منوی کشویی انتخاب کنید و با نوار لغزنده سطح بازی کنید تا شدت افکت را تنظیم کنید. من حدود 60% را انتخاب کردم.

روی لایه نوع خود کلیک راست کرده و “Blending Options” را از منو انتخاب کنید. روی نوع خود یک پوشش رنگی اعمال کنید. من از قهوه ای روشن استفاده کردم. نتیجه من این است:

چگونه با استفاده از ادوبی فتوشاپ سایه و الگو را روی تایپوگرافی اعمال کنیم

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

ابتدا بیایید الگوی ساده خود را ایجاد کنیم. یک سند فتوشاپ جدید با ابعاد 3×3 پیکسل باز کنید. حالا ابزار Pencil را انتخاب کنید. درست روی بوم خود بزرگنمایی کنید و با استفاده از #000000 مشکی، سه نقطه را به صورت مورب در روی بوم خود قرار دهید، همانطور که در زیر مشاهده می کنید:

به Edit → Define Pattern بروید تا کادر فیلد زیر ظاهر شود. الگوی خود را چیزی مناسب بنامید (من الگوی خود را “Diag Line 1” نامیدم). دکمه “OK” را بزنید. الگوی شما تمام شد!

یک سند فتوشاپ جدید دیگر ایجاد کنید. پس زمینه را با رنگ روشن دلخواه پر کنید و مقداری تایپوگرافی به بوم اضافه کنید. حروفی که من استفاده کردم Helvetica Neue Medium و Helvetica Neue Bold هستند.

متن خود را دوباره انتخاب کنید و رنگ آن را تغییر دهید. چیزی را انتخاب کنید که تضاد خوبی با پس زمینه داشته باشد. تنظیم رنگ متن به جای استفاده از همپوشانی رنگی بسیار مهم است، زیرا بعداً از همپوشانی الگو استفاده خواهیم کرد و متأسفانه نمی‌توانید از هر دو استفاده کنید.

روی لایه نوع خود کلیک راست کرده و “Blending options” را انتخاب کنید تا پنجره Layer Style باز شود. “Pattern Overlay” را انتخاب کنید و از کادر کشویی الگو، الگوی را که قبلا ساخته بودیم انتخاب کنید. حالت ترکیب را به “Overlay” و opacity را به 30٪ تغییر دهید. نتایج بسته به انتخاب رنگ شما متفاوت خواهد بود، بنابراین با خیال راحت آزمایش کنید.

اکنون می‌خواهیم یک سایه داخلی اعمال کنیم. از تنظیماتی که در تصویر زیر مشاهده می شود استفاده کنید:

اکنون یک drop-shadow بسیار ضعیف اما مهم اعمال کنید. توجه به جزئیات کوچک همیشه ارزشش را دارد. از تنظیمات مشابه با آنچه در تصویر زیر مشاهده می شود استفاده کنید:

برای تکمیل تایپوگرافی، متن را به طور کامل کپی می کنیم. روی لایه نوع کلیک راست کرده و گزینه Duplicate layer را انتخاب کنید. ابزار Move را انتخاب کنید، نوع را به جای دیگری در سند خود منتقل کنید، سپس آن را در زیر لایه نوع اصلی خود قرار دهید. کدورت را کم کنید، و کارتان تمام است.

 

4. سبک های ترکیبی

Blending Styles (معمولاً در Photoshop و Illustrator به عنوان Blending Mode شناخته می‌شود) یک راه عالی برای افزودن ابعاد به کار شما بدون تلاش زیاد است. به شما امکان می دهد اشیا و رنگ ها را به روش های مختلف با هم ترکیب کنید. حالت های ترکیبی اغلب با سطوح مختلف کدورت استفاده می شوند. به عنوان مثال، هنگام اعمال یک بافت عکاسی به یک تصویر، که در ادامه به آن خواهیم پرداخت.

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

این قطعه کوچک با حالت‌های ترکیبی مختلف، بافت‌ها، عکس‌ها و اشکال ساده بسته‌بندی شده است که به یک اثر قدرتمند منجر می‌شود.

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

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

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

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

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

همانند عکسی که از ایتالیا دیدیم، این عکس با استفاده از یک لایه پر از رنگ با حالت ترکیبی دستکاری شده است. The style has a layer of different-colored blobs, most likely with an Overlay blending mode applied to them and a lowered transparency.

The circle in the middle of this piece has a blending mode applied to it, allowing the background to show through.

Mini-Tutorials

How to Blend Colors With Photographs Using Adobe Photoshop

In this mini-tutorial, we will apply color to a black and white photograph using the Brush tool and blending modes. I’ll be using this spiderweb photograph.

Open a new Photoshop document, and place the photograph of your choice onto the canvas. I’ve given mine a white border.

Select a soft brush and light color. I’ve chosen a yellow pastel. Create a new layer by going to Layer → New Layer. Paint a large splodge of your color onto the new layer, as seen here:

Repeat the process with more colors. You can paint these colors onto the same layer-there is no need to create new layers.

Once you’ve finished coloring your layer, go to Filter → Blur → Gaussian Blur. Blur the layer to merge those colors a little more. Anything above 100 pixels should be fine, but it depends on the size of your canvas: the bigger the canvas, the more pixels you’ll need to blur it by.

We can now change the blending mode of the layer. From the blending mode drop-down menu in the layers palette, select “Overlay.”

Lower the opacity of your colored layer to around 50%. شما باید با چیزی شبیه به این نتیجه بگیرید:

Experimentation is key; each blending mode changes the final product, meaning you’ll never be able to reproduce a result. The example below uses the blending mode screen, which washes the photograph out and makes it look retro. Experimenting with effects like this is typically how retro Lomo and Holga camera effects are reproduced.

Resources

Below is a small selection of vintage poster tutorials that make use of blending styles:

 

5. Texture and Noise

Texture and noise add visual interest to your work. In some cases, a design simply doesn’t look right without them. In other cases, the texture and noise can be too much. Below are a few examples of retro designs that work well with texture.

A canvas-style photographed texture is used in this piece, giving the overall design a lovely worn-out look.

This clean texture ultimately produces a clean design. The retro look is achieved with a light grunge brush to remove some areas of the logo and typography.

Paper texture has been used excessively in this piece to produce a worn-out vintage-looking digital piece of work.

Similar to the last example, a paper texture has been used to make the artwork look like an old poster. A dark texture is also placed over top of the boxer’s silhouettes.

A combination of wood, recycled paper and coffee stain textures have been used here to produce a really awesome effect. A blending mode has been applied to the layer that the character is on, allowing the texture to show through.

The texture in this web design is minimal and subtle, yet nonetheless it contributes significantly to the visual interest of the overall work.

Texture is used here to liven up the background and typography. The simplest of textures but still so effective.

Texture has been used minimally to liven up this illustration, give it depth and make it more appealing to the eye.

Here’s a piece that just wouldn’t look the same without texture: the background, illustration and typography are all textured.

This piece is fairly different from the others in this showcase; the texture isn’t a photograph but a vector image.

Resources

The list below contains links to several great websites where you can download textures-both premium and free-to use in your work:

• TextureVault
  A premium marketplace especially for downloading individual textures. The price varies depending on the size of texture.
• Lost & Taken
  A great blog that posts some of the best textures around. Some really high-quality stuff here. You can also view the textures in a gallery.
• CG Textures
  Probably one of the largest texture galleries around. Thousands of images are available for free.
• TextureLovers
  TextureLovers is basically a gallery of textures from all over the web. It’s a great place to go if you’re not sure where to look, because it showcases textures from a variety of websites.

 

6. Image Cropping and Layer Masks

Image cropping and layer masks are effective for adding extra elements to a work. Why include an entire photograph when you can just show what you need or style it to match the rest of the work? Simplicity is key in retro design.

This piece makes great use of texture and typographic effects and cleverly uses a layer mask to round off an image of the galaxy. It looks superb.

This retro piece uses not only retro-masked photographs, but also circles, strokes, blending modes and a limited color scheme-virtually all of the main elements covered in this article.

This piece is ultra-minimalist but looks great. The images are masked into circles and very noisy, giving it a great retro-futuristic look.

Below are a few tutorials on cropping photos and using Photoshop layer masks:

Written exclusively for WDD by Callum Chapman, a designer and illustration trading as Circlebox Creative. He also runs The Inspiration Blog and Picmix Store

Share your vintage and retro designs and illustrations with us, as well as any articles or tutorials that might help your fellow readers.