Retro Design on Speckyboy Design Magazine https://speckyboy.com/topic/retro-design/ Design News, Resources & Inspiration Wed, 27 Dec 2023 14:48:06 +0000 en-US hourly 1 30+ Best Free Blackletter & Gothic Fonts for 2024 https://speckyboy.com/free-gothic-fonts/ https://speckyboy.com/free-gothic-fonts/#comments Tue, 07 Nov 2023 09:45:56 +0000 http://speckyboy.com/?p=29895 An extensive collection of free Gothic fonts. These fonts can be very useful for adding a dark vintage charm to your projects.

The post 30+ Best Free Blackletter & Gothic Fonts for 2024 appeared first on Speckyboy Design Magazine.

]]>
Gothic fonts are unusually attractive, making them a popular choice in branding and design projects. They typically belong in the sans-serif category and derive inspiration from the Gothic era. Gothic fonts are akin to Gothic architecture and are best suited for vintage or retro designs.

Many words describe Gothic fonts: grotesque, mysterious, grunge, artistic, blackletter, etc. Regardless of the description, Gothic fonts certainly add character to your designs. They can make your design appear bolder or spookier if you’re working on a Halloween-themed design.

Gothic fonts can also add a touch of elegance and a timeless quality if you opt for more complex and elaborate versions. They can be used for t-shirt and poster designs, and logo and branding materials, book covers, and more.

To make your Gothic font stand out, pair it with a simple and clean secondary typeface. Not only will this create more contrast, but it will also allow the Gothic font to carry the entire design.

We’ve rounded up the best Gothic fonts from around the web in this collection. You’ll notice modern and edgy Gothic fonts as well as classic, blackletter Gothic fonts. They can be used in a variety of projects, from simple logos to movie or promotional posters so take advantage of this collection and fill up your designer toolbox with these high quality, free Gothic fonts. As always, check the licensing for each font and then get creative!


What is a Gothic Font?

Gothic fonts, also known as blackletter or medieval fonts, are a style of typefaces characterized by their ornate and intricate letterforms that were historically used in manuscripts, books, and inscriptions during the Middle Ages and Renaissance.

Here are some key characteristics of gothic fonts:

  1. Historical Origins: Gothic fonts originated in the medieval period and were widely used for handwritten manuscripts and inscriptions in Europe. They were the prominent typography style before the printing press’s invention.
  2. Distinctive Letterforms: Gothic fonts are known for their highly decorative and angular letterforms. They often feature sharp angles, pointed serifs, and intricate details that create a distinct visual impact.
  3. Subcategories: Gothic fonts can be categorized into different substyles, including Textura, Fraktur, and Schwabacher. Each substyle has unique characteristics and variations in letterform design.
  4. Evocative Aesthetics: These fonts evoke a sense of history and an old-world charm. They often carry an air of sophistication and elegance.
  5. Usage Evolution: While Gothic fonts were originally used for religious texts and manuscripts, they found new life in the early days of printing and were used for books, signage, and official documents.
  6. Modern Adaptations: Contemporary Gothic fonts blend traditional elements with modern design sensibilities, making them suitable for various design projects, including logos, posters, and branding.
  7. Cultural and Geographical Diversity: Different European regions developed their own variations of Gothic fonts, resulting in various styles influenced by cultural and geographical factors.
  8. Associations: Gothic fonts are often associated with themes of history, fantasy, horror, and mystery. They’re commonly used for book covers, movie titles, and designs that aim to evoke a vintage or medieval atmosphere.
  9. Challenging Legibility: Some Gothic fonts can be challenging to read due to their ornate and intricate design, especially in smaller sizes. Designers should consider the legibility factor when using these fonts.
  10. Artistic Expression: Gothic fonts offer designers a unique canvas for creative expression, allowing them to convey a sense of timelessness and cultural depth in their designs.

The post 30+ Best Free Blackletter & Gothic Fonts for 2024 appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-gothic-fonts/feed/ 5
50+ Best Free Photoshop Actions for 2024 https://speckyboy.com/50-free-photoshop-actions/ https://speckyboy.com/50-free-photoshop-actions/#comments Tue, 10 Oct 2023 10:15:24 +0000 http://speckyboy.com/?p=57344 With these free Photoshop actions, you will be able to save time editing photos, freeing you up for your real work - being creative.

The post 50+ Best Free Photoshop Actions for 2024 appeared first on Speckyboy Design Magazine.

]]>
Designers, photographers, and digital artists spend many hours working in Photoshop, whether designing, editing photos, or creating art. As a professional in these fields, you may receive photos from clients that require touch-ups or have to edit your own photographs. In both cases, Photoshop actions can be extremely useful for streamlining repetitive tasks and achieving specific, and often stunning, photo effects quickly.

Actions are pre-recorded sets of instructions that automate the process of applying a sequence of edits to an image. By using actions, you can create complex photo effects with just a few clicks, saving you time and effort. Countless actions are available for free, but finding high-quality ones can sometimes be challenging.

We’ve curated a collection of fifty Photoshop action packs that are all available for free. These actions will give you the tools you need to apply various effects to your photos, from matte and film to vintage styles, stunning black and white conversions, and even HDR.

With these actions in your toolkit, you’ll be able to save time while editing your photos and won’t have to spend hours scouring the web for high-quality free actions. Whether you’re a professional photographer or a designer, these actions will help you achieve the look you want without spending hours on each individual photo.


The post 50+ Best Free Photoshop Actions for 2024 appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/50-free-photoshop-actions/feed/ 2
15+ Free Vintage & Retro Brush Packs for Photoshop https://speckyboy.com/free-vintage-antique-brush-packs-adobe-photoshop/ https://speckyboy.com/free-vintage-antique-brush-packs-adobe-photoshop/#respond Sat, 07 Oct 2023 20:01:24 +0000 https://speckyboy.com/?p=105556 Enhance your design projects with a touch of nostalgia using these free vintage and antique brushes for Adobe Photoshop.

The post 15+ Free Vintage & Retro Brush Packs for Photoshop appeared first on Speckyboy Design Magazine.

]]>
Vintage and antique brushes can add a touch of timeless charm to any design project. Whether creating a retro-inspired poster or revamping a classic logo, the right vintage brush can bring your vision to life.

With the abundance of free vintage and antique brushes available online, designers have a vast array of options to choose from. From distressed textures to hand-drawn illustrations, these brushes can evoke a sense of nostalgia and add depth and character to any design.

Not sure where to start? Take a look at our collection of vintage and antique brushes for inspiration. You will find a range of styles, from intricate pen and ink drawings to retro postcards and stamps. Use them to create vintage-inspired logos, greeting cards, invitations, and more.

Whether a professional designer or just starting out, vintage and antique brushes are a great addition to your toolkit. So why not experiment with them and see what you can create?


The post 15+ Free Vintage & Retro Brush Packs for Photoshop appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-vintage-antique-brush-packs-adobe-photoshop/feed/ 0
20+ Best Photoshop Actions for Retro & Vintage Effects https://speckyboy.com/retro-vintage-effects-photoshop-actions/ https://speckyboy.com/retro-vintage-effects-photoshop-actions/#respond Wed, 04 Oct 2023 18:37:37 +0000 https://speckyboy.com/?p=117564 Transform photos and graphics into vintage-inspired pieces with ease using our collection of the best Photoshop actions for creating retro and vintage effects.

The post 20+ Best Photoshop Actions for Retro & Vintage Effects appeared first on Speckyboy Design Magazine.

]]>
Get ready to step back in time and explore the captivating world of vintage and retro aesthetics. Whether you’re a photographer, designer, or simply a lover of vintage charm, our collection of the best Photoshop actions for creating retro and vintage effects will take your photos and graphics to the next level.

Our selection of vintage-inspired actions offers a range of filters to enhance your photos with soft palettes, gentle fades, and other unique effects. From landscape photography to portraits, you can create stunning and authentic photos and graphics that exude vintage charm with just a few clicks.

We’ve curated a collection of the most useful and versatile Photoshop actions and presets to streamline your workflow and help you achieve your creative vision effortlessly. So, if you’re looking to add a vintage touch to your photos and graphics, take a look at our collection and find the perfect Photoshop action for your next project. It’s time to embrace the magic of vintage and retro aesthetics!

If you’re looking for more vintage or retro resources, you might like our free collections of Photoshop brushes, vector templates, or fonts.


What are Retro & Vintage Effects?

Retro and vintage effects are a creative technique that takes you back in time by giving your photos a nostalgic and aged look. It aims to capture the charm and character of earlier eras, adding a touch of history and sentimentality to your images.

To achieve the retro and vintage effect, photographers often use Photoshop actions. They act as pre-made adjustments that can be applied to photos quickly and easily. They allow you to manipulate factors like color tones, contrast, and grain to mimic the appearance of older photographs.

Whether you want to evoke the feel of a vintage postcard, recreate the look of an old family album, or bring the essence of a bygone era to your modern images, retro and vintage actions can help you do that. By using them thoughtfully, you can create photos that tell stories of days gone by, making your images visually appealing and emotionally resonant.

Retro & Vintage Effect Actions for Creatives

Vintage Cinematic Photoshop Actions

Give your photos a nostalgic look with these vintage cinematic Photoshop actions and presets for Lightroom. This massive bundle composed of 50 assets offers vintage film colors, dark filters for night photos, vibrant and saturated effects, and more. You’ll also get vintage LUTs for video editing.

Vintage Cinematic Photoshop Actions

Retro Photo Kit for Photoshop

Light leaks, date stamps, and more! This retro Photoshop action collection has everything you need for nostalgic and funky images. You’ll get 15 retro film Photoshop actions inspired by vintage camera styles, ten light leak overlays, and more. If you love retro, add this pack to your kit!

Retro Photo Kit for Photoshop

Indie Camera Photoshop Actions

Capture gorgeous shots, and then add some indie charm to them. These indie Photoshop actions come with 17 actions, over 110 gradient maps, and 21 PNG effects for light leaks. You’ll create a nostalgic atmosphere for your images, perfect for portfolios, magazines, and social media!

Indie Camera Photoshop Actions

Perfectum Vintage Watercolor Photoshop Actions

Turn your images into watercolor art, or simply create a vintage atmosphere with these highly detailed vintage watercolor and pencil Photoshop actions. You’ll get brushes, patterns, 20 presets, and everything you need for creating compelling images. All it takes is one click, and you’ll be set!

Perfectum Vintage Watercolor Photoshop Actions

Analog & Retro Photoshop Actions

Get the authentic analog and retro contrasts and vignetting with these Photoshop actions. You’ll get 10 Photoshop actions to create an analog and retro atmosphere in your images, which is perfect for portfolios, magazines, and social media. You’ll get subtle tones that will amaze your audience.

Analog & Retro Photoshop Actions

Vintage Photoshop Actions

All you need to travel back in time is Adobe Photoshop and these vintage actions. This collection of vintage Photoshop actions helps you transform your standard images into vintage works of art. You can fine-tune the actions’ details to get old camera effects or create a full-on masterpiece.

Vintage Photoshop Actions

Retro & Vintage Photoshop Actions

From the faded ’60s to the vibrant ’70s, this set of retro Photoshop actions has every look you’d ever want! You’ll get seven editable Photoshop actions and textures and light leak overlays. Easily create a beautiful lookbook, image, or poster!

Retro & Vintage Photoshop Actions

Retro Colorful Text Effects for Photoshop

Elegant and authentic, these retro text effects for Photoshop are perfect for your next project that draws inspiration from the 50s and 60s aesthetics. You’ll get ten unique 3D styles, and they’re 100% editable, so you can fine-tune all the little details.

Retro Colorful Text Effects for Photoshop

Lomocam Retro Photo Generator

Create polaroids without a Polaroid camera! This Lomo cam retro photo generator helps you tweak all the little details to create vibrant Lomography results. You’ll get 31 film effects that mimic the original Polaroid photos perfectly. You can also pick a colorful frame and add special effects like a fisheye.

Lomocam Retro Photo Generator

Vintage Art Photoshop Action

Transform your image into a work of art with this vintage art Photoshop action. With brushes, splashes, and color grading, you’ll easily create a vintage atmosphere from even the most modern photos. You can use them for books and magazines to social media and marketing campaigns.

Vintage Art Photoshop Action

Vintage Wedding Photoshop Actions

Perfect for wedding photographers, these vintage Photoshop actions will give your clients an unforgettable wedding album. This vintage wedding Photoshop action will give your original shots a soft atmosphere. It works best with natural light, and you just have to press ‘Play’ to apply it to your images.

Vintage Wedding Photoshop Actions

Light Leaks Photoshop Presets

Give your photos a retro feeling with these light leaks Photoshop presets. This particular light effect works best for vintage and retro-themed photos, but it can also be a great addition to adventure photos. You’ll get 25 light leak effects to work with and amaze your audience.

Light Leaks Photoshop Presets

Animated Retro Vintage Film Photoshop Actions

If you want to create gorgeous retro videos, you don’t have to travel back in time with your camera. You just need these animated retro vintage film Photoshop actions. You’ll get 24 different color options with animated light leaks, camera shakes, and other important atmospheric details.

Animated Retro Vintage Film Photoshop Actions

Vintage Photo Effect Actions

Create awesome vintage photos and graphics without spending days in Photoshop. Simply download these vintage photo effect actions, and you’ll get the unmistakable vintage charm after just one click. These vintage Photoshop actions are perfect for a variety of purposes, from stylish fashion editorials to engaging social media.

Vintage Photo Effect Actions

Retro Text Photoshop Actions

Stylish and authentic, these retro and vintage text Photoshop actions are perfect for flawless typography. You’ll get 18 high-quality Photoshop actions that offer creative text effects for a variety of projects, from flyers and posters to cinematic titles and covers. You can easily use them via smart objects.

Retro Text Photoshop Actions

Vintage Text Effects

Create gorgeous flyers, covers, and other materials with these vintage text effects. You’ll get nine different styles to work with, from old-school cafe signs to funky 3D text effects. You can easily add your own content in just a few clicks with the smart objects system in Photoshop.

Vintage Text Effects

Vintage & Retro Color Effects for Photoshop

Get the toning just right with these vintage and retro color effects for Photoshop! These 21 effects work as Photoshop actions, so all you have to do is play them, and you’ll be set! You’ll also get unique effects such as vignettes, noise effects, and more.

Vintage Retro Color Effects Photoshop

Retro Art Photoshop Action

Turn your original photos into works of vintage art with this retro art Photoshop action. In just a few clicks, you’ll completely transform your images into masterpieces, complete with vintage splashes, typography, effects, and colors. This is a plug-and-play; you just have to apply the action.

Retro Art Photoshop Action

Vintage Film Photoshop Actions

These vintage film Photoshop actions are perfect for professional photoshoots and magazine photos. You’ll get 10 Photoshop actions to convey a vintage atmosphere while retaining the beauty of your original shots. They were inspired by films such as Agfa, Fujifilm, and Kodak, with grain and vintage effects.

Vintage Film Photoshop Actions

Retro Print Photoshop Actions

Create retro prints with these Photoshop actions. Inspired by retro art, this collection includes brushes and patterns to create unique images. All you have to do is brush over the parts of the image that you want to transform and play the action. Take your audience’s breath away!

Retro Print Photoshop Actions

A Touch of Retro & Vintage Charm

Our collection of the best Photoshop actions for creating retro and vintage effects has everything you need to add a touch of vintage charm to your photos and graphics. Whether you’re inspired by the funky charm of the 70s or the typography of earlier eras, our actions offer a range of filters to achieve a variety of vintage effects effortlessly.

These versatile and user-friendly actions streamline your workflow and make the editing process quick and effortless. Explore our collection today and start creating stunning and authentic vintage-inspired pieces that capture the essence of the past. With just a couple of clicks, you can transform your work into beautiful and timeless pieces of art.

How to Install & Use Photoshop Actions

Installing Photoshop actions is a straightforward process that can help enhance your photo-editing skills. Here’s a simple guide to help you get started:

  1. Open Photoshop: Launch the program if it’s not already open.
  2. Locate Actions Panel: In Photoshop, you’ll find the Actions panel. You can usually find it by going to the Window menu and selecting Actions.
  3. Load Actions: Go to the Actions panel. Click on the little menu icon (usually represented by three horizontal lines or dots) at the top-right corner of the panel. From the dropdown menu, select Load Actions. A file dialog box will appear. Navigate to the location where the .atn file is saved, select it, and click Load.
  4. New Actions Set: Once you’ve loaded the actions, you’ll see them appear in the Actions panel as a new set. The set will have a folder icon and the name of the action set.
  5. Apply Actions: To use the installed actions, open an image you want to edit in Photoshop. Then, select the action you want to apply from the list in the Actions panel.
  6. Run the Action: Click on the action name, and you’ll see a play button at the bottom of the Actions panel. Click this button, and Photoshop will automatically apply the selected action to your image.
  7. Adjust Settings: Some actions may have customizable settings. If so, you can double-click on the action name to access these settings and make adjustments as needed.
  8. Save Your Work: Once you’re satisfied with the edits made by the action, make sure to save your image using the File menu in Photoshop.

More Photoshop Action Collections

The post 20+ Best Photoshop Actions for Retro & Vintage Effects appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/retro-vintage-effects-photoshop-actions/feed/ 0
20+ Best Free Vintage & Retro Fonts for Designers in 2024 https://speckyboy.com/free-retro-fonts/ https://speckyboy.com/free-retro-fonts/#respond Thu, 28 Sep 2023 17:03:51 +0000 https://speckyboy.com/?p=104334 Discover the best free retro and vintage fonts for creatives that will add a timeless and nostalgic touch to your design projects.

The post 20+ Best Free Vintage & Retro Fonts for Designers in 2024 appeared first on Speckyboy Design Magazine.

]]>
In design, there are some trends that never lose their appeal. Vintage and retro styles fall into this category, as they have a timeless charm that resonates with people of all ages.

At the heart of this enduring style lies vintage and retro fonts. These fonts transport us back in time, conjuring up nostalgic emotions, a sense of history, and quality craftsmanship. They act like time machines, preserving the essence of past eras.

As we journey through the annals of design history, we’ve curated a collection of free retro and vintage fonts. Each font serves as a window to a different era, offering distinctive styles and intricate details that are hard to come by elsewhere. Our aim is to equip you with a diverse array of fonts that infuse a touch of the past into your contemporary projects.

Whether you’re working on a logo design, poster, website, or any other project needing a hint of vintage allure or retro flair, this collection of free fonts is for you.


What are Vintage or Retro Fonts?

Defining a vintage or retro style font is like peering through a window into the past of design. They are all about capturing the look and feel of earlier times, often decades ago. Let’s break it down:

  1. Time Travel Aesthetics: Vintage and retro-style fonts transport us back in time, much like a historical photograph or an old movie. They have a distinct appearance reminiscent of a particular era, such as the 1950s, 1970s, or even the roaring ’20s.
  2. Nostalgic Charm: What makes these fonts unique is their ability to evoke a sense of nostalgia. They tap into the feelings of days gone by, triggering memories and emotions. They have an authenticity about them that makes them endearing.
  3. Distinctive Features: Vintage and retro fonts are known for certain signature features. They might have ornate serifs, unusual letter shapes, or a handcrafted look. These characteristics set them apart from the more modern and straightforward fonts you commonly see today.
  4. Era-Specific Styles: They can vary widely depending on the era they’re inspired by. Fonts from the ’60s might have a psychedelic feel, while fonts from the ’80s might be bold and vibrant.
  5. Cultural Influence: They often reflect the cultural and design trends of their time. They might draw inspiration from music, fashion, or art movements that were prevalent during a particular period.

Vintage and retro-style fonts are like time machines for your design, transporting your audience to a different era and evoking a sense of history and nostalgia. They are fonts with character, each telling a unique story from the past, making them a valuable tool your designer’s toolbox.


The post 20+ Best Free Vintage & Retro Fonts for Designers in 2024 appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-retro-fonts/feed/ 0
20 High-Quality Free Retro & Vintage Vector Templates https://speckyboy.com/free-retro-vintage-vector-templates/ https://speckyboy.com/free-retro-vintage-vector-templates/#comments Mon, 07 Aug 2023 00:19:02 +0000 http://speckyboy.com/?p=6202 To celebrate retro and vintage design, we have created this collection of free vector templates to help you create your own nostalgic designs.

The post 20 High-Quality Free Retro & Vintage Vector Templates appeared first on Speckyboy Design Magazine.

]]>
From the 1930s to the 1980s, pop culture design underwent a cultural revolution that continues to inspire designers today. Retro and vintage design is a unique and timeless representation of this era, combining humor, boldness, and nostalgia in a way that never goes out of style.

While design trends may come and go, retro and vintage design has remained evergreen, remaining popular with designers of all kinds. Its ability to capture the essence of a bygone era makes it a favorite among many.

To celebrate the beauty of retro and vintage design, we’ve assembled a collection of high-quality free vector templates for you to use in your nostalgic designs.

The collection includes badges, labels, logos, patterns, icons, backgrounds, and other illustration templates. Whether creating a vintage-inspired poster or a throwback logo, these Illustrator resources will help you achieve the perfect retro look. So why not download them today and start exploring the possibilities?

You might also like our collections of Retro Photoshop Actions, Vintage Brushes, or these Retro Fonts.


The post 20 High-Quality Free Retro & Vintage Vector Templates appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-retro-vintage-vector-templates/feed/ 4
8 CSS & JavaScript Snippets That Recreate Retro Computers https://speckyboy.com/css-javascript-snippets-retro-computing/ https://speckyboy.com/css-javascript-snippets-retro-computing/#respond Sat, 14 Jan 2023 07:52:21 +0000 https://speckyboy.com/?p=143232 A collection of CSS and JavaScript snippets that celebrate retro computing. The Commodore 64, the original Mac, Windows 95, and much more.

The post 8 CSS & JavaScript Snippets That Recreate Retro Computers appeared first on Speckyboy Design Magazine.

]]>
Everyone’s computing journey had to start somewhere. And depending on when you booted up your first device, things have likely changed quite a bit. The latest hardware and software innovations may leave those early systems in the dust. But the fond memories never fade.

Therefore, it’s no surprise that web developers would continue to pay homage to the past. Retro computers played a role in who we are. Some of us learned to code on them, while others experimented with early image editing apps (hello, Microsoft Paint). Oh, and the games were pretty fun too.

We’ve rounded up eight CSS and JavaScript snippets that celebrate retro computers. Not only can you admire the designs of the day, but you can even interact with some of them. Whether you want to recall an old favorite or discover the way things used to be, this collection is for you.


The post 8 CSS & JavaScript Snippets That Recreate Retro Computers appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/css-javascript-snippets-retro-computing/feed/ 0
8 CSS & JavaScript Snippets That Celebrate Old School Technology https://speckyboy.com/snippets-old-school-tech/ https://speckyboy.com/snippets-old-school-tech/#respond Mon, 10 Oct 2022 07:23:28 +0000 https://speckyboy.com/?p=104733 After reaching a certain age, you'll find yourself revisiting the technology that was part of your younger life. Suddenly you pine for the VCR or the C64.

The post 8 CSS & JavaScript Snippets That Celebrate Old School Technology appeared first on Speckyboy Design Magazine.

]]>
One of the more fascinating things that happen to us in adulthood is the emerging feeling of nostalgia. We think about the TV shows we watched, the games we played and the places we visited. Even if you didn’t care much for something at the time, the memories are nonetheless enjoyable.

And, when you reach a certain age, you might find yourself wanting to revisit the technology that was such a part of your life. Yes, suddenly you pine for the days of the VCR or that ancient Commodore 64.

As silly as it may seem, many of us just love these old hunks of junk. The design community especially holds them in high esteem, as you’ll see from the excellent code snippets below.



The Original All-In-One by Andreas Pihl Jrgensen

These days, computer manufacturers love to tout their all-in-one systems. But back in the day, everything was that way (albeit in a massive, immovable package).

This example pays homage to those old computers in 3D. Just use the included sliders to rotate your view.

See the Pen 3D isometric vintage computer Html+CSS with rotating controls by Andreas Pihl Jrgensen

Distorted Playback by Clément Roche

Before the DVR came in with its crystal-clear HD playback, there was the humble VCR. Depending on your home entertainment setup, you could record your favorite show after performing approximately ten agonizing steps.

When it was time to watch, you were then treated to playback that featured jagged horizontal lines – just like the ones in this snippet.

See the Pen VHS overlay by Clément Roche

A Gaming Icon Becomes an Icon by Avaz Bokiev

The Nintendo Gameboy may seem a little quaint when compared with the likes of the Switch. But it revolutionized portable gaming. Take as many mini-cartridges with you as you like (and a few boxes of batteries) and play all the way to Grandma’s.

The beautiful irony of this example is that the system is reimagined as an iOS app icon – the new portable wonder.

See the Pen Pure CSS Nintendo Gameboy iOS icon by Avaz Bokiev

May I Have This Breakdance? by David McFeders

In the olden days, we wanted everyone to hear our music.

The boombox was the perfect way to make it happen. It was portable (even if a bit heavy) and was incredibly loud. To relive the experience, hit the play button on this snippet and get down to some fresh beats.

See the Pen Old School by David McFeders

It’s a Phone – For Your Car! by Adam Kuhn

It’s a safe bet that we take our smartphones for granted. Yet, even the cheapest ones can do things we never imagined back in the 1990s.

Take, for example, this gigantic monstrosity that passed for high-tech. There was no texting, no screen – it was just meant for voice communication. Even if you’ve never seen one in person, this snippet lets you explore the device in eye-popping 3D.

See the Pen #dailycssimages 036 by Adam Kuhn

I Made You a Mixtape by Louis Coyle

The original Sony Walkman took the big, bulky cassette player and put it in your pocket (you just need massive pockets).

This piece of tech history brought the concept of a “personal” music player mainstream. Here, you can explore an interactive facsimile with working buttons and even a removable cassette.

See the Pen Original Sony Walkman TPS-L2 by Louis Coyle

When Your TV Was Also Your Monitor by The Brutal Tooth

In the early days of home computing, televisions often pulled double-duty as monitors. Of course, the potential for screen burn-in meant that you might forever be reminded of how bad an idea this was.

This fun example shows off a Commodore 64 error screen, complete with a retro TV set.

See the Pen C64 Scroller on TV by The Brutal Tooth

Meet Me at the Arcade (and Bring Lots of Money) by CreateJS

Some of the best old-school tech never made it into most homes. But the arcade was one place you were sure to find the best graphics and sound of the day.

The full-sized games, like this incredible 3D Pacman machine, were large enough to house all the necessary equipment. No wonder it was so popular.

See the Pen CreateJS:Pac-Man Cabinet (CSS)! by CreateJS

How the Old Inspired the New

It’s no surprise that much of this technology still holds an influence. For the web design community, it’s less about the hardware and software advancements – although they are certainly of great importance.

The real influence can be found in the areas of UI and UX. For many of us, these devices were our first taste of interacting with a screen. Gaming machines, for example, needed to have a dead-simple UI and be intuitive enough that anyone could play.

On the other hand, clunky interfaces (like that of the VCR) were lessons in frustration. Thinking about the less-than-ideal ways to perform various tasks help us to more fully appreciate the technology that made things easier.

Overall, the items above were not only fun, but they have also inspired us to create a better user experience. It’s almost like they were preparing us for this career path all along.

The post 8 CSS & JavaScript Snippets That Celebrate Old School Technology appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/snippets-old-school-tech/feed/ 0
10 Retro Video Games Recreated with HTML, JS & CSS https://speckyboy.com/retro-video-games-html5-js-css/ https://speckyboy.com/retro-video-games-html5-js-css/#respond Tue, 13 Sep 2022 20:06:39 +0000 https://speckyboy.com/?p=96788 A collection of classic video games that have been recreated with HTML, CSS, and JavaScript. Pac-Man, Super Mario Bros, Sonic, and more.

The post 10 Retro Video Games Recreated with HTML, JS & CSS appeared first on Speckyboy Design Magazine.

]]>
Retro games still bring a smile to fans both young and not-so-young. That was evidenced by the wild popularity of the NES Classic Edition and the Super NES Classic Edition, among others. Heck, even Atari has announced plans for a console.

People love the simplicity of a pick-up-and-play game. They also love the childhood memories associated with old school titles. Plus, the thought of making new memories by playing with friends and family is still a strong draw.

Designers in particular seem eternally gaga over the likes of Mario, Pokémon, and Sonic. In fact, a jaunt through CodePen shows us there are several odes to classic video games made with good old HTML5, CSS, and JavaScript. Here are 10 of our favorites:



CSS Q*bert by Patrick Cox

The strange little orange creature named Q*bert was all the rage back in the 1980s, even starring in his own Saturday morning cartoon. While this is just a CSS animation, any mention of Q*bert is a good thing.

See the Pen CSS Q-Bert by Patrick Cox

Enduro HTML5 Game by Rafael Castrocouto

Enduro is a racing game originally released back in 1983 for the Atari 2600. No worries if you don’t have a spare cartridge at home – you can play a recreation of the game with this HTML5 version!

See the Pen Enduro – Atari – Html5 Game by rafaelcastrocouto

Media Query Super Mario Bros. by Ashley Watson-Nolan

CodePen is absolutely full of Mario-related goodness. Unfortunately, there’s no way to spotlight all of them. But Media Query Mario is one of the coolest tributes we’ve seen. It’s an animated remake of Super Mario Bros. 3. The only catch is that you have to resize your browser to between 320 and 420 pixels to watch.

See the Pen Media Query Mario by Ashley Watson-Nolan

CSS Sonic the Hedgehog by Ryan Petersen

Nothing said Sega like good old Sonic. Originally introduced back in 1991 for the Sega Genesis console, the little blue guy sped his way into many hearts (where, like Mario, he still resides). He’s also kept up his endurance, as seen in this CSS animation.

See the Pen CSS Sonic the Hedgehog 2:Chemical Plant Zone by Ryan Petersen

The Legend of Zelda by Stix

Zelda was one of those games you could play for hours on end. Thanks to the original’s battery backup included on the cartridge, it was one of the few games of the era that let you save your progress. Here we see Link repurposed nicely for a 404 screen.

See the Pen Retro Error 404 – Zelda 2 by Stix

Asteroids by Artem N

A true classic, Asteroids goes all the way back to 1979. And it’s still just as addictive as it was back in the day. It goes to show fancy graphics only get you so far. You can play right from your browser with this HTML5 Canvas version.

See the Pen Asteroids by Artem N

HTML5 Pac-Man by Hellokatili

The little yellow dot-eater is one of the most recognizable game characters of all time. He (and later, his lady friend) became an arcade sensation. Here, you can chew up dots and outrun ghosts in your browser with this fun HTML5 offering.

See the Pen HTML5 Pacman by hellokatili

Galaxian by Adonis Domingues Vieira

Another spaceship shooter from the ‘70s (1979, to be exact), Galaxian was one of the rare games for its time that was as fun to play at home as it was in the arcade. The otherworldly sound effects were great for driving parents to insanity. Here’s a HTML5/JS edition.

See the Pen Galaxian by adonis domingues vieira

JavaScript Pong by Gabriel Dubé

If you had Pong in your home, you probably got bored after about 20 minutes. But, as one of the first really significant video games, it paved the way for everything to come. Enjoy a JS version of the game below.

See the Pen Pong game with JavaScript by Gabriel Dubé

HTML5 Canvas Pokémon by Panagiotis Vourtsis

Pokémon is the second best-selling game franchise of all time – trailing only Mario. From its humble beginnings for the Nintendo Game Boy, all the way to the hysteria of Pokémon Go, the franchise has remained a cultural phenomenon. Below is a decidedly retro HTML5 Canvas game.

See the Pen HTML5 canvas games – POKEMON ! by panagiotis vourtsis

Going Back to the Future

It’s amazing to think that, decades after their debuts, these games still resonate. But not only are the examples above a testament to the power of classic games, but it also shows how far web development has come in a relatively short amount of time.

Complex games and animations can now be created on the web with just a bit of code. Now, who’s up for some Pac-Man?

The post 10 Retro Video Games Recreated with HTML, JS & CSS appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/retro-video-games-html5-js-css/feed/ 0
20 Free High-Quality Vintage, Antique & Retro Texture Packs https://speckyboy.com/vintage-texture-packs/ https://speckyboy.com/vintage-texture-packs/#respond Wed, 14 Oct 2020 06:46:28 +0000 http://speckyboy.com/?p=29659 We have collected the best free high-quality vintage, antique, and retro texture packs. Paper, grainy, grungy, and many more textures.

The post 20 Free High-Quality Vintage, Antique & Retro Texture Packs appeared first on Speckyboy Design Magazine.

]]>
Photoshop textures are a great resource to have in your design library as they can quickly transform your design. The Internet offers thousands of Photoshop textures, ranging from grunge to gold foils to metallic textures. You’ll also find Photoshop textures that were designed to mimic a certain past era in design. These textures are referred to as vintage or retro textures.

Vintage and retro textures for Photoshop are a very popular design resource. They symbolize nostalgia for times long past and are a great choice to spice up any design that wants to convey that nostalgic feeling. They are also a great choice for branding project related to a business with a long-standing tradition. It’s not uncommon to encounter vintage and retro elements in designs related to food or nature industry.

When it comes to Photoshop textures, you can mix them and match them to create an intricate and complex design. Or you can use just one texture on top of your design to keep things simple. But before you can use textures in your projects, you need to create them or download them. Downloading is usually a smarter option as it allows you to save hours of time.

In most cases, you can download Photoshop textures for free and in this post, we’ve gathered the best high-quality vintage, antique, and retro texture packs for Photoshop. You’ll find vintage paper textures, grainy and grungy textures, floral textures, and many others. In short, there’s a texture for every type of project so check it out below and get to downloading!



Vintahe (Free, 3 Textures)

Vintahe 3 Textures

15 Grandpas Texture (Envato Elements, 6 Textures, 4200×2800px)

15 Grandpas Texture

50 Vintage Grain Textures (Envato Elements, 6 Textures, 4200×2800px)

50 Vintage Grain Textures

Vintage Texture Pack (Free, 5 Textures)

Vintage Texture Pack 5 Textures

Vintage Texture (Envato Elements, 6 Textures, 4200×2800px)

Vintage Texture

Big Vintage Textures 13 (Free, 6 Textures)

Big Vintage Textures 13 6 Textures

Vintage flower digital paper pack (Envato Elements, 6 Textures, 4200×2800px)

Vintage flower digital paper pack

Vintage Paper (Free, 9 Textures)

Vintage Paper 9 Textures

Vintage Grit Textures (Envato Elements, 6 Textures, 4200×2800px)

Vintage Grit Textures

Vintage Texture Set 2 (Free, 12 Textures)

Vintage Texture Set 2 12 Textures

Vintage Background Textures Pk2 (Free, 20 Textures)

Vintage Background Textures Pk2 20 Textures

Victorian Grunge Texture Pack (Free, 5 Textures)

Victorian Grunge Texture Pack 5 Textures

Vintage II Texture Pack (Free, 12 Textures)

Vintage II Texture Pack 12 Textures

Vintage Textures (Free, 13 Textures)

Vintage Textures 13 Textures

Vintage Star Pattern (Free, 3 Textures)

Vintage Star Pattern 3 Textures

Art & Vintage Textures (Free, 15 Textures)

Art Vintage Textures 15 Textures

Vintage Grunge Texture Pack (Free, 6 Textures)

Vintage Grunge Texture Pack 6 Textures

Old Paper Textures (Free, 10 Textures)

Old Paper Textures 10 Textures

Vintage Book Textures (Free, 18 Textures)

Vintage Book Textures 18 Textures

The post 20 Free High-Quality Vintage, Antique & Retro Texture Packs appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/vintage-texture-packs/feed/ 0