포토샵 노가다 즐기시는 분들 (gif 효과) 정보
포토샵 노가다 즐기시는 분들 (gif 효과)관련링크
본문
예제는 jpg 10장인데
동일한 패턴으로 이미지주소를 처리하면 이미지숫자는 상관없이 gif 처럼 됩니다.
이미지 클릭시 토글버튼으로 기능합니다.
<img id=girlImage style=width:100%;cursor:pointer;display:block>
<script>
img_1 = "https://blog.kakaocdn.net/dn/byWCWi/btrxgoaaE0s/iCoandRMMG4BBSoKfRJET1/img.jpg";
img_2 = "https://blog.kakaocdn.net/dn/bqCq3R/btrxbOaDRoR/Z9qUK8qphOtu4tUQeOOGT0/img.jpg";
img_3 = "https://blog.kakaocdn.net/dn/C2qHV/btrxbO2KeNb/ibogM4n1owSTkQQfKNrEVK/img.jpg";
img_4 = "https://blog.kakaocdn.net/dn/ckeKFH/btrxc3dLU0G/4SkWGnLbjUenY7zOVJGcEk/img.jpg";
img_5 = "https://blog.kakaocdn.net/dn/cgpJOZ/btrxgnvyG7z/eGijs0LBJpKCCO67uq6Ugk/img.jpg";
img_6 = "https://blog.kakaocdn.net/dn/ckZx7K/btrxc3LC6aM/AJmmkDVCkfKoC0CMN4Q03k/img.jpg";
img_7 = "https://blog.kakaocdn.net/dn/5ggf6/btrxc1NSCHt/x0JKXRJtXsxdSKqJVflzW1/img.jpg";
img_8 = "https://blog.kakaocdn.net/dn/CZ47w/btrxb9yM93c/86C76OjqS6RayVb2ZbIX91/img.jpg";
img_9 = "https://blog.kakaocdn.net/dn/cerMQR/btrxgoH1ZM5/7W0GzRJsBKFZKcMecrFbo0/img.jpg";
img_10 = "https://blog.kakaocdn.net/dn/sRuEq/btrxdO1N3ks/xbVuq3XhSm7PSrDKPmWTwk/img.jpg";
for (imgTotal = 0; this["img_" + (imgTotal + 1)]; imgTotal++);
goMode = onMode = num = 1;
girlImage.src = this["img_" + num];
setInterval(function() {
girlImage.src = onMode ? this["img_" + (goMode ? ++num : --num)] : this["img_" + num];
if (num == 1 || num == imgTotal) goMode = !goMode;
}, 40);
girlImage.onclick = function() {
onMode = !onMode;
}
</script>
셋인터벌의 마지막 숫자 40은 밀리초입니다.
예제처럼 40을 주면 40/1000 초로 1/25 초마다 이미지가 바뀌는 것이죠. 원하는 수치들을 넣어 보세요.
일반 동영상은 1/29.97 또는 1/30인데 계산해서 넣으시길요.
저는 소숫점 나오는게 싫어서 가장 근접한 1/25 로 즉 40으로 주었습니다.
이미지순환은 1-2-3-4-5-6-7-8-9-10-9-8-7-6-5-4-3-2-1 ...... 이런 식입니다.
!-->
추천
7
7
댓글 15개
오오~ 추천 꾹 눌러드렸어요! ^-^
GIF는 색상 표현이 8비트에 불과하고
알파 채널이 없어서 진정한 의미의 transparent한 배경처리가 불가능하기 때문에
올려주신 방법을 아주 유용하게 사용할 수 있겠네요!!
그럼 즐거운 주말 되세요오~ :)
GIF는 색상 표현이 8비트에 불과하고
알파 채널이 없어서 진정한 의미의 transparent한 배경처리가 불가능하기 때문에
올려주신 방법을 아주 유용하게 사용할 수 있겠네요!!
그럼 즐거운 주말 되세요오~ :)
@Innisfree 맞습니다. png 이미지로 만들면 투명처리가 유연해집니다.
제일 좋은 건 애펙에서 작업하는 것이죠.
또 동영상 바탕을 블랙으로 만들면 style로 mix-blend-mode:screen 를 사용할 수 있구요.
https://sir.kr/g5_tip/15911
div 에 배경을 깔면 동영상의 검은 바탕이 포토샵처럼 블렌드모드 스크린 처리가 되어서 훨씬 고급스러워집니다.
문제는 좋은 디자인을 만들려면 포토샵이나 에펙이나 노가다가 필수라는 것...ㅜㅠ
한창 때는 참 많이 만들었는데 요즘은 눈이 침침해져서 디자인 작업은 하기가 싫어지더라구요.ㅋ
아래코드를 http://www.mediaplayer.kr/main/bbs/html_editor.php 에서 확인해 보세요.
제일 좋은 건 애펙에서 작업하는 것이죠.
또 동영상 바탕을 블랙으로 만들면 style로 mix-blend-mode:screen 를 사용할 수 있구요.
https://sir.kr/g5_tip/15911
div 에 배경을 깔면 동영상의 검은 바탕이 포토샵처럼 블렌드모드 스크린 처리가 되어서 훨씬 고급스러워집니다.
문제는 좋은 디자인을 만들려면 포토샵이나 에펙이나 노가다가 필수라는 것...ㅜㅠ
한창 때는 참 많이 만들었는데 요즘은 눈이 침침해져서 디자인 작업은 하기가 싫어지더라구요.ㅋ
아래코드를 http://www.mediaplayer.kr/main/bbs/html_editor.php 에서 확인해 보세요.
<div style=width:800px;height:450px>
<video style=width:100%;height:100%;display:block;object-fit:cover src=https://blog.kakaocdn.net/dn/LHuHY/btrxoV6LYbQ/G3OthTcu8fs7KlBOUuc3Sk/tfile.mp4 autoplay loop muted></video>
</div>
<br>
<div style=width:500px;height:500px;background:linear-gradient(45deg,#ff0000,#0000ff)>
<video style=width:100%;height:100%;display:block;object-fit:cover;mix-blend-mode:screen src=https://blog.kakaocdn.net/dn/LHuHY/btrxoV6LYbQ/G3OthTcu8fs7KlBOUuc3Sk/tfile.mp4 autoplay loop muted></video>
</div>
@비타주리 엡 에펙이 정말 막강하죠! ^-^
다만 시스템 사양이 받쳐주지 못하면
큰 파일을 다룰 때 프리뷰 중에 랙이 좀 발생하기는 하지만요 ㅠㅠ
말씀하신대로 좋은 디자인을 위하여는 노가다가 필수인 것 같습니다!
저도 게임은 전혀 안 하지만 영상 편집을 위하여
작년 초에 게이밍 노트북을 구매하면서 메모리를 추가했는데
정작 영상 편집은 별로 안 하고 머신러닝 용도로 돌리고 있네요 -_-;;;
댓글에 올려주신 소스도 잘 구경하고 가네요 :)
그럼 비타주리 님께서도 좋은 주말 되세요~
감사합니다!!
다만 시스템 사양이 받쳐주지 못하면
큰 파일을 다룰 때 프리뷰 중에 랙이 좀 발생하기는 하지만요 ㅠㅠ
말씀하신대로 좋은 디자인을 위하여는 노가다가 필수인 것 같습니다!
저도 게임은 전혀 안 하지만 영상 편집을 위하여
작년 초에 게이밍 노트북을 구매하면서 메모리를 추가했는데
정작 영상 편집은 별로 안 하고 머신러닝 용도로 돌리고 있네요 -_-;;;
댓글에 올려주신 소스도 잘 구경하고 가네요 :)
그럼 비타주리 님께서도 좋은 주말 되세요~
감사합니다!!
@Innisfree 감사합니다.
재미나는 기능이네요. 감사합니다.
@들레아빠 노가다가 필수입니다.ㅜㅠ
이미지순환 순서는 1-2-3-4-5-6-7-8-9-10-9-8-7-6-5-4-3-2-1 이런 식입니다.
이미지순환 순서는 1-2-3-4-5-6-7-8-9-10-9-8-7-6-5-4-3-2-1 이런 식입니다.
능력자분들이 많으시군요 ㅎㅎ
@모차마 감사합니다.
불알을 탁 치고 갑니다~!
@디지털홍익인간
이 정도 팁에 그러시다면 남아날 불x이 없을 것 같습니다.^^ 감사합니다.
이 정도 팁에 그러시다면 남아날 불x이 없을 것 같습니다.^^ 감사합니다.
@비타주리 ㅋㅋㅋㅋㅋ 이미 남아있는게 없습니다...좋은팁 감사합니다. :)
@우지니이 음... 애도합니다. 써먹을 데는 별루 없는데 그래도 없으면 너무 아쉬울 것 같습니다.
오 전 대박이라고 생각합니다. gif 효과 뿐만 아니라 응용할게 많을거 같아용
뽑기 같은데도 써먹기 좋을거 같아용
뽑기 같은데도 써먹기 좋을거 같아용
@멀티트리플 맞아요. 그것도 가능하겠네요
색상과 선명도에도 확연한 차이가 있겠어요!!! 좋은 팁 감사합니다.