【Photoshop】CC 2021の新機能「空を置き換え」を試してみる | バシャログ。
こんにちは。お久しぶりです。sitoです。 10月20日から21日に、Adobe MAX 2020がオンライン開催されましたね。恥ずかしながら当日の朝に開催を知り、慌てて参加登録をしました。 さて、今回は、そこで発表されたPhotoshopの新機能「空を置き換え」が楽しそうだったので試して見たいと思います。 「空を置き換え」の使い方 編集→空を置き換えを選択 空を置き換えの属性ボックスが表示されます。 空を置き換えの属性ボックスで、使いたい空を選択。 「空」の項目にある矢印マークをクリックすると、登録されている空の画像が表示されます。 置き換えたい空の画像を選択します。 設定を調整してなじませる 左上の移動ツールでは適用した空の画像の位置を調整できます。 空ブラシツールは、置き換える空の範囲を編集できます。 手のひらツール、ズームツールは作業中のキャンバスの大きさ・表示位置の調整に使います
イラストが楽しいサイトまとめ：2020年6月 | バシャログ。
イラストを使ったサイトをいろいろと見る機会があったので、その中で見つけた素敵なサイトのご紹介。 HELLO CYCLING https://www.hellocycling.jp/ 細かくアニメーションするイラストがにぎやかで楽しいサイト。 醸す 造る 播磨 https://harimacountry.com/ イラストの中にコンテンツが散りばめられたサイト。 イラストは5種類くらいあるのでぜひサイトで最後まで見てほしい。 ワンマーケティング株式会社 採用ページ https://www.onemarketing.jp/recruit/ アニメーションする文字がかっこいい。 メニューを開くたびにサイトのカラーが変わります。 庭仕事 久留米支店 https://kurume.niwashigoto.com/ ゆるいタッチの漫画がとってもかわいくてほっこりするサイト。 株式会社PATRA htt
Adobe XD 検定をやってみた | バシャログ。
こんにちは。外出自粛のテレワーク期間で運動不足に拍車がかかっているsitoです。怖くて体重計に乗れません。 さて、5月19日に「Adobe XD 検定（ベータ）」なるものが公開されていました。 おもしろそうだったのでさっそくやってみようと思います！ ▼Adobe XD 検定 https://kentei.adobe.com/ Adobe XD 検定は、XDの理解度を５つのカテゴリー別に診断できる無料のサービスです。 まずは初級にチャレンジし、初級を完了すると中級を受けることができます。 上級は6月公開予定とのことです。 というわけでまずは初級にチャレンジ。 達成目標のなかに「5分以内に正解率90%以上」というものがあるので、それを目指してやってみます。 設問は全部で15問。解答は4択です。 初級の結果はこちら。 5分ギリギリでしたが見事満点獲得です！ 続いて中級にチャレンジ。 うーん、中級
間違いやすいHTML5の要素を再確認 | バシャログ。
こんにちは。koyaです。 突然ですが、龍が如く7はプレイしましたか？ 今まで龍が如くシリーズをプレイしたことはありませんでしたが、物語の舞台が関内、伊勢佐木町だったため思わず買ってしまいました。 見覚えのある景色を走り回るのはプレイしてて楽しかったです。横浜にゆかりのある方には是非触って欲しいです。 さて、今回はタイトルの通りよく間違いを見かけるHTML5の要素についてまとめたいと思います。 僕もマークアップを始めた頃は<section>と<article>の違いなどがさっぱりだったので、初心者の方など参考にしていただければと思います。 section要素 article要素 div要素 ul、ol要素 section要素 section要素は文脈のセクション分けをするためのタグです。本で言うと目次のようなものですね。 文脈を分けるためのものなので、見出し要素(h1〜h6)が要素内に必ず
日本語フリーフォントを検索できるサイトまとめ | バシャログ。
こんにちは。sitoです。 今回は、日本語のフリーフォントが検索できる便利なサイトを７つ紹介します。 ※個人利用のみ・商用利用可、どちらも含まれています。 ※使用する前には、必ず配布元で最新の利用規約を確認しましょう！ FONT FREE http://fontfree.me/ 無料で使える日本語フリーフォント投稿サイトです。 レイアウトがきれいでとても探しやすいです。 FREEフォントケンサク http://cute-freefont.flop.jp/ フリーフォントを書体別、ジャンル別で検索できます。 登録数も多くとっても便利。 FONT BEAR https://fontbear.net/ 商用利用可能なフリーフォントを探せる、ありがたいサイトです。 カテゴリや特徴などで絞り込みの検索ができます。 FONTDASU https://fontdasu.com/ こちらも商用利用可能なフ
【Photoshop】Photoshop CC 2020に追加されたオブジェクト選択機能がすごい | バシャログ。
こんにちは。sitoです。 今年もAdobe MAXとAdobe製品アップデートの季節がやってまいりました。 追加された各製品の新機能が話題になっていますが、今回はPhotoshopに追加された「オブジェクト選択機能」がすごかったのでご紹介。 近年のアップデートにより、複雑な髪の毛などの選択が簡単になったり、ボタンひとつで被写体が自動選択される「被写体の選択」機能などが追加されたりと、ずいぶん便利になった選択機能。 今回追加された「オブジェクト選択機能」は、切り抜きたい被写体を囲むことで選択ができるようになりました。 これだけで、かなりの精度で被写体をうまく選択してくれます。 選択範囲を、追加・削除したいときは、shiftキーやcommandキーをおしながら調整しましょう。 「選択とマスク」の画面にも「オブジェクト選択機能」が追加されているので、ここで境界線の調整も可能です。 日本でも12
【Adobe XD】最近の主なアップデートを振り返る【2019年7月時点】 | バシャログ。
こんにちは。sitoです。最近のAdobe XDのアップデートを振り返ります。 コンポーネント ５月のアップデートから実装されたコンポーネント機能。 それまでのシンボル機能では、一部の要素だけ色やサイズを変更したい場合、別のシンボルとして作成する必要がありました。 これがコンポーネント機能の登場によって、マスターコンポーネントへの編集は全てのインスタンに適応、個別インスタンスの編集はそのインスタンスのみに適応されるようになりました。シンボルと比べて、再利用可能なアセットの編集がより柔軟なものになりました。 ガイド 待ち望んでいました、ガイド機能。 こちらの５月のアップデートから実装されています。 多角形ツール 以前の記事で、多角形を描画できるプラグインを紹介しましたが、正式に機能として実装されました。 書式設定の強化 書式設定オプションに、 すべて大文字 すべて小文字 単語の先頭のみ大文字
メニューが楽しいサイトのまとめ | バシャログ。
ようやくSwitchを買いましてイカにドハマりしましたgamiです。お疲れ様です。 今回はメニューの楽しいサイトをまとめてみました。チェケラ！ Clorova バリ・ジャカルタに本拠地を置くメディア制作会社のサイトです。リッチ感すごい。単純にかっこいい！出てくる瞬間に写真がネガっぽくなるのもかっこいい。 IGOODI ちょうどいい速さで展開され、隅々まで動きが行き届いていて見てて気持ちがいいですね。 Microbrasserie À la Fût カナダにあるレストランのサイトです。いわゆるメガメニューなんですが文字を並べるだけじゃなく取り扱ってるビールもならべて、なおかつマウスオンでラベルが動くのいい。 Fully Studios - Motion on the web スウェーデンにある動画とウェブの制作会社のウェブサイト。トップのファーストビューがそのまま表示されます。イラストがかわ
イラストが楽しいサイトのまとめ | バシャログ。
酔っ払ってガチャを回すと当たることがよくあるgamiです。 さて、最近は写真や映像を大きく使ってるサイトをよく見かけますがイラストもいいぞ。というわけでイラストが楽しいサイトを厳選しました。チェケラ！ おかもと歯科 歯科に限らず医院系のサイトは清潔感のある院内写真や診察風景などを載せます。 このサイトではコーラルピンクを基調とした口のイラストのアニメーションで優しさ、親しみやすさが感じられます。ロゴがかわいい。 FESSIダンススクール ダンスの写真・映像は映えます。ドカンと乗せれば画面も持ちますしインパクトがあります。 しかし優しいイラストのアニメーションを用いることで暖かさが感じられとっつきやすさも出てくるのではないでしょうか？ もう片方もマウスオンで動きますのでぜひサイトにてチェックしてみてください。 イベントスタジオ イベントと一言いっても音楽フェスや展覧会、トークセッションなど幅
マウスストーカーがすごいサイト その2 | バシャログ。
突然ですが、お知らせです。弊社ではフロントエンドエンジニアの募集をはじめました。 というわけで、マウス追従型のアニメーションを採用しているサイト、よく見かけるようになりました。なので第二弾をお送りします。チェケラ。 SOOTH株式会社 マウスがまず青丸にかわり、その後を残像のようにグレーの丸が付いてくる。 Volt for Drive マウスに特別オブジェクトがついてくるわけではなく、背景の地図が明るくなる。 余談ですが、同僚はこれを見て成金の風刺画の「どうだ明るくなったろう」を連想したそう。 One World One Face これはマウスに青丸が追従してくるのですが、ボタンにふれると青丸が消えてボタンが青に変わるので色を塗ってるような気分に慣れて楽しい。 DUCASSE Paris 局所的なマウスストーカーで、画像にリンクがある場合はオンマウスでカーソルが丸十字に変わる。しつこくなく
マウスストーカーがすごいサイトまとめ | バシャログ。
マウスストーカーとは、画面上のカーソルにキラキラ追従していたあれです。個人サイトが隆盛を極めていたときによく見たあれです。サンプルは以下のリンクより参照されたし。 マウスストーカー１■文字■ 複数色のキラキラ すっかり見なくなったと思っていたら、最近このマウスストーカーを取り入れているサイトをちらほら見かけるようになりました。気になったデザインのものをいくつかピックアップしたいと思います。チェケラ！ Blend | A creative agency イタリアのクリエイティブエージェンシーのサイト。ここでは透過された円が追従してきますが、リンク可能なエリアに入ると大きくなって矢印が現れます。トップのマウスオンでぼかしが鮮明になる挙動もいい。 BASIC™ | Culture Manual 上のgifはメンバー紹介で、詳細がある場合は＋のオブジェクトが、閉じる時は×が追従します。他にも下に要
画面遷移がすごいサイトのまとめ | バシャログ。
TVKで再放送されているあぶデカにハマっているgamiです。あの時代の関内・馬車道あたり物騒すぎるでしょ…。 さて、以前にも紹介しました、気になるデザインを共有するDesignClipという社内のチャットグループより、画面遷移がシームレスでこいつぁすげえや！となったものを幾つか紹介できればと思います。チェケラ！ 佐久間徹設計事務所 デザインはすごくシンプルで動きもいいと印象によく残ります。 仕事一覧から仕事詳細へ 一覧の写真をクリックするとコンテンツの後ろでニュッと大きくなる感じが好き。 下位ページへ グローバルメニューに注目してるといつの間にかコンテンツが変わってる。 Orenda Security セキュリティ会社のサイト。シャッターのような動きからのロゴアニメーションはまさに鍵をかけてるように感じました。 スタジオスプーン株式会社 四方のボタンをクリックすると、その方向から背景がスラ
スライドがすごいサイトのまとめ | バシャログ。
雪の降る日は犬の如くカメラを片手に新宿を駆け回ってパシャりとしておりました。gamiです。 フォトジェニックだもの。仕方ないね。 さて、シーブレインの社内チャットには様々なチャンネルがあります。案件ごとの真面目なチャンネルからひたすら動物写真を挙げる癒されチャンネルまで。 そのなかで気になるデザインをまとめるDesignClipというチャンネルが存在します。そこに投稿された中でスライドショーが気になるサイトが幾つかありましたのでまとめてお送りしたいと思います。 HII ARCHITECTS 工二建築設計事務所 スライド中央にあるロゴが面白い動きをしています。どうやらPrism Effect Slider with Canvasというのを使用しているようです。 【虎屋】虎尾名物。地瓜糕點專賣 虎屋（台湾）さつまいもを使ったお菓子のサイト。ファーストビューのスライドにマウスオンすると左右の矢印
【Photoshop】描画モードを理解するその③ ～除算編～ | バシャログ。
こんにちは。今年の流行語大賞のノミネート語の半分以上を知らなかったmackyです。 今日は、Photoshop描画モードを理解するその③をやります。前回は乗算編でしたので今回は除算編をやろうと思います。 除算て？ 除算は、描画モードの中でも私は、ほとんど使ったことがありません^^;今回、社内の活動で写真を線画（ここでは鉛筆画）にするという作業があったためトライしてみたところ、案外簡単にできたのでメモしておこうと思います。 タダの写真がまるで自分が描いたかのようになりますので、ご興味ある方はどうぞ。 まず、除算というからには色と色を…割る（÷）わけですね。色を割るといわれても・・・ コチラのサイトで計算の仕方を説明してくれています。ちゃんと理解したいというかたは見てみてください。 Handy Web Design あまり、深く知る必要はないかもしれませんが、ポイントとして上のレイヤーのオブジ
【Photoshop】描画モードを理解するその② ～乗算編～ | バシャログ。
こんにちは。「72hours」というドキュメント番組にはまっているmackyです。 今日は、すっかり途絶えていた、Photoshop描画モードを理解するその②をやります。ということで、意外と便利な乗算についてまとめてみます。 乗算を理解する 乗算は、描画モードの中でも私は、特によく使っているモードの一つです。知っていると、「ああ！ここのフォントがない―。ロゴがないー。よし、必殺切り貼りだ。」なんて状況も（状況にもよりますが）ときとして超えてゆけるでしょう。 まず、乗算というからには色と色を掛け合わせるわけですね。 下のレイヤーのオブジェクトと上のレイヤーのオブジェクトの色を混ぜた色になって上のレイヤーのオブジェクトが表示されるのです。 乗算は、色の重なり感を表現したいときや、影の部分をより強調するときなどに活用できます。下レイヤーのテクスチャが透けるような仕上がりとなるので、合成する際にも
バシャログ。
【お知らせ】バシャログ。メンバーが所属する株式会社シーブレインのWebサイト制作サービスのサイトがリ... お知らせ
アイコンフォントFont AwesomeをPhotoshopやillustraterで使ってみる。 | バシャログ。
こんにちは。mackyです。 今日は、サイトデザイン時に、アイコンフォントのFont Awesomeをつかう方法をまとめようと思います。 フォントをインストール まず、Font Awesomeのサイトからフォントをダウンロードしましょう。 図の2つのファイルをインストールします。 意外と知らない？Cheatsheetの存在 では、実際にアイコンを使ってみましょう。 Photoshopを開いて新規ページを用意します。Font Awesomeのサイトから使いたいフォントをコピーします。 その際、Cheatsheetのページを使うと、どのブラウザでもコピーできて便利です。 というのは、以下のページからコピーしようとするとなぜかIEからしかできません。（詳しくいうと、ChromeとFirefoxはできませんでした。）私は普段Chromeを使っているのですが、Cheatsheetからはサクッとコピー
【Photoshop】描画モードを理解するその① ～スクリーンモード編～ | バシャログ。
こんにちは。mackyです。 photoshopやFireworksの描画モードは、バナーを作ったり写真を加工したりするのに使用しますが、 普段コーディングばかりでデザインはちょっと…という人に突然きてしまったデザインの依頼を想定し、 描画モードの説明とそれを使った加工方法をシリーズ（気分）で紹介していこうと思います。 私も、全ての描画モード使いこなせているわけではないのですが、知っているのといないのとでは、作業効率や簡単なバナー作成でもクオリティがちがってきます。 そして、今回もひきつづき使用するツールはPhotoshop CS5.1です。CC以外のみなさまもうしばらく頑張っていきましょう。 スクリーンモードを理解する まず、スクリーンを使うと、必ず元の色より明るくなります。 光の三原色(RGBカラー)の色の混ぜ方と似ていて、色を足せば足すほど白に近づきます。 ですが、個人的に、結果どん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG画像のHTMLでの使い方 | バシャログ。
cssでPhotoshopのように画像にエフェクトを追加する方法 | バシャログ。