지니가는사람 0

트게더 css 배너 로고 0게더 제작 후 적용하기 입니다.

순서 따라서 하시면 가능합니다~ 

참고로 이번 코드에는 이미지 제작이 필요하기 때문에 이미지 제작 툴에 해당하는 일러스트, 포토샵 등을 사용하셔야 합니다.

참고로 포토샵 cs6 버전을 이용하여 작성한 게시글입니다.

css 배너 로고로 추천 드리는 글꼴은 몬소리체 이며 글꼴은 편한 걸로 사용 하시면 되지만, 여러가지 사용해본 결과 몬소리체가 제일 깔끔했습니다.

몬소리체 - https://noonnu.cc/font_page/72 

1. 포토샵에서 파일 -> 새로만들기에서 200 * 50 px 사이즈로 캔퍼스를 만든다.

2. 배경 레이어에, 현재 트게더 배경에 사용할 색상으로 페인트칠 한다.

3. 레이어를 만들고 텍스트(수평 문자 도구)로 200 * 50 사이즈에 맞게 넣는다.

4. 0게더 라는 이름으로 텍스트를 입력한다.

5. 그림자, 외부효과등을 적용 시켜야 하니 위 아래, 왼쪽으로 6칸 정도 빈칸을 두고 글 사이즈를 맞춘다.

6. 텍스트 레이어 위에 레이어를 하나 더 추가하여 마우스 오른쪽 -> 클리핑 마스크 생성을 한다.

7. 그라데이션 도구(페인트통에서 마우스 오른쪽)를 클릭하여 위쪽 색상을 더블클릭

8. 배치를 적절하게 하여 색상을 추가한다. (아래 이미지 참고)

9. 그 다음 0게더의 왼쪽 제일 위부터 오른쪽 제일 아래까지 사이즈를 맞추어 드래그 한다.

10. 색상을 확인하고 텍스트를 클릭 -> 레이어 추가를 했던 아이콘 라인에 있는 fx(효과)를 클릭하여 마음에 들게 세부 디자인 작업을 한다.

11. 완성이 되었다면 배경을 투명화 하고 png 파일로 저장한다. 필요할 경우 레이어를 더 추가하여 이미지를 넣으시면 됩니다.

12. 디스코드 서버를 하나 만든 다음 해당 서버 채팅 채널에 제작한 이미지를 올린다.

13. 이미지 링크를 복사한 다음 아래 /* 1 */ 부분을 지우고 해당 위치에 추가한다.

14. 만들어진 css 코드를 폰트, 눈내리는 효과 등 기본적인 사항 다음 줄 코드에  붙여넣기 한다.

-------------------------------------------------------------------------------------------------

header .row>div:nth-child(1)>a {

display: block;

width: 200px;

height: 50px;

background: url(/* 1 */) no-repeat;

background-size: auto 51px;

}

header .row>div:nth-child(1)>a>img {

display: none;

}

-------------------------------------------------------------------------------------------------

여러분의 예쁜 트게더 꾸미기를 응원합니다~

질문은 댓글로 남겨주시면 시간 있을 때 답장 or 추가 포스팅 해드리니 부담 없이 물어보세요~