Qiitaの記事を書き終えて、最後にアイキャッチ画像を作ろうとしたところで手が止まりました。写真は曇りの日に撮ったせいで全体がねむく、背景はごちゃごちゃ。その上にタイトルの文字も載せたい。数分の作業のために有料の画像編集ソフトを開くのは大げさですし、オンラインツールだと写真をどこかにアップロードすることになります。osFoundryのフォトエディターは、ちょうどこういう場面で使う機能です。
osFoundryのフォトエディターとは
osFoundryは、チャットやAIエージェント、ファイル、制作ツールをひとつのウィンドウにまとめたデスクトップアプリです。フォトエディターはその中のラスター画像エディターで、写真を開いてレイヤーとマスクで編集し、トーンカーブやレベル補正などの色調補正をかけて書き出せます。PSDファイルも扱えます。
場所はサイドバーの「写真エディター」です。ベクターエディターや動画エディター、RAWエディターと並んでいて、Canvasの「新規Canvasプロジェクト」ダイアログの「エディター」から始めることもできます。Photoshopのような定番の写真編集ソフトを触ったことがあれば、画面を見ただけで迷わないはずです。左にツール、上にメニュー、右にカラー・プロパティ・レイヤーのパネルという、おなじみの配置になっています。
同じosFoundryの「画像ジェネレーター」とは役割がはっきり分かれています。画像ジェネレーターはプロンプトから新しい画像を作る機能で、フォトエディターは今ある画像のピクセルを自分の手で直すための機能です。勝手に描き直されることはありません。
なお、エディター内のメニューやパネルの表記は英語です。この記事でも「Image › Adjustments(色調補正)」のように、英語の表記に日本語を添えて書いていきます。
画面の見かた
写真をドラッグして開いた直後の画面です。見ておきたいのは次の5か所です。
- メニューバー: File、Edit、Image、Layer、Type、Select、Filter、View、Window、Help。色調補正やカンバスサイズはImage、選択範囲の操作はSelect、ぼかし・シャープ・ノイズ・変形・Liquify(ゆがみ)はFilterにまとまっています。
- 左のツール列: 移動、選択範囲、なげなわ、切り抜き、スポイト、ブラシ、修復ブラシ、スタンプ、消しゴム、グラデーション、ペン、文字、シェイプ。メニューの下のバーは、選んだツールの設定に切り替わります。画像ではブラシのモード・不透明度・流量・滑らかさが出ています。
-
中央のカンバス: 上のタブにファイル名と表示倍率(
cat-street.jpg @ 86.2% (RGB/8))、下のステータスバーにズームと画像のピクセル数が出ます。 - 右のパネル: 上からカラー・スウォッチ・グラデーション・パターン、プロパティと色調補正、いちばん下がレイヤー・チャンネル・パス。レイヤーパネルには描画モード、不透明度、ロック、塗りの設定があります。
- レイヤーパネル下のボタン: リンク、レイヤー効果(fx)、マスクを追加、塗りつぶし・調整レイヤーの追加、グループ、新規レイヤー、削除。
使いどころ1: ねむい写真をトーンカーブで締める
フリマアプリに古いカメラを出品しようとしている会社員の方を想像してください。夜に室内で撮った写真は、どうしても全体が灰色っぽくなります。黒が締まらず、白も抜けず、ほかの出品写真と並べると見劣りしてしまいます。
写真をフォトエディターにドラッグして、Image › Adjustments(色調補正)を開きます。明るさ・コントラスト、レベル補正、トーンカーブ、露光量、自然な彩度、色相・彩度、カラーバランス、白黒、レンズフィルター、チャンネルミキサー、シャドウ・ハイライトなど、ひと通りそろっています。
ここでCurves(トーンカーブ)を選びます。ダイアログには写真のヒストグラムがカーブの後ろに表示され、黒・グレー・白の点を拾うスポイトと、効果を見比べるためのPreviewのチェックがあります。暗い部分の点を少し下げて、明るい部分の点を少し上げる、いわゆるS字カーブにすると、カメラの金属部分にメリハリが戻ります。
あとから調整し直したいなら、Layerメニューかレイヤーパネル下のボタンから、同じ補正を「調整レイヤー」として追加しておくのがおすすめです。写真そのものに焼き込まず上に重ねる形になるので、何度でもやり直せます。次に撮った写真にも同じカーブを使えば、出品写真の雰囲気をそろえられます。
使いどころ2: 切り抜き、背景の差し替え、タイトル入れ
次は、保護猫カフェのSNSを手伝っている人のケースです。譲渡会の告知画像を、スマホで撮った「石畳の上の猫」の写真から作ります。
まずSelect › Subject(被写体を選択)。クリック1回で、猫の輪郭に沿って選択範囲ができます。続けてSelect › Inverse Selection(選択範囲を反転)で、猫以外の部分を選んだ状態にします。
背景が選ばれた状態で、Layer › New Fill Layer › Gradient(グラデーションの塗りつぶしレイヤー)を追加し、2色の青緑を指定します。選択範囲があるので、塗りつぶしレイヤーにはその形のレイヤーマスクが最初から付きます。グラデーションが石畳だけを覆い、猫はそのまま残ります。元の写真は下の「Background」レイヤーに手つかずで残っているのもポイントです。境目が気になるときは、ピクセルを消しゴムで消すのではなく、マスクを塗るかSelect and Mask(選択とマスク)で整えます。
最後に文字です。文字ツールでカンバスをクリックしてタイトルを入力します。上のバーでフォント・太さ・サイズを、右のプロパティパネルで文字レイヤーの位置や幅を調整できます。仕上がったらFile › Export › Quick Export as PNGで、画像全体をPNGとして書き出します。
レイヤーパネルには、文字、マスク付きのグラデーション、元の写真の3枚が重なっています。来週の告知では文字や色だけ変えればよく、最初から作り直す必要はありません。
使いどころ3: もらったPSDの修正と、写り込みの消去
最後は、デザイナーではないけれど画像を直すことが多いエンジニアのケースです。デザイナーから「バナーの文言だけ差し替えて」とPSDが届き、ついでに「チーム写真に写り込んだ看板を消してほしい」と頼まれたとします。
PSDはレイヤーを保ったまま開くので、文字レイヤーだけ書き換えたり、グループを動かしたりと、ファイルを統合せずに一部だけ直せます。写真のほうは、ツール列の修復ブラシやスタンプに加えて、EditメニューにContent-Aware Fill(コンテンツに応じた塗りつぶし)があります。看板を選択して周りのピクセルから埋め、残りをブラシで整えれば、写り込みはほぼ目立たなくなります。
ほかにも、Filter › Liquify(ゆがみ)には前方ワープ、縮小、膨張、渦、マスクで固定する機能があり、Layer › Smart Objectsでレイヤーをスマートオブジェクトにしておけば、拡大縮小やフィルターをあとから取り消せます。修正したPSDはレイヤーのまま保存でき、写真も同じウィンドウから書き出せます。
osFoundryのほかの機能とのつながり
フォトエディターはCanvasにあるエディターのひとつなので、近くの機能と組み合わせやすくなっています。
- RAWエディター: カメラのRAW写真の露出やホワイトバランスを整え、まとめて書き出せます。現像してからフォトエディターでレイヤー作業、という流れが自然です。
- ベクターエディター: ロゴやアイコンはこちら。SVGやPDFで書き出せます。
- デザインエディター: 複数ページのレイアウトを組むならこちらです。
- 画像ジェネレーター: まだ存在しない画像が必要なときは、プロンプトから作ってから書き出し、フォトエディターで手直しします。
作業の保存と書き出しは、エディター自身のFileメニューから行うのが確実です。
よくある質問
自分のパソコンの中で動きますか?
はい。エディターはosFoundryのデスクトップアプリの中で動き、ドラッグして開いた写真は手元のパソコンで編集されます。osFoundryは自分のデバイスで使う分には無料です。
手持ちのPSDファイルは開けますか?
はい。PSDに対応していて、レイヤーを保ったまま開けます。ほかのソフトで作ったファイルの続きも作業できます。
画像ジェネレーターとは何が違いますか?
画像ジェネレーターはプロンプトから新しい画像を作る機能です。フォトエディターは、レイヤー、マスク、色調補正、選択範囲、文字を使って、今ある画像を自分の手で編集するための機能です。
仕上がった画像はどう書き出しますか?
File › Exportからです。Quick Export as PNGなら画像全体をワンステップでPNGにでき、Export Asではプレビューを見ながら書き出せます。
デスクトップアプリはosfoundry.io/ja/downloadから無料でダウンロードできます。