[Logo Design] 사진에 로고 넣기, 글씨를 사진으로 채우기

✨사진&로고 디자인✨

 

안녕하세요. 오늘은 vscode로 html/css로 로고를 디자인할 때 활용할 수 있는 디자인을 배워봐요. 사진에 로고 삽입하는 법, 그리고 글씨를 사진으로 채우는 법을 알아봅시다.

📌 1. 흰 배경의 로고를 사진에 올리기

배경으로 사용할 사진 한 장과 흰 배경에 검은색 글씨가 있는 로고 이미지를 준비해 주세요. 저는 디즈니를 좋아해서 디즈니 사진과 로고를 준비했어요.

원칙적으로 이미지 위에 삽입하려는 로고의 배경이 투명하지 않으면 포토샵을 사용해서 배경을 제거하고 PNG파일로 만들어주어야 하지만 아래 CSS 코드를 사용하면 그런 작업 없이도 간단하게 흰 배경은 투과되도록 합성할 수 있습니다.
 
이것을 가능하게 해 주는 것이 mix-blend-mode 프로퍼티입니다. 포토샵의 혼합모드랑 같은 효과를 입혀주는 속성인데, 배경에 이미지나 텍스트를 그대로 겹쳐서 표현할 때 사용합니다. 만약 흰 배경을 투명하게 표현하고 싶으면 mix-blend-mode: multiply를 적용시켜주세요. 그럼 색이 들어간 부분은 화면에 남고, 흰색 부분만 삭제됩니다.
 

☑️ HTML 코드

<div class="logo-background">
    <div class="logo">
        <img src="Images/pic08_logo.png" alt="">
    </div>
</div>

☑️ CSS 코드

    <style>
        html, body {
            height: 500px;
        }
        img {
            mix-blend-mode: multiply;
            width: 400px;
            height: 400px;
        }
        .logo-background {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url("Images/pic08_background2.jpg");
            background-size: auto 100%;
            background-repeat: no-repeat;
            background-position: center center;
            filter: saturate(50%);
        }
        .logo {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

 
주의사항
 
* 이 기법은 로고 마크가 검은색, 배경이 흰색일 때 사용가능합니다. 로고 마크에 색상이 들어간 경우 로고 마크도 투과되어 반투명처럼 보일 수 있어요. 배경에 색이 있는 경우는 색을 포함한 영역이 반투명 배경으로 전환됩니다.

---

두 번째로는 글씨 안에 사진을 채워 넣는 코드를 알려드릴게요. 아래는 제가 예시로 만들어본 디자인이예요.

커피 브랜드를 연상시키는 원두 배경으로 꾸며본 글씨

하와이안 플라워 이미지를 사용해 부티크 커머셜 느낌을 낸 글씨

'사랑과 자유' 슬로건을 바다 이미지를 사용해서 시원한 느낌으로 표현해봤어요

📌 2. 글자 모양 안에 사진 넣기

 
글자 모양 안에 그림이나 사진을 넣어주면 인상적이고 세련된 느낌을 전달할 수 있어요. 웹사이트에서 강조하고 싶은 글자가 있을 때 이용할 수 있는 디자인입니다. 
 
 

☑️ HTML 코드

<div class="backgroundclip">COFFEE</div>

☑️ CSS 코드

<style>
    .backgroundclip {
        background-clip: text;
        -webkit-background-clip: text;
        background-image: url(Images/pic13-2.jpg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        color: rgba(0 0 0 / 0);
        font-size: 200px;
        font-weight: 700;
        text-transform: uppercase;
    }
</style>

 

---

 

어떠셨나요? 많은 도움이 되셨나요? 궁금하신 점은 댓글에 남겨주시고 좋아요 눌러주세요.