LoginSignup
0

More than 3 years have passed since last update.

「目が炎」のSlackカスタム絵文字を作る

Last updated at Posted at 2018-12-23

この記事は、Business Bank Group Developers Advent Calendar 23日目の記事です。

🤩

私の職場のSlackでのチャットでは、いろんな絵文字が飛び交っています。
🤩(目が星、star-struck)が私の好みでよく使っているのですが、ある同僚から目が炎のやる気があるカスタム絵文字が欲しいと言われたので、作ってみました。

🔥

まずは準備としてSlackをブラウザ(Chrome)で開きます。
Slackアプリで投稿についている日時を右クリックして、「Open Link in New Window」をクリックします。
(ちなみに私はSblackというアプリを使っているので、Slackアプリとは少し違うかもしれません。)
OpenLinkInNewWindow.png

ブラウザが開いて、「Slack.appを開きますか?」と聞かれます。ブラウザで開きたいので「キャンセル」を選択してください。
スクリーンショット 2018-12-22 23.56.05.png

「open this link in your browser」というリンクをクリックします。
スクリーンショット 2018-12-22 23.56.17.png

これでブラウザでSlackが表示されます。

😀

ブラウザでSlackが開いたら、その中の絵文字を右クリックして「検証」を選択します。絵文字のbackgroundに設定されている画像のURLがわかるので、それを開いてください。
検証.png

実は、絵文字は1つの画像にすべて載っているのですね!
スクリーンショット 2018-12-22 23.49.08.png

ダウンロードして、GIMPなどの画像編集ソフトで開きます。
スクリーンショット 2018-12-21 19.08.12.png

😍

加工のベースは、😀(あはは、grinning)です。🤩(目が星、star-struck)と近い絵文字ですが、目が小さいから加工のベースに向いています。たくさん並んでいる絵文字からがんばって探し出します。
スクリーンショット 2018-12-21 19.12.06.png

64x64の画像として切り出します。
スクリーンショット 2018-12-21 19.13.11.png

🔥(火、fire)も見つけて、64x64の画像に切り出しておきます。
スクリーンショット 2018-12-22 23.40.25.png

🔥(火、fire)は半分の大きさに縮小して、2個にして、目の当たりに配置します。
スクリーンショット 2018-12-23 1.21.42.png

pngファイルとしてエクスポートします。
fire_struck.png

出来上がってみると、当初の予定は「目が炎のやる気があるカスタム絵文字」でしたが、口が笑っているので「火が大好きな人」みたいに見えちゃいますね。。。まあ、いいことにしましょう。

🤪

あとはSlackのカスタム絵文字として登録するだけです。
「Customize Your Workspace」を開いて作ったファイルを登録します。
スクリーンショット 2018-12-23 1.28.38.png

思う存分、「目が炎」の絵文字を送りあってください!

🎄

明日は @tronperidot の「Angular4.4 -> 6.0 にした話(後編)」です!
なぜか「Angular4.4 -> 6.0 にした話(前編)」と「Angular4.4 -> 6.0 にした話(後編)」にサンドイッチされた、絵文字の作り方のエントリーでした。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0