[포토스케이프 X] 투명한 글씨 만드는 방법
투명한 글씨가 필요하신가요? 배경 이미지 위에 텍스트를 넣을 때, 투명한 글씨를 이용하면 꽤 특이한 느낌의 이미지를 만들어 볼 수 있습니다. 이전 글에서 포토스케이프 X의 "문자마스크" 기능을 이용해서 글씨 안에 이미지를 넣는 방법에 대해서 알아보았는데요... [포토스케이프 X] 글씨에 이미지 넣는 방법 멋진 글씨를 만들어 보고 싶으신가요? 가끔, 독특한 글씨를 만들기 위해서 단순히 색상이나 그림자를 입히는 것을 넘어서, 이미지의 느낌을 주고 싶은 경우가 있습니다. 포토샵을 사용하면 되겠 paperblock.tistory.com 비슷한 방법을 이용하면 글씨 부분만 투명한 이미지를 생성할 수 있습니다. 이번 글에서는 포토스케이프 X에서 투명한 글씨를 만드는 방법을 알아보고 다른 이미지 위에 텍스트 이미지를..
[포토스케이프 X] 글씨에 이미지 넣는 방법
멋진 글씨를 만들어 보고 싶으신가요? 가끔, 독특한 글씨를 만들기 위해서 단순히 색상이나 그림자를 입히는 것을 넘어서, 이미지의 느낌을 주고 싶은 경우가 있습니다. 포토샵을 사용하면 되겠지만, 포토스케이프 X를 사용하더라도 꽤나 괜찮은 품질의 "이미지가 들어간 글씨"를 만들어 볼 수 있습니다. 이번 글에서는 포토스케이프 X의 문자마스크 기능을 이용하여 글씨에 배경을 넣는 방법에 대해서 알아보겠습니다. 대략 아래와 같은 결과를 만들어 볼 수 있습니다. 1. 글씨에 배경 이미지를 넣는 방법 대리석 질감을 주기 위해서 배경으로 대리석 질감의 이미지를 사용해 보겠습니다. 아래의 이미지를 사용한 글자를 만들어보도록 할게요. 그럼 가장 먼저 포토스케이프를 열고 사진 편집에서 글씨에 넣을 이미지를 불러옵니다. 이미지..
[포토스케이프 X] 배경이 투명한 이미지를 새로 만드는 방법
이미지의 배경을 제거하는 것이 아닌, 처음부터 투명한 이미지를 생성하고 싶을 땐 어떻게 해야 할까요? 바로~~~ 포토스케이프 X가 해결해줍니다. 포토스케이프 X를 이용하면 매우 간단하게 투명한 이미지를 생성할 수 있습니다. 이번 글에서는 기존 이미지의 배경 제거가 아닌, 처음부터 투명한 이미지를 만드는 방법에 대해서 알아보겠습니다. 만약 기존의 이미지에서 배경을 제거하고 싶은 경우에는 아래 글을 참조하세요! [포토스케이프 X] 투명 이미지 만들기 누끼 따는 사이트 - 이미지 배경제거: remove.bg 1. 투명한 이미지 생성하기 투명한 이미지를 생성하는 방법은 매우 간단합니다. 우선 포토스케이프 X를 실행하고 사진 편집에 들어갑니다. 여기서 "새로 만들기"를 클릭합니다. 그러면 아래와 같은 팝업창이 나..
A4 사이즈 규격 - 어떻게 계산할까?
A4 사이즈 규격, 계산방법, 무게 A4 사이즈 규격에 대해서 아시나요? 다들 한 번쯤은 A4 용지를 사용해 보셨을 것으로 생각합니다. 복사기나 프린터에 가장 많이 사용되는 종이니까요. 그런데 종이 이름이 왜 A4일까? 돌이켜 생각해보면... 왜 A4인지, A는 뭐고 4는 뭔지, 또 A3, B5는 무엇이며 용지의 사이즈, 규격은 어떻게 결정되는지 등등에 대해서 깊게 생각해본 적이 없었던 것 같습니다. 이번 글에서는, 개인적인 궁금증을 해결할 겸 해서 A4 사이즈 규격에 대해서 자세하게 알아보도록 하겠습니다. 구체적으로는 다음의 내용에 대해서 살펴보겠습니다. 종이 사이즈의 규격화 A4 사이즈 규격의 비밀 B 용지는 뭘까? A4 용지에 적힌 무게는 무엇일까? 1. 종이 사이즈의 규격화 우리가 흔히 사용하는 ..
[티스토리] 카테고리 이동, 글 비공개를 한꺼번에!
티스토리 블로그에 글을 쓰다 보면, 다음과 같은 작업이 필요한 경우가 생기기도 합니다. 이 카테고리는 비공개로 하고 싶은데! 여러 글을 비공개로 돌리고 싶은데! 몇 개의 글을 다른 카테고리로 옮겨야겠다. 당연히 된다고요? 1년여간 티스토리를 하면서 위의 기능이 전혀 지원이 안 되는 줄 알고 전부 수작업으로 일일이 바꿔줬던 1인입니다. 도데체 왜 찾아볼 생각조차 하지 않았는지 조금 의문입니다만... 티스토리의 카테고리 비공개 기능이 있는 줄 모르고, 또 여러 글 비공개/카테고리 이동 기능이 있는지 모르고 그동안 삽질을 했던 걸 생각하면 눈물이 앞을 가립니다. 한 번은 수십 개의 글을 수동으로 비공개로 전환하다가 티스토리로부터 구박(?)을 받기도 하였는데요... 너 로봇 아니냐? 반복 작업으로 오늘은 더 이..
[포토스케이프 X] 이미지에 워터마크 일괄 적용하기
블로그에 포스팅을 하면서 내가 정성 들여 찍은 사진을 무단으로 가져가 버리면, 심지어 나보다 상위권으로 글이 올라온다면! 그만큼 속상한 일도 없겠죠. 그래서 사진을 직접 촬영하고 포스팅하는 분들은 워터마크를 넣는 경우가 많습니다. 그런데 한두 장도 아니고 여러 장의 이미지에 매번 워터마크를 넣어주는 것도 꽤나 귀찮은 일이 아닐 수 없습니다. 이 귀찮은 작업을 포토스케이프 X를 사용하면 한 번에 해결할 수 있습니다. 이번 글에서는 포토스케이프 X로 워터마크를 모든 이미지에 일괄 삽입하는 방법에 대해서 알아보겠습니다. 1. 일괄 편집 기능 포토스케이프 X를 실행한 후 "일괄 편집" 메뉴를 선택합니다. 그리고 상단에 워터마크를 추가할 이미지를 드래그해서 넣어줍니다. 다양한 이미지 비율을 테스트하기 위해서 세로..
CSS로 PC와 Mobile을 구분하는 방법 - Interaction Media Features
언제부턴가 "반응형 웹"이 대세가 되면서, 사용자의 디바이스에 따라서 웹 화면을 적절하게 구성하는 것이 필수 요소가 되었습니다. 일반적으로, 브라우저 창의 크기를 기반으로 디자인을 다르게 설정하는 방식을 많이 사용하고 있죠? 이 사이즈를 기준으로 PC 혹은 Mobile을 얼추 구분하기도 합니다. 대부분의 경우 창 크기에 따라서만 조절해도 큰 문제는 없습니다만, 가끔은 사용자의 디바이스가 PC인지 모바일인지 구분하고 싶은 경우도 있습니다. 예를 들어서 다음과 같은 경우를 생각해 볼까요? Hover시에 이미지 위에 text를 overlay 하는 경우 Hover를 하는 경우에만 나타나는 버튼 요소 위와 같은 경우에는 hover 동작은 마우스를 이용하는 PC에서 정상적으로 확인할 수 있으나, 터치스크린을 사용하..
내 웹사이트의 속도는? - 속도측정을 위한 4개 사이트 소개
웹사이트를 제작하시거나 워드프레스로 블로그를 하시는 분들께서는 한 번쯤은 PageSpeed Insight에서 속도 측정을 해보셨을 것 같습니다. 저도 예전에 속도 점수 좀 올려보려고 아등바등했었던 기억이 있네요 ^^;; 이번 글에서는 웹사이트, 워드프레스 블로그, 혹은 티스토리를 포함하여 내 사이트가 구축 이후에 사이트가 얼마나 빨리 로드되는지, 그리고 속도 향상을 위해서 어떤 부분을 변경해야 하는지에 대해서 알려주는 테스트 사이트를 소개하도록 하겠습니다. 구체적으로는 다음의 4개 사이트를 소개하겠습니다. PageSpeed Insight Pingdom GTMetrix WebPage Test 1. PageSpeed Insights PageSpeed Insights는 사이트의 속도나 최적화 정도를 측정할 때..