{"id":60009,"date":"2022-07-07T19:16:11","date_gmt":"2022-07-08T02:16:11","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=60009"},"modified":"2022-07-13T14:30:22","modified_gmt":"2022-07-13T21:30:22","slug":"recreate-the-look-old-computer-vibes","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes","title":{"rendered":"Recreate the Look: Old Computer Vibes"},"content":{"rendered":"\n

Everywhere you look, Y2K is making waves in visual culture. As we go deeper into the 90s and 2000s, the early internet look is becoming one of the biggest design trends of 2022.<\/p>\n\n\n\n

Somewhere in between Stranger Things’ 80s looks and Euphoria’s over-the-top aesthetic, you\u2019ll find yourself in a world that celebrates retro computing: loud ASMR-like keyboard clicks, mechanical error sounds, and rudimentary application windows dominate the scene.<\/p>\n\n\n\n

<\/span>Welcome back, Windows 95<\/strong> aesthetic<\/strong><\/span><\/h2>\n\n\n\n

But why? Weren’t we comfortable with buttonless phones and sleek, minimalistic devices? Turns out: not so much. I’m talking about software that is so user-friendly we don\u2019t even think about the process of using it and cyber humans that are so interconnected with applications, the line between digital and physical is entirely blurred. In my opinion, that’s the reason this old computer vibe<\/em> is becoming even more popular.<\/p>\n\n\n\n

\"\"
“This is what computers looked like back when we first made Blogger<\/a>” by evhead<\/a> is licensed under CC BY 2.0<\/a>.<\/figcaption><\/figure>\n\n\n\n

You can interpret it as a rebellion against our over-digitalized lives and an attempt to build a boundary between tech devices and human beings. On the other hand, it might also be a humbling reminder of where everything started \u2014<\/em> way before we started talking about Web 2 or 3. <\/p>\n\n\n\n

\"\"
“My old computer<\/a>” by mattjb<\/a> is licensed under CC BY-NC-SA 2.0<\/a>.<\/figcaption><\/figure>\n\n\n\n

<\/span>Blending late 90s & mid 2000s looks<\/strong><\/span><\/h2>\n\n\n\n

This old computer trend<\/a> combines clunky devices and electronics from the late 90s and futuristic lens flares and 3D chrome elements. This might come off as a weird mix for older millennials, but when you look at it from the current teenagers\u2019 point of view, it makes total sense. <\/p>\n\n\n\n

<\/span>Sustainability does its work<\/strong><\/span><\/h2>\n\n\n\n

Decades of hyper-fast fashion and excessively filtered ads have triggered a deep craving for authenticity. The logical consequence is today’s cultural shift towards style individualism and self-expression.<\/p>\n\n\n\n

Gen Z is getting access to affordable, natural, and budget-friendly shopping options. Vintage brands like Dickies, Ed Hardy, and Van Dutch are making a comeback, as are retro devices like the Discman, Tamagotchis, and second-hand simple phones. Did you know retrocomupting is a thing<\/a>? <\/p>\n\n\n\n

Behind this trend is a desire to use low-key, slower objects in a world of “smart” tech. Some people crave unfiltered looks: that dad cam vibe that documented important events in an authentic, unassuming way. <\/p>\n\n\n\n

\"\"
“Demo Cell Phones<\/a>” by djwudi<\/a> is licensed under CC BY-NC-SA 2.0<\/a>.<\/figcaption><\/figure><\/div>\n\n\n\n

Want to experience Microsoft Paint in all its charming ugliness? Check out this fun emulator!<\/a> <\/p>\n\n\n\n

<\/span>Let’s recreate the look!<\/span><\/h2>\n\n\n\n

I chose these two retro vibe products for this project: <\/p>\n\n\n

<\/figure>\n \n\n
<\/figure>\n \n\n\n

<\/p>\n\n\n\n

We’ll create this cute animation for Instagram Stories using Photoshop:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Old Computer Insta template Ps Canva<\/a> by Marie T<\/a>, is part of this month’s Drop. As a Creative Market member<\/a>, you get a free Drop worth up to $1,000 every month and savings on more than 6 million design assets like the ones we\u2019ll use in this tutorial.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/span>Step 1: Create the static image<\/span><\/h2>\n\n\n\n

The image size for Instagram Stories is 1080 x 1920 px, at 72 dpi. <\/p>\n\n\n\n

First, we’ll create a retro application frame by using one element within the Old Computer Insta Template<\/a> pack. Drag & drop the image into your file. If your frame is shorter than your Instagram Story canvas you can simply duplicate the image, position it a bit lower, and mask the top & bottom parts until you get the perfect frame size. In the next step, you can either make a Smart Object or flatten the finished background. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Since we want to add our image inside the application frame only, it would be helpful to add a masked group in which all the illustrations can be placed without crossing the outer frame. Simply make a selection, create a group, and add a mask of your selection. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/span>Step 2: Let’s animate in Photoshop!<\/span><\/h2>\n\n\n\n

Now you can layer in single elements. As soon as you’re happy with your result, we’ll need the timeline panel to start animating inside Photoshop. You’ll find it in the dropdown menu Window<\/strong> > Timeline<\/strong>. <\/p>\n\n\n\n

A new panel will pop up. Click on the small arrow inside the Timeline panel and choose “Create Video Timeline”. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In the next step, we will move, rotate, or scale elements, documenting every change as key points\/frames in our timeline. Sounds complicated? I’m sure you can do it! Follow these steps: <\/p>\n\n\n\n

  1. In the Layers panel: click on the layer you want to work on first. <\/li>
  2. The Layer will be instantly marked in the timeline as well.<\/li>
  3. In the Timeline panel: click on the arrow next to the layer’s name to open a tiny dropdown.<\/li>
  4. You’ll find several options in here you can mark as keyframes. A keyframe<\/a> is basically a bookmark at a specific timepoint in your timeline. If you add a keyframe in a specific object’s position or opacity level, the frame will display that styling at that point in time.<\/li><\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    5. Make sure the Timeline cursor is at the very beginning and click on the small dot next to the word “Transform”. <\/p>\n\n\n\n

    Important: since we want a looping animation for this example, we need to design it so the starting point can seamlessly connect with the endpoint. <\/p>\n\n\n\n

    6. Now move the small cursor a bit to the right, forward in time. I moved it 5 frames. <\/p>\n\n\n\n

    7. Type Command + T or “Free Transform” and rotate the element a bit to the right. Press Enter\/Return on your keyboard to exit Transform mode and the keyframe will be placed automatically in the Timeline. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Repeat this method for the next frames. To shorten the animation timeline, you can simply move the small block of the timeline to the left. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Since we made a moving\/rotating animation with the first element, the next one will get a scale animation. Repeat the steps we described above. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    <\/span>Step 3: Let’s add a bitmap style!<\/span><\/h2>\n\n\n\n

    Your animation is ready! Now let’s add a bit more of this old computer vibe with a classic bitmap effect. <\/p>\n\n\n\n

    Let’s select the background elements that aren’t animated, the background and border in this case, right-click and create a Smart Object. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Duplicate this Smart Object and rasterize the copy. Turn it off. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Double click on the Smart Object we just created and a new Photoshop tab will open automatically.<\/p>\n\n\n\n

    Smart Objects can be understood like separate boxes where you’ll store and find several layers. They can be adjusted at any point in time.<\/em><\/p><\/blockquote>\n\n\n\n

    Since we’re going to create a bitmap look, let’s flatten the background layers inside the Smart Object. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Now you have only one layer left in your Smart Object. Follow these steps to create the bitmap texture: <\/p>\n\n\n\n

    1. Go to Image > Mode and change it to Grayscale<\/strong><\/li>
    2. Repeat this step, changing the image’s mode to Bitmap<\/strong><\/li>
    3. For Bitmap settings, you can apply the frequency, angle, and shape I’m using below or play around until you’re happy with the result.<\/li><\/ol>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      As soon as you’re happy with the look, we need to go through the same steps but backward. Change the setting from Bitmap to Grayscale and from Grayscale back to RGB Color. Save and close the Smart Object and you’ll find the refreshed layer in your original document.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      To use the texture as an overlay, we can simply set our Bitmap layer’s blend mode to “Divide”. Play a bit with the opacity if needed.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      You can now export this animation as a video:<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      … or as a GIF animation!<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      <\/span>Some old computer designs I’ve handpicked for you<\/span><\/h3>\n\n\n
      <\/figure>\n \n\n
      <\/figure>\n \n\n
      <\/figure>\n \n\n
      <\/figure>\n \n\n
      <\/figure>\n \n\n
      <\/figure>\n \n\n\n

      <\/span>What other looks are you into?<\/span><\/h2>\n\n\n\n

      Did you enjoy this tutorial? Did you try to Recreate the Look<\/em>? Any other design style you want to learn about? Let us know! Visit Creative Market on Instagram<\/a> and tag us in your stories or share a comment below.<\/p>\n\n\n\n

      Stay curious! <\/p>\n\n\n\n

      Ana \u270c\ud83c\udffb\u2728<\/p>\n\n\n\n

      \n\n\n\n

      As a Creative Market member<\/a>, you can save 20% on more than 6 million design assets like the ones we\u2019ll use in this tutorial, plus a free Drop worth up to $1,000 every month.<\/p>\n\n\n\n

      \"\"<\/a><\/figure>\n\n\n\n

      <\/p>\n","protected":false},"excerpt":{"rendered":"

      Everywhere you look, Y2K is making waves in visual culture. As we go deeper into the 90s and 2000s, the early internet look is becoming one of the biggest design trends of 2022. Somewhere in between Stranger Things’ 80s looks and Euphoria’s over-the-top aesthetic, you\u2019ll find yourself in a world that celebrates retro computing: loud […]<\/p>\n","protected":false},"author":209,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[85,440,1770,1771],"topics":[],"class_list":["post-60009","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-retro","tag-vintage","tag-recreate-the-look","tag-design-tutorials"],"acf":[],"yoast_head":"\nRecreate the Look: Old Computer Vibes - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Recreate the Look: Old Computer Vibes\" \/>\n<meta property=\"og:description\" content=\"Everywhere you look, Y2K is making waves in visual culture. As we go deeper into the 90s and 2000s, the early internet look is becoming one of the biggest\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-08T02:16:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-13T21:30:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2022\/07\/07192730\/Recreate-the-look-old-computer-creative-market-horizontal-featured-image-01.jpg\" \/>\n<meta name=\"author\" content=\"ana yvy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2022\/07\/07192730\/Recreate-the-look-old-computer-creative-market-horizontal-featured-image-01.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ana yvy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/recreate-the-look-old-computer-vibes\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/recreate-the-look-old-computer-vibes\",\"name\":\"Recreate the Look: Old Computer Vibes - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/recreate-the-look-old-computer-vibes#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/recreate-the-look-old-computer-vibes#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/old-computer.jpeg\",\"datePublished\":\"2022-07-08T02:16:11+00:00\",\"dateModified\":\"2022-07-13T21:30:22+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/c4c189e9bc43487a1e4cc70f84b12632\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/recreate-the-look-old-computer-vibes#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/recreate-the-look-old-computer-vibes\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/recreate-the-look-old-computer-vibes#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2022\\\/07\\\/07140708\\\/old-computer.jpeg\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2022\\\/07\\\/07140708\\\/old-computer.jpeg\",\"width\":835,\"height\":626},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/recreate-the-look-old-computer-vibes#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recreate the Look: Old Computer Vibes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Recreate the Look: Old Computer Vibes - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes","og_locale":"en_US","og_type":"article","og_title":"Recreate the Look: Old Computer Vibes","og_description":"Everywhere you look, Y2K is making waves in visual culture. As we go deeper into the 90s and 2000s, the early internet look is becoming one of the biggest","og_url":"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2022-07-08T02:16:11+00:00","article_modified_time":"2022-07-13T21:30:22+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2022\/07\/07192730\/Recreate-the-look-old-computer-creative-market-horizontal-featured-image-01.jpg","type":"","width":"","height":""}],"author":"ana yvy","twitter_card":"summary_large_image","twitter_image":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2022\/07\/07192730\/Recreate-the-look-old-computer-creative-market-horizontal-featured-image-01.jpg","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"ana yvy","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes","url":"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes","name":"Recreate the Look: Old Computer Vibes - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes#primaryimage"},"thumbnailUrl":"https:\/\/creativemarket.com\/blog\/wp-content\/uploads\/2022\/07\/old-computer.jpeg","datePublished":"2022-07-08T02:16:11+00:00","dateModified":"2022-07-13T21:30:22+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/c4c189e9bc43487a1e4cc70f84b12632"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2022\/07\/07140708\/old-computer.jpeg","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2022\/07\/07140708\/old-computer.jpeg","width":835,"height":626},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/recreate-the-look-old-computer-vibes#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Recreate the Look: Old Computer Vibes"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/60009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/209"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=60009"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/60009\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=60009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=60009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=60009"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=60009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}