jpg 파일 용량 압축


안녕하세요.
고코더 입니다. 


이미지 압축하는 사이트를 이전에 알아보았습니다.

 1. 용량을 줄이는 사이트가 하나 있어서 소개 드립니다.
그런데 이곳은 아쉽게 jpg 파일만
압축이 가능합니다.
(아마자 PHP GD라이브러리를 활용해서 만들어서 그런거 같네요)

 2. 아래 사이트로 접속해 보세요.



 3. 이미지를 해당 고셍 드래그 드랍이나
파일선택으로 업로드 해보세요.


 4. 그럼 아래처럼 압축용량을 알 수 있습니다.


 5. 이 사이트는 품질 퀄리티를 지정 가능 합니다. 




마무리


jpg 파일 압축은 좋은 사이트네요.




댓글을 달아 주세요


이미지 크기는 그대로 이미지 용량을 줄이기


안녕하세요.
고코더 입니다.


 1. 스마트폰이 활성화되고 모바일 웹이 중요시되면서 이미지는
더욱더 가볍게 제작하는 추세입니다.
하지만 이미지 편집을 할 줄 아는 분이라면 쉽겠지만
일반적인 같은 경우 어려운 일입니다.


 2. 하지만 아래 사이트 아이 러브 IMG 닷컴에서는
자동으로 최적화된 용량과 화질로
이미지를 압축 시켜줍니다.

 3. 아래 사이트로 이동해주세요.


 4. "여러 이미지 선택" 버튼을 클릭하여
압축할 대상을 선택합니다.


 5. 이미지가 업로드되면 "여러 이미지 압축" 버튼이 존재합니다.
여러 개에 이미지를 동시에 압축 가능합니다.



 6. 그러면 서버에서 이미지를 압축 합니다.


 7. 완료되면 압축률을 보여줍니다. 




마무리


사용 할 용도가 많습니다.


댓글을 달아 주세요


윈도우 얼굴 합성 프로그램


안녕하세요.
고코더 입니다. 


 1. 이전 시간에는 온라인 사이트에서
얼굴을 합성하는 방법을 배워 보았습니다.


 2. 이번에는 윈도우 프로그램을 통해 사용해보겠습니다. 
해당 사이트에서 Faceswapper을 다운받아 보세요.


첨부파일은 여기 있습니다.

 3. 실행 후에 NEXT를 클릭


 3. 처음 이미지는 바뀔 얼굴 이미지를 로드 합니다.


 4. 그 다음은 바뀔 얼굴을 로드 합니다.



 5. 그럼 프로그램이 알아서 얼굴에 이미지를 찾아 줍니다. 


 6. 그리고 합성 된 후에 상세한 설정을
변경 가능 합니다. 


 7. 그리고 이미지를 세이브 하면



 8. 이렇게 합성된 이미지를 저장할 수 있습니다.




마무리


제가 못해서 그런데 기능 좋습니다. 정말로 




댓글을 달아 주세요


포토샵 CC 그라데이션 되어 있는 색상을 변경하기 


안녕하세요.
고코더 입니다. 


 1. 웹사이트의 배경 이미지로 사용하려고 하는데 
너무 어두운 느낌이 있어서 조금 밝게
제 느낌에 맞게 변경하려고 합니다.


 2. 해당 이미지를 포토샵으로 불러옵니다.


 3. 이미지->조정->색상균형으로 들어갑니다.
단축키는 Ctrl + B라고 표시되어 있네요.

 4. 그럼 여기서 색조/채도를 바꿀 수 있는 팝업이 뜹니다. 색조,채도,밝기를 조절해서 원하는 색상으로 변경해보세요.


 5. 원래에 느낌 그대로 있던 그라데이션은 남아있으면서
색상이 변경 되었습니다.


이런 명암비로 표현된 단색 이미지는
이런 방식으로 조정해서 색상을 바꿔 보세요.


마무리


포토샵만 있으면 이미지 편집 걱정 끝


댓글을 달아 주세요


완성본이 이미지 오류일때 


안녕하세요.
고코더 입니다.


시길에서 나오던 이미지가
전자책 뷰어에서는 엑스박스로
표시 되고 있네요.

한참을 찾고 찾다 보니깐    
원인을 밝혀 냈습니다.

1. 책 표지 커버이미지를
맨 앞을 대문자로 변경하여 저장했습니다.


2. 그리고 파일에는 소문자로 png를 링크 했는데


3. 시길 미리보기에서는 이미지가 잘 보이고 있습니다.


 4. 그런데 뷰어에서는 엑박으로 보입니다. 


 5. 프로그램을 만드는 사람 나름이지만
대소문자 체크를 하지 않고 모두 소문자로 치환하여 
시길에서는 이미지를 보여주는거 같습니다.
그래서 이미지 명을 다시 소문자로 변경하고
이미지 오류가 없어졌습니다. 


혹시 완성본이 이미지 뷰 오류가 생기는 분은
이미지명을 소문자, 대문자 체크를 잘해보세요.


마무리


그래도 시길이 최고


댓글을 달아 주세요


포토샵으로 이미지 사이즈 조절


안녕하세요.
고코더입니다.


이미지를 줄이는 가장 편한 도구는
그림판 그리고 알씨라고 생각 합니다.

둘다 간단하고 간편하게 크기조절이 되지만
문제는 깔끔하게 사이즈 변경이 되지 않습니다.
이미지가 깨지죠.
디테일적인 부분도 문제입니다.

그래서 포토샵으로 이미지를 줄이는 방법을
말씀드리겠습니다.

1. 이미지를 불러온 상태에서 
포토샵 "이미지" -> "이미지 크기"를 선택 합니다.


 2. 이미지 크기 조절 UI가 뜨는데요
맞추는 방식은 퍼센트부터 픽셀 센치까지 폭과 넓이에 숫자를 넣어주면 됩니다.
그러면 화면에서처럼 치수 즉 사이즈가 즉각적으로 보이게 됩니다.


 3. 확인을 누르면 사이즈 변경이 완료 됩니다.


 4. 해당 이미지를 쓰고 싶다면 
다른이름으로 저장해서 jpg,png,gif 등으로
저장하시면 됩니다.


 png 일댄 기본 옵션으로 확인하여 저장해주시면 됩니다.



마무리


그림판보단 손이 더 가지만
깔끔하게 편집 되네요


댓글을 달아 주세요


evernote 모자이크 처리 


안녕하세요.
고코더 입니다. 


사진을 찍었는데 타인의 초상권이 존재하게 될때
모자이크로 처리 하여 업로드 하게 됩니다.
이런 작업을 처리하는 방법과 프로그램은 많습니다.

하지만 에버노트를 사용하신다면 가장 쉽고 간편한 방법이 있어
이를 소개하려고 합니다.


▼ 노트상에 이미지 위에 마우스 오른쪽 버튼을 누릅니다. 
그리고 "이 이미지에 주석 달기" 라는 메뉴를 클릭 합니다. 


▼ 그리고 나온 메뉴에 왼쪽에 모자이크 모양을 클릭 합니다.


▼ 그리고 원하는 부위를 마우스로 왼쪽 버튼으르 드래그 합니다.



▼ 마지막으로 저장을 하면 완료 입니다.


에버노트가 가지고 있는 이미지 주석 처리 시스템으로
쉽게 모자이크 처리가 가능 합니다. 
자체 편집 기능도 강력 합니다.


마무리


완벽한 노트 프로그램


댓글을 달아 주세요


jquery img src selector


안녕하세요.
고코더 입니다.


개발을 하던 중에 이미지의 src 속성 
이미지의 주소를 선택하여 수정할 일이 생겼는데
쓸모가 많은 방식인거 같아 
블로그를 남겨드립니다.

제이쿼리에서 img의 src 속성으로 당연히 선택을 할 수 있습니다.
제 블로그에 있는 이미지 주소를 사용해 말씀드리겠습니다.

https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg


▼ 이미지 src를 선택하는 3가지 방법입니다.

1
2
3
4
5
6
7
8
9
10
11
1. 이미지 주소 전체를 넣어 검색
    - 하나의 이미지만 선택할때 유용 합니다.
    ex) $("img[src='https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg']")
2. 이미지 주소 앞 에서부터 매칭.
    - 같은 폴더 기준이나 같은 URL의 이미지만 선택할때 유용 합니다.
    ex) $("img[src='https://tistory1.daumcdn.net']")
 
 
3. 이미지 주소 뒤 에서부터 매칭.
    - 이미지 파일명을 사용하여 선택할때 유용 합니다.
    ex) $("img[src$='epantheo.jpg']")
cs

▼ 제가 작성한 예제 파일도 한번 확인해보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
    function src_selector1(){
      $("img[src='https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg']").css("width","200");
    }
    function src_selector2(){
      $("img[src^='https://tistory1.daumcdn.net']").css("width","300");
    }
    function src_selector3(){
      $("img[src$='epantheo.jpg']").css("width","400");
    }
    </script>
</head>
<body>
    <img src="https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg" width="100">
    <br>
    <input type="button" onclick="src_selector1();" value="src 전체 이름으로 선택">
    :: https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg
    <br>
    <input type="button" onclick="src_selector2();" value="src 앞에서부터 검색으로 선택">
    :: https://tistory1.daumcdn.net
    <br>
    <input type="button" onclick="src_selector3();" value="src 뒤에서부터 검색으로 선택">
    :: epantheo.jpg
    <br>
</body>
</html>
cs

▼ 웹상에서 확인한 화면 입니다. 


특정 이미지만 선택하여
작업이 필요할때 src로 선택하면 다른 CSS의 속성과 얽히지 않게 코딩이 가능합니다.



마무리


블로그 스킨 수정할때 딱 좋더라고요


댓글을 달아 주세요



이미지맵 코드 생성 사이트



안녕하세요.
고코더 입니다.


이미지맵을 작성할때 머리가 비상한 분이면
이미지의 좌표를 바로 분석하고 코드를 기입하겠지만

보통은 프로그램이나 사이트의 도움을 받아 
작성을 하는게 보통입니다.

그런데 프로그램은 귀찮고
사용해본 결과 이사이트가 가장
손쉽게 사용이 가능합니다.

▼ 이미지맵스는 "익스플로어"에서만 작동이 됩니다.
(크롬에서 작동이 안되요!!!)
이미지 URL을 입력하고
start Mapping을 입력 합니다. 


▼해당 이미지가 맞다면
click to continue 를 클릭해주세요.


▼새로 생긴 창에서 마우스 오른쪽 버튼을 누르면
사이트 기능이 뜹니다. 
우린 가장 많이 사용하는 네모 "create rect"를 클릭해보겠습니다. 


▼그리고 나타난 범위를 원하는 크기만큼 늘립니다. 


▼ 그 다음 옵션을 입력 합니다.
Map URL : href 값 링크 값 입니다.
그리고 나머지는 이미지 옵션 값


▼ Eventes는 이미지 이벤트를  만들수 있습니다.
Target : _blank 로 해보겠습니다. 


▼ 다시 이미지에서 마우스 오른쪽 버튼을 클릭해
Get Code를 선택해보겠습니다. 



▼ HTML Code를 선택하면


▼ 이렇게 HTML Code가 나옵니다.


▼ 저는 이렇게 홈페이지 위젯에 코드를 넣어서
반반 링크를 다르게 했습니다.


이미지맵이 필요한분은 해당 사이트에서
만들어 보세요.


마무리


하나의 이미지에 여러개 링크를 달때 
이미지맵 참 유용합니다.


댓글을 달아 주세요


배경 투명으로 만들어 주는 사이트

안녕하세요. 고코더 입니다.

오늘은 배경을 지워주는 사이트를 소개하려 합니다.
포토샵이나 일러스트러 기능으로 외곽선을 따서
메인 컨텐츠만 활용 하기도 하는데요.
참 귀찮고 시간이 많이 드는 작업입니다.

그런데 제가 소개해줄 사이트들은 
이런 배경을 자동으로 지워서 메인 컨텐츠만 사용 할 수 있도록
해주는 기능을 제공 합니다. 





▼ 무료 이미지에서 사진 찍는 사람의
배경을 지워 봤는데요. 인식률이 장난 아닙니다.


▼단점이 하나 있습니다.
바로 사람이 아닌 이미지는 인식이 되지 않습니다.
인물 사진에 배경을 지우고 싶을때 사용하면 좋겠네요.








▼ 이 사이트는 인물 사진의 인식률은 조금 아쉬운데요


▼이런 사물 사진의 인식률이 좋습니다. 
이미지를 업로드 하면 드래곤이 배경을 태워주면서 
프로세스가 돌아 갑니다.


▼그리고 몇가지 케이스를 제공하고
수정 할수 있는 툴도 제공 합니다.
Touch up을 클릭 하면 


▼ - : 마이너스 팬은 배경을 지워주고
+ : 플러스 팬은 대상을 다시 살려줍니다. 


▼ 나름 후조정을 했는데 
배경과 사물이 색이 같아서 조금 어색하게 됐네요.


▼ 후보정 후에는 아쉽게도 가입을 해야 다운로드 할 수 있습니다.
쓰지 않은 이메일로 하여 가입하시는 것도 좋아 보이네요.




마무리


이젠 중요한 작업 아니면
사이트에서 모든게 가능한 시대네요.


댓글을 달아 주세요